swiper 图片使用 jquery 的 slideToggle 收起后定时滑动失效

2019-09-26 15:29:18 +08:00
 skyloongltl

使用了 swiper 的定时滑动后,再用 jquery 的 slideToggle 函数将图片收起,收起的时间超过三秒这样。在展开,图片的自动滑动就会失效,这是为什么呢?要怎么解决呢?

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./images/adv0001.jpg" /></div>
            <div class="swiper-slide"><img src="./images/adv0002.jpg"></div>
            <div class="swiper-slide"><img src="./images/adv0003.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <button id="btn">展开</button>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 自动播放时间

            autoplay: {
                delay: 3680,
                disableOnInteraction: false
            },
            observer: true,
            observeParents: true,
            // 播放的速度

            speed: 1000,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        });
        $('#btn').click(function () {
            $('.swiper-container').slideToggle();
        });
    </script>
</body>

2245 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/604438

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX