swiper遇到的坑

最新推荐文章于 2025-05-13 16:02:53 发布

秋英之空

最新推荐文章于 2025-05-13 16:02:53 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_38152997/article/details/99697600

本文介绍了在使用Swiper插件过程中遇到的一些问题，包括页面中引用多个Swiper导致的混乱，滑动不流畅和无限滑动失败的问题，以及动态生成和Vue.js环境下Swiper的使用注意事项。提供了解决这些问题的具体方法，如设置observer和observeParents属性，以及在Vue中利用Vue.nextTick初始化Swiper。

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

1.一个页面引用多个swiper插件，出现混乱问题；
解决方法：
1.实例化swiper时加上其父元素加以区分
2.Swiper加上ID或Class区分，要保留默认的类名swiper-container

如下：

<script>
            var swiper = new Swiper('.course_banner2 .swiper-container', {
                pagination: '.course_banner2 .swiper-pagination',
                paginationClickable: true,
                loop: true,
                autoplay: 2500
            });
            </script>

swiper隐藏之后，再显示，滑动不流畅，且无限滑动会失败；

解决方法：添加一下两个属性

observer: true,//修改swiper自己或子元素时，自动初始化swiper
　　　　observeParents: true,//修改swiper的父元素时，自动初始化swiper

3.动态生成的swiper，如append()，或html()添加的，无限滑动效果失败；

解决方法：

a. 添加上面两个属性

b.把swiper方法写在动态生成的方法里面

如下所示：

function bigPic(comment_id) {
        $('.win_pic').show();
        $.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){
            if(data.status == 1){
                $("#con