Swiper踩坑，重复加载

最新推荐文章于 2024-07-28 20:02:49 发布

Perfect珈蓝

最新推荐文章于 2024-07-28 20:02:49 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/yangziqi098/article/details/91488569

本文介绍了一个使用Swiper库实现的轮播组件配置示例。主要讲解了如何设置Swiper参数，包括分页器样式、每屏显示数量、滑动间距、长滑动比例等，以及如何开启自动初始化和父元素观察。这是一个实用的前端开发教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function mainSwiperByIndex() {
    var mySwiper = new Swiper('.main-sect .swiper-container', {
        pagination: {
            el: '.swiper-pagination .swiper-container',
            clickable: true,
        },
        slidesPerView: 2.4,
        spaceBetween: 30,
        paginationClickable: true,
        longSwipesRatio: 0.3,
        touchRatio: 1,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        loop: false //这属,很有用啊
    })
}