swiper插件自定義切換箭頭按鈕
不知道大家在使用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實(shí)現(xiàn)獲取圖片大小及圖片等比縮放的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)獲取圖片大小及圖片等比縮放的方法,涉及javascript針對(duì)圖形圖像相關(guān)屬性獲取與修改相關(guān)操作技巧,需要的朋友可以參考下2016-11-11如何用js實(shí)現(xiàn)鼠標(biāo)向上滾動(dòng)時(shí)浮動(dòng)導(dǎo)航
今天給大家介紹一下使用JavaScript判斷鼠標(biāo)滑輪是不是向上滾動(dòng),當(dāng)向上滾動(dòng)的時(shí)候,導(dǎo)航條浮動(dòng)在頂部位置。示例代碼如下。2016-07-07javascript時(shí)間戳和日期字符串相互轉(zhuǎn)換代碼(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇javascript時(shí)間戳和日期字符串相互轉(zhuǎn)換代碼(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06JavaScript Event學(xué)習(xí)第三章 早期的事件處理程序
在這一章我會(huì)談到一些最古老的添加事件處理程序的方法,這些方法甚至被第二代瀏覽器所支持。2010-02-02countUp.js實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10js變量值傳到php過(guò)程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過(guò)程詳解 將php解析成數(shù)據(jù),傳參數(shù)去后臺(tái),用ajax,或者原生js方式拼接url。明白原理,洞悉系統(tǒng)是先解析php,再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06javascript實(shí)現(xiàn)可拖動(dòng)變色并關(guān)閉層窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)可拖動(dòng)變色并關(guān)閉層窗口的方法,涉及javascript操作層的樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05javascript腳本編程解決考試分?jǐn)?shù)統(tǒng)計(jì)問(wèn)題
該考試題目共有25道,每一道都是2選1的選擇題,總分是100分。那么javascript的代碼如下2008-10-10