Swiper中文论坛
标题:
点击自定义分页器影响了data-swiper-autoplay属性 ,怎么解决
[打印本页]
作者:
opali
时间:
2017-11-25 16:29
标题:
点击自定义分页器影响了data-swiper-autoplay属性 ,怎么解决
直接上代码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, 下载次数: 120)
下载附件
保存到相册
2017-11-25 16:28 上传
欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)
Powered by Discuz! X3.2