スワイパー チュートリアル: 移動する矢印を制御するにはどうすればよいですか?

Question

これは私のカルーセルですが、スワイパー ボタンを設定したいとき、矢印が画像から遠く離れています。矢印を近づける (位置を変更する) 方法はありますか?

effect={'coverflow'}
  グラブカーソル={false}
  centerSlides={true}
  slidesPerView={'3'}
  rewind={true}
  coverflowEffect={{
     回転: 0、
     ストレッチ: 0、
     深さ: 30、
     修飾子: 20、
     slideShadows: false、
   }}
 PreventClicks={true}
 ナビゲーション={true}
 ページネーション={true}
 modules={[EffectCoverflow, ページネーション]}
 className="mySwiperDesktop">````


幅（44*27）の数値を変更しようとしましたが、解像度を変更すると矢印が画面から外れてしまいます

width: calc(var(--swiper-navigation-size)/ 44 * 27)

Answer 1

Swiper ライブラリを使用し、特定の画面解像度の式に基づいてナビゲーション矢印の幅を変更しようとしているようです。ただし、解像度を変更すると矢印が画面から消えてしまうようです。この問題を分析して、どのように解決できるかを見てみましょう。

CSS を使用して、--swiper-navigation-size を含む計算に基づいてナビゲーション矢印の幅を 27:44 (幅:高さ) の比率で設定しているようです。指定した式は次のとおりです:

リーリー

この問題をトラブルシューティングし、修正するために実行できる手順をいくつか示します:

レスポンシブデザイン: デザインが応答性が高く、さまざまな画面解像度に適切に適応することを確認してください。ナビゲーション矢印やその他の要素がさまざまな画面サイズに正しく収まるように、CSS と計算を調整する必要がある場合があります。

CSS ユニット: --swiper-navigation-size で使用している単位を確認してください。固定ピクセル値で定義されている場合、異なる画面解像度にうまく適応できない可能性があります。応答性を高めるには、vw (ビューポート幅) やパーセンテージなどの相対単位を使用することを検討してください。

メディアからのお問い合わせ: メディア クエリを使用して、さまざまな画面サイズに基づいてさまざまなスタイルを適用します。これにより、さまざまな解像度に基づいてナビゲーション矢印の外観を微調整できるようになります。例えば：＃＃＃ リーリー

テストとデバッグ: ブラウザの開発者ツールを使用して、要素とそのスタイルを検査します。これは、どのスタイルがナビゲーション矢印に影響を与えるか、また解像度が異なるとどのように変化するかを理解するのに役立ちます。

さまざまなアプローチを検討してください: CSS の計算が複雑すぎて予測できない場合は、他の方法を使用してナビゲーション矢印のサイズを変更することを検討してください。たとえば、相対幅、フレックスボックス、またはグリッド レイアウトを使用して、さまざまな画面サイズにわたってレイアウトをより自然に処理できます。

CSS 計算は、特にレスポンシブ デザインにおいて、予期しない動作を示す場合があることに注意してください。さまざまなデバイスや画面解像度で徹底的にテストし、デザインが機能的で視覚的に魅力的なものであることを確認します。