swiper插件自定義切換箭頭按鈕
更新時(shí)間：2017年12月28日 11:21:21 作者：_六月
這篇文章主要為大家詳細(xì)介紹了swiper插件自定義切換箭頭按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
不知道大家在使用swiper時(shí)有沒(méi)有遇到這樣一種需求，swiper插件自定義切換箭頭按鈕，話不多說(shuō)，直接上gif。
也就是需要把左右切換的箭頭移到容器的外面，自定義箭頭的樣式。
給swiper容器再加一個(gè)父容器，兩個(gè)容器之間留下間隙，箭頭定位到間隙之間就ok了。
箭頭默認(rèn)是絕對(duì)定位的，給父容器一個(gè)相對(duì)定位，就能夠調(diào)整箭頭位置。此外箭頭用的是背景圖，改變箭頭大小的同時(shí)記得改變背景圖大小。上代碼。
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>
效果如下
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 獲取url參數(shù)和script標(biāo)簽中獲取url參數(shù)函數(shù)代碼
不要在方法中調(diào)用方法，否則可能始終獲取的是最后一個(gè)js的文件的參數(shù)，要在方法中使用，請(qǐng)先用變量保存，在方法中直接獲取2010-01-01
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)，自定義計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
下面的原理是利用時(shí)間差的原理實(shí)現(xiàn)腳本的延遲執(zhí)行，是個(gè)思路，需要的朋友可以參考下。2010-03-03
JS 如果改變span標(biāo)簽的是否隱藏屬性,大家根據(jù)需要選擇使用。2011-10-10
js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)3D輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
Hash Map通常在JavaScript中作為一個(gè)簡(jiǎn)單的來(lái)存儲(chǔ)鍵值對(duì)的地方,不過(guò)哈希對(duì)象Object并不是一個(gè)真正的哈希映射,沒(méi)Java中的Hash Map來(lái)的那么強(qiáng)大,well,接下來(lái)帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)2016-05-05
JS結(jié)合bootstrap實(shí)現(xiàn)基本的增刪改查功能
這篇文章主要介紹了JS結(jié)合bootstrap實(shí)現(xiàn)基本的增刪改查功能,需要的朋友可以參考下2016-07-07
javascript把15位身份證轉(zhuǎn)成18的函數(shù)
非常不錯(cuò)的，看了這個(gè)大家就明白身份證的運(yùn)算規(guī)則了2008-10-10