這次帶給大家swiper外掛怎麼切換箭頭按鈕,swiper外掛切換箭頭按鈕的注意事項有哪些,以下就是實戰案例,一起來看一下。
也就是需要把左右切換的箭頭移到容器的外面,自訂箭頭的樣式。
為swiper容器再加一個父容器,兩個容器之間留下間隙,箭頭定位到間隙之間就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>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是swiper插件怎樣切換箭頭按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章!