今回は、Swiperプラグインで矢印ボタンを切り替える方法を紹介します。 Swiperプラグインで矢印ボタンを切り替える際の注意点を紹介します。
つまり、左右切り替え矢印をコンテナの外に移動し、矢印のスタイルをカスタマイズする必要があります。
スワイパーコンテナに親コンテナを追加し、2つのコンテナの間に隙間を残して、隙間の間に矢印を配置すればOKです。
矢印はデフォルトで絶対位置です。親コンテナに相対的な位置を与えることで、矢印の位置を調整できます。また、矢印は背景画像を使用していますので、矢印のサイズを変更する場合は、背景画像のサイズも変更してください。コードをアップします。
css:
えーhtml:
りーjs:
<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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がスワイパープラグインの矢印ボタンを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。