不知道大家在使用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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。