• コミュニティ

  カルーセルの矢印の位置を変更したい

  トピックス by widget初心者 1805 pt  2023年9月29日 11:06 1073 PV

  【Widget名】

  カルーセル（画像/左右タップでスライド）※要javascript(アクション)

  【相談内容】

  ≪カルーセル（画像/左右タップでスライド）※要javascript(アクション)≫のWidgetを使用し2枚の画像を表示させているのですが、矢印（＜＞）の位置調整がPCとSPでうまく出来ていない状態です。
  チャットで途中までご対応いただいたのですが、ページの読み込みの高さによって微妙にずれてしまっている、とのことでした。SP/PCそれぞれで、キャプチャ画像の真ん中あたりに矢印が来るように設定いただけますと幸いです。
  ご確認のほどよろしくお願いいたします。

  カルーセル（画像左右タップでスライド）※要javascriptアクション2.png 278 KB 画像ファイル — クリックして 見る

  • コピーダウンロードリンク

  

  widgetマスター   3 年前 2 人 · 1 コメント

  • widget
  • カルーセル（画像/左右タップでスライド）※要javascript(アクション)
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年9月29日 11:19

  下記CSSを調節してください！

  添付画像のようになります！

  .sidetap-carousel {
    margin: 0 auto;
    position: relative; /* 追加 */
  }
  
  .swiper-navigation {
    /* ..省略.. */
    top: 50%; /* 26% を 50% に変更 位置はお好みで調整して下さい */
    /* ..省略.. */
  }

  カルーセル（画像左右タップでスライド）※要javascriptアクション.png 386 KB 画像ファイル — クリックして 見る

  • コピーダウンロードリンク

  

Log In to Reply