swiper插件一些自定义用法

最新推荐文章于 2024-07-24 11:19:36 发布

Ricoshallow

最新推荐文章于 2024-07-24 11:19:36 发布

阅读量703

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_36734002/article/details/116532791

版权

本文介绍了如何使用Swiper.js库实现触摸后恢复自动轮播的功能，通过设置autoplay的disableOnInteraction属性为false，可以确保用户交互后轮播继续进行。同时，展示了如何自定义分页器的样式，例如修改分页器子弹的尺寸和颜色，以增强视觉效果。

摘要由CSDN通过智能技术生成

1.swiper触摸过后恢复自动轮播

<script> 
var mySwiper = new Swiper('.swiper-container',{
  autoplay: {
    disableOnInteraction: false,
    delay:2000,
  },
})
</script>

设置autoplay：当用户操作swiper之后（包括触碰，拖动，点击pagination等），自动切换会

被禁止。将autoplay中的disableOnInteraction属性设置为false，用户操作swiper之后自动切换

就不会停止，每次都会重新启动 autoplay。

2.自定义分页器样式
设置.swiper-pagination-bullet：

.swiper-pagination-bullet{
    width: 5px;
    height: 5px;
    background-color: #e43130;
    margin: 0 2px;
}

关注