這篇文章主要為大家詳細介紹了swiper插件自訂切換箭頭按鈕,具有一定的參考價值,有興趣的小夥伴們可以參考一下
#不知道大家在使用swiper時有沒有遇到這樣一種需求,swiper插件自訂切換箭頭按鈕,話不多說,直接上gif。
也就是需要把左右切換的箭頭移到容器的外面,自訂箭頭的樣式。
為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>
效果如下
#上面是我整理給大家的,希望未來對大家有幫助。
相關文章:
以上是在swiper插件中如何實現切換箭頭按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章!