clickable
此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
clickable信息
- 类型:
- boolean
- 默认:
- false
- 举例:
- true
- 启用版本:
- 4.0.0
效果演示
点击那三个小点。
使用方法示例
从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript">
var mySwiper = new Swiper('.swiper',{
pagination :{
el: '.swiper-pagination',
clickable :true,
}
})
//鼠标滑过pagination控制swiper切换
for(i=0;i<mySwiper.pagination.bullets.length;i++){
mySwiper.pagination.bullets[i].onmouseover=function(){
this.click();
};
}
//如果你在swiper初始化后才决定使用clickable,可以这样设置
mySwiper.params.pagination.clickable = true ;
//此外还需要重新初始化pagination
mySwiper.pagination.destroy()
mySwiper.pagination.init()
mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
</script>
转载原创文章请注明:文章转载自:Swiper中文网 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/pagination/69.html