swiper插件怎樣切換箭頭按鈕
- php中世界最好的语言原創
- 2018-04-13 13:39:202918瀏覽
這次帶給大家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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn