这篇文章主要介绍“怎么使用swiper自定义分页点击跳转指定页面”，在日常操作中，相信很多人在怎么使用swiper自定义分页点击跳转指定页面问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用swiper自定义分页点击跳转指定页面”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
swiper自定义分页点击跳转指定页面
mySwiper.slideTo(index, speed, runCallbacks)，控制Swiper切换到指定slide。
| 参数名 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| index | num | 必选 | 指定将要切换到的slide的索引 |
| speed | num | 可选 | 切换速度(单位ms) |
| runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
代码如下：
<!--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,//可选选项，自动滑动 loop: true, // 循环模式选项，true 循环播放 observer: true,//实时检测，动态更新 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },//前进后退箭头 pagination: {//自定义分页 el: '.swiper-pagination', type: 'custom', autoplayDisableOnInteraction: false, renderCustom: function (swiper, current, total) { var paginationHtml = " "; for (var i = 0; i < total; i++) { // 判断是不是激活焦点，是的话添加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)//切换到对应的slide，速度为1秒 });</script><!--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;}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++) { // 判断是不是激活焦点，是的话添加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; }, }}); //点击分页器跳转到对应页面$(".swiper-pagination").on("click","span",function(){ var index = $(this).index(); mySwiper.slideTo(index);})css部分
.swiper-pagination-custom { height: 34px; text-align: end !important; //这里设置分页器的位置 放在行的末尾}.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;}.swiper-pagination-customs-active { border: 2px solid #fcb916; width: 36px; height: 36px;}解决动态加载数据滑动失效的问题
在swiper初始化加两行代码
var mySwiper = new Swiper('.swiper-container', { observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true//修改swiper的父元素时，自动初始化swiper });在数据请求后初始化swiper
function getMess(){ globalParams = { //发送请求的参数 } api.post2("xxx/xxx/xxx", globalParams, function(res) { //ajax请求 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);//动态加载轮播项 //初始化轮播组件 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++) { // 判断是不是激活焦点，是的话添加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; }, } }); //点击分页器跳转到对应页面 $(".swiper-pagination").on("click","span",function(){ var index = $(this).index(); mySwiper.slideTo(index); }) }) }) })}到此，关于“怎么使用swiper自定义分页点击跳转指定页面”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
