この記事では主にスワイパープラグインのカスタム切り替え矢印ボタンを詳しく紹介します。興味のある方は参考にしてください
スワイパーを使用するときにそのようなニーズに遭遇したかどうかはわかりません。 、スワイパー プラグインは切り替え矢印ボタンをカスタマイズします。これ以上の手間は省き、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('.in_container', { prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', }) </script>
効果は以下の通りです
以上、皆さんの参考になれば幸いです。
関連記事:
WeChat ミニ プログラムで 3 レベルのリンケージ セレクターを使用する方法
Vue コンポーネントのカスタム イベントについて (詳細なチュートリアル)
以上がスワイパープラグインで切り替え矢印ボタンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。