ホームページ > 記事 > ウェブフロントエンド > スワイパープラグインで切り替え矢印ボタンを実装する方法
スワイパープラグインで切り替え矢印ボタンを実装する方法
- 亚连オリジナル
- 2018-06-14 16:52:082751ブラウズ
この記事では主にスワイパープラグインのカスタム切り替え矢印ボタンを詳しく紹介します。興味のある方は参考にしてください
スワイパーを使用するときにそのようなニーズに遭遇したかどうかはわかりません。 、スワイパー プラグインは切り替え矢印ボタンをカスタマイズします。これ以上の手間は省き、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。