不知道大家在使用swiper時有沒有遇到這樣一種需求，swiper插件自定義切換箭頭按鈕，話不多說，直接上gif。

也就是需要把左右切換的箭頭移到容器的外面，自定義箭頭的樣式。

給swiper容器再加一個父容器，兩個容器之間留下間隙，箭頭定位到間隙之間就ok了。

箭頭默認是絕對定位的，給父容器一個相對定位，就能夠調整箭頭位置。此外箭頭用的是背景圖，改變箭頭大小的同時記得改變背景圖大小。上代碼。

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',

})

效果如下

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的swiper切换按钮位置改变_swiper插件自定义切换箭头按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。