使用swiper自定義分頁點(diǎn)擊跳轉(zhuǎn)指定頁面
swiper自定義分頁點(diǎn)擊跳轉(zhuǎn)指定頁面
mySwiper.slideTo(index, speed, runCallbacks),控制Swiper切換到指定slide。
參數(shù)名 | 類型 | 是否必填 | 描述 |
---|---|---|---|
index | num | 必選 | 指定將要切換到的slide的索引 |
speed | num | 可選 | 切換速度(單位ms) |
runCallbacks | boolean | 可選 | 設(shè)置為false時(shí)不會(huì)觸發(fā)transition回調(diào)函數(shù) |
(更多方法見Swiper官網(wǎng))
效果圖如下:
<!--banner開始--> <div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="Static/Images/banner_1.jpg" alt="banner"> </div> <div class="swiper-slide"> <img src="Static/Images/banner_1.jpg" alt="banner"> </div> </div> <div class="swiper-button-prev"></div><!--左箭頭。如果放置在swiper-container外面,需要自定義樣式。--> <div class="swiper-button-next"></div><!--右箭頭。如果放置在swiper-container外面,需要自定義樣式。--> <!--分頁器 --> <div class="swiper-pagination"></div> </div> </div> <script> var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可選選項(xiàng),自動(dòng)滑動(dòng) loop: true, // 循環(huán)模式選項(xiàng),true 循環(huán)播放 observer: true,//實(shí)時(shí)檢測(cè),動(dòng)態(tài)更新 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },//前進(jìn)后退箭頭 pagination: {//自定義分頁 el: '.swiper-pagination', type: 'custom', autoplayDisableOnInteraction: false, renderCustom: function (swiper, current, total) { var paginationHtml = " "; for (var i = 0; i < total; i++) { // 判斷是不是激活焦點(diǎn),是的話添加active類,不是就只添加基本樣式類 if (i === (current - 1)) { paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"><p class="swiper-pagination-li"></p></span>'; } else { paginationHtml += '<span class="swiper-pagination-customs"><p class="swiper-pagination-li"></p></span>'; } } return paginationHtml; }, }, }); $('.swiper-pagination').on('click','span',function(){ var index = $(this).index()+1 ; mySwiper.slideTo(index, 1000, false)//切換到對(duì)應(yīng)的slide,速度為1秒 }); </script> <!--banner結(jié)束-->
/*banner*/ .banner { position: relative; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -22px; z-index: 10; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: cover; background-position: center; background-repeat: no-repeat } .swiper-button-next { background-image: url("../Images/banner_right.png"); right: 10px; } .swiper-button-prev { background-image: url("../Images/banner_left.png"); left: 10px; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform } .swiper-slide img { width: 100%; } .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination-custom { bottom: 12%; left: 0; width: 100%; height: 20px; text-align: center; } .swiper-pagination-li { width: 6px; height: 6px; background-color: #fff; position: absolute; top: 6px; left: 6px; border-radius: 50%; } .swiper-pagination-customs { width: 18px; height: 18px; display: inline-block; cursor: pointer; background: none; opacity: 1; border-radius: 50%; margin: 0 5px; outline: 0; position: relative; } .swiper-pagination-customs-active { opacity: 1; border: 1px solid #fff; background: none; } .banner-container { position: absolute; z-index: 999; top: 25%; left: 25%; width: 50%; height: 50%; text-align: center; color: #fff; } .banner-container img { width: 80px; height: auto; display: table-cell; margin: 0 auto; } .banner-container .big-title { font-size: 44px; text-transform: uppercase; font-weight: 700; margin-top: 16px; } .banner-container .small-title { font-size: 20px; letter-spacing: 5px; margin: 14px 0; } .banner-btn { display: flex; justify-content: space-around; width: 45%; margin: 0 auto; margin-top: 30px; } .banner-btn .btn { width: 120px; height: 36px; border: 1px solid #fff; line-height: 36px; border-radius: 36px; font-size: 14px; transition: all 0.5s; } .banner-btn .btn:hover { width: 120px; height: 36px; border: 1px solid #fff; line-height: 36px; border-radius: 36px; font-size: 14px; color: #000000; background: #fff; font-weight: 600; cursor: pointer; } /*banner*/
swiper自定義分頁器
html部分
<div class="swiper-container"> ? ? ?<div class="swiper-wrapper"> ? ? ? ? <div class="swiper-slide"> ? ? ? ? ? ? <img src=""> ? ? ? ? </div> ? ? ?</div> ? ? ?<!-- 如果需要分頁器 --> ? ? ?<div class="swiper-pagination"></div> </div>
js部分
<script type="text/javascript" src="js/swiper-bundle.min.js"> </script> ? var mySwiper = new Swiper(".swiper-container", { ? ? pagination: { ? ? ? ? el: '.swiper-pagination', ? ? ? ? clickable: true, ? ? ? ? type:'custom', ? //自定義分頁器 ? ? ? ? renderCustom: function (swiper, current, total) { ? ? ? ? ? ? ? var paginationHtml = " "; ? ? ? ? ? ? for (var i = 0; i < total; i++) { ? ? ? ? ? ? ? ? ?// 判斷是不是激活焦點(diǎn),是的話添加active類,不是就只添加基本樣式類 ? ? ? ? ? ? ? ? ?if (i === (current - 1)) { ? ? ? ? ? ? ? ? ? ? ? paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active" ></span>'; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ?paginationHtml += '<span class="swiper-pagination-customs" ></span>'; ? ? ? ? ? ? ? ? }?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? return paginationHtml; ? ? ? ? }, ? ? } }); ? ? ? ? ? ? ? ? ? ? //點(diǎn)擊分頁器跳轉(zhuǎn)到對(duì)應(yīng)頁面 $(".swiper-pagination").on("click","span",function(){ ? ? ? ? var index = $(this).index(); ? ? ? ? mySwiper.slideTo(index); })
css部分
.swiper-pagination-custom { ? ? height: 34px; ? ? text-align: end !important; ?//這里設(shè)置分頁器的位置 放在行的末尾 } /*自定義分頁器的樣式*/ .swiper-pagination-customs { ? ? width: 34px; ? ? height: 34px; ? ? display:inline-block; ? ? border-radius: 5px; ? ? margin: 0 3px; ? ? outline: 0; ? ? box-sizing: border-box; } .swiper-pagination-customs:last-child{ ? ? margin-right: 16px; } /*自定義分頁器激活時(shí)的樣式表現(xiàn)*/ .swiper-pagination-customs-active { ? ? border: 2px solid #fcb916; ? ? width: 36px; ? ? height: 36px; }
解決動(dòng)態(tài)加載數(shù)據(jù)滑動(dòng)失效的問題
1. 在swiper初始化加兩行代碼
var mySwiper = new Swiper('.swiper-container', {? ? ?observer:true,//修改swiper自己或子元素時(shí),自動(dòng)初始化swiper? ?observeParents:true//修改swiper的父元素時(shí),自動(dòng)初始化swiper? ? });
2.在數(shù)據(jù)請(qǐng)求后初始化swiper
function getMess(){ ? ? globalParams = { ? ? ? ? //發(fā)送請(qǐng)求的參數(shù) ? ? } ? ? api.post2("xxx/xxx/xxx", globalParams, function(res) { ?//ajax請(qǐng)求 ? ? ? ? var list = res.data.list; ? ? ? ? list.forEach((item) => { ? ? ? ? ? ? ? ? var itm = item.formModel.cgformFieldList ? ? ? ? ? ? ? ? var imgMess = itm[10].propertyLabel.split(",") ? ? ? ? ? ? ? ? var msg = "" ? ? ?// 輪播詳情 ? ? ? ? ? ? ? ? imgMess.forEach((item) => { ? ? ? ? ? ? ? ? ? ? msg += ` ? ? ? ? ? ? ? ? ? ? ? ? <div class="swiper-slide"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://qiniu.hollysmart.com.cn/${item}"> ? ? ? ? ? ? ? ? ? ? ? ? </div>` ? ? ? ? ? ? ? ? ? ? $(".swiper-wrapper").html(msg);//動(dòng)態(tài)加載輪播項(xiàng) ? ? ? ? ? ? ? ? ? ? ? ? //初始化輪播組件 ? ? ? ? ? ? ? ? ? ? var mySwiper = new Swiper(".swiper-container", { ? ? ? ? ? ? ? ? ? ? ? ? pagination: { ? ? ? ? ? ? ? ? ? ? ? ? ? ? el: '.swiper-pagination', ? ? ? ? ? ? ? ? ? ? ? ? ? ? clickable: true, ? ? ? ? ? ? ? ? ? ? ? ? ? ? type:'custom', ? ? ? ? ? ? ? ? ? ? ? ? ? ? renderCustom: function (swiper, current, total) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var paginationHtml = " "; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (var i = 0; i < total; i++) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 判斷是不是激活焦點(diǎn),是的話添加active類,不是就只添加基本樣式類 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //要求是分頁器為縮小的輪播圖片 將圖片插入到元素中 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (i === (current - 1)) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? paginationHtml +=? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '<span class="swiper-pagination-customs swiper-pagination-customs-active" >' + `<img src="https://xxx.com.cn/${imgMess[i]}">` + '</span>'; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? paginationHtml += '<span class="swiper-pagination-customs" >'+ ?`<img src="https://xxx.com.cn/${imgMess[i]}">` +'</span>'; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return paginationHtml; ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //點(diǎn)擊分頁器跳轉(zhuǎn)到對(duì)應(yīng)頁面 ? ? ? ? ? ? ? ? ? ? $(".swiper-pagination").on("click","span",function(){ ? ? ? ? ? ? ? ? ? ? ? ? var index = $(this).index(); ? ? ? ? ? ? ? ? ? ? ? ? mySwiper.slideTo(index); ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? }) ? ? ? ? }) ? ? }) }
記錄下jquery的使用方法 ,方便后續(xù)的查看
之后運(yùn)用到vue時(shí)再繼續(xù)寫
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript客戶端遍歷控件與獲取父容器對(duì)象示例代碼
本篇文章主要是對(duì)javascript客戶端遍歷控件與獲取父容器對(duì)象示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
這篇文章主要介紹了微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03js中獲取鍵盤事件的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s中獲取鍵盤事件的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JS根據(jù)生日月份和日期計(jì)算星座的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了JS根據(jù)生日月份和日期計(jì)算星座的簡(jiǎn)單實(shí)現(xiàn)方法,涉及javascript日期時(shí)間與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-11-11