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