swiper切换按钮位置改变_swiper插件自定义切换箭头按钮
不知道大家在使用swiper時(shí)有沒有遇到這樣一種需求,swiper插件自定義切換箭頭按鈕,話不多說,直接上gif。
也就是需要把左右切換的箭頭移到容器的外面,自定義箭頭的樣式。
給swiper容器再加一個(gè)父容器,兩個(gè)容器之間留下間隙,箭頭定位到間隙之間就ok了。
箭頭默認(rèn)是絕對(duì)定位的,給父容器一個(gè)相對(duì)定位,就能夠調(diào)整箭頭位置。此外箭頭用的是背景圖,改變箭頭大小的同時(shí)記得改變背景圖大小。上代碼。
css:
.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;
}
html:
js:
var mySwiper = new Swiper('.in_container', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
})
效果如下
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
《新程序員》:云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的swiper切换按钮位置改变_swiper插件自定义切换箭头按钮的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: shell在二级python_在pyth
- 下一篇: formatnumber js_java