|
直接上代码mySwiper = new Swiper('.swiper-container', {
speed: 700,
onlyExternal: true,//禁止触摸滑动
autoplay: 3000,//可选选项,自动滑动
pagination: '.swiper-pagination', //分页器
paginationType: 'custom', //分页器样式
// paginationType: 'bullets',
//autoplayDisableOnInteraction: false,//触摸后会不会禁止
paginationClickable: true, //点击分页器
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
loop: true,//循环
这是自定义的分页器
paginationCustomRender: function (swiper, current, total) {
var _html = '';
for (var i = 1; i <= total; i++) {
if (current == i) {
_html += '<li class="swiper-pagination-custom styleActive active">' + i + '</li>';
} else {
_html += '<li class="swiper-pagination-custom styleActive">' + i + '</li>';
}
}
return _html;//返回所有的页码html
}
})$('.swiper-pagination').on('click', 'li', function () {
var index = this.innerHTML;
mySwiper.slideTo(index, 500, false);//切换到第一个slide,速度为1秒
});
对第二个swiper-slide 设置了data-swiper-autoplay 属性,点击了分页器之后data-swiper-autoplay对应的盒子位置就变了
求解
|
-
1.jpg
(1.88 KB, 下载次数: 129)
|