スワイパープラグインで切り替え矢印ボタンを実装する方法

亚连
リリース: 2018-06-14 16:52:08
オリジナル
2728 人が閲覧しました

この記事では主にスワイパープラグインのカスタム切り替え矢印ボタンを詳しく紹介します。興味のある方は参考にしてください

スワイパーを使用するときにそのようなニーズに遭遇したかどうかはわかりません。 、スワイパー プラグインは切り替え矢印ボタンをカスタマイズします。これ以上の手間は省き、gif に直接進みましょう。

つまり、左右の切り替え矢印をコンテナの外に移動し、矢印のスタイルをカスタマイズする必要があります。
スワイパーコンテナに親コンテナを追加し、2つのコンテナの間に隙間を残して、隙間の間に矢印を配置すればOKです。
矢印はデフォルトで絶対位置に設定されており、親コンテナに相対位置を与えることで矢印の位置を調整できます。また、矢印は背景画像を使用していますので、矢印のサイズを変更する場合は、背景画像のサイズも変更してください。コードをアップします。

css:

<style>
    .out_container{
      width: 280px;
      height: 150px;
      margin: 100px auto;
      position: relative;
      outline: 1px solid black;
    }
    .in_container{
      width: 216px;
      height: 130px;
      margin: 0 auto;
      overflow: hidden;
    }
    .swiper_btn{
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  </style>
ログイン後にコピー

html:

<body>
  <p class="out_container">
    <p class="in_container">
      <p class="swiper-wrapper">
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
      </p>
      <p class="swiper-button-prev swiper_btn"></p>
      <p class="swiper-button-next swiper_btn"></p>
    </p>
  </p>
</body>
ログイン後にコピー

js:

<script>
  var mySwiper = new Swiper(&#39;.in_container&#39;, {
    prevButton: &#39;.swiper-button-prev&#39;,
    nextButton: &#39;.swiper-button-next&#39;,
  })
</script>
ログイン後にコピー

効果は以下の通りです

以上、皆さんの参考になれば幸いです。

関連記事:

WeChat ミニ プログラムで 3 レベルのリンケージ セレクターを使用する方法

PHP クロージャーと匿名関数 (詳細なチュートリアル)

Vue コンポーネントのカスタム イベントについて (詳細なチュートリアル)

以上がスワイパープラグインで切り替え矢印ボタンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!