swiper插件自定義切換箭頭按鈕

來源：懂視網責編：小采時間：2020-11-27 22:22:43

swiper插件自定義切換箭頭按鈕

swiper插件自定義切換箭頭按鈕:不知道大家在使用swiper時有沒有遇到這樣一種需求，swiper插件自定義切換箭頭按鈕，話不多說，直接上gif。也就是需要把左右切換的箭頭移到容器的外面，自定義箭頭的樣式。給swiper容器再加一個父容器，兩個容器之間留下間隙，箭頭定位到間隙之間就ok了

推薦度：

點擊下載本文 文檔為doc格式

導讀swiper插件自定義切換箭頭按鈕:不知道大家在使用swiper時有沒有遇到這樣一種需求，swiper插件自定義切換箭頭按鈕，話不多說，直接上gif。也就是需要把左右切換的箭頭移到容器的外面，自定義箭頭的樣式。給swiper容器再加一個父容器，兩個容器之間留下間隙，箭頭定位到間隙之間就ok了

不知道大家在使用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>
 <div class="out_container">
 <div class="in_container">
 <div class="swiper-wrapper">
 <div class="swiper-slide"><img src="" alt=""></div>
 <div class="swiper-slide"><img src="" alt=""></div>
 <div class="swiper-slide"><img src="" alt=""></div>
 </div>
 <div class="swiper-button-prev swiper_btn"></div>
 <div class="swiper-button-next swiper_btn"></div>
 </div>
 </div>
</body>

js:

<script>
 var mySwiper = new Swiper('.in_container', {
 prevButton: '.swiper-button-prev',
 nextButton: '.swiper-button-next',
 })
</script>

效果如下

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

swiper插件自定義切換箭頭按鈕

推薦度：

點擊下載本文 文檔為doc格式

標簽：插件 swiper swiper插件

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

swiper插件自定義切換箭頭按鈕

swiper插件自定義切換箭頭按鈕

swiper插件自定義切換箭頭按鈕

最新推薦

猜你喜歡

熱門推薦