swiper 不能new 成功

最新推荐文章于 2025-11-12 18:42:55 发布

原创最新推荐文章于 2025-11-12 18:42:55 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #new-Swiper

插件专栏收录该内容

2 篇文章

订阅专栏

本文探讨了使用Swiper滑动组件时遇到的问题，即当包含Swiper的div设置为display:none时，滑动功能无法正常工作。通过实验发现，调整显示方式为渐显可以解决问题，并分析了可能的原因。

部署运行你感兴趣的模型镜像

前言

今天任务需要用swiper 做滑动，我就很简单的用滑动插件swiper 来做。但是很神奇的，我按照正常的流程写，但是滑动就是没有生效。
我的代码是这样的

<div id="step1">
</div>
<div id="step2" style="display:none;">
    <div class="swiper-container">
         <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
        </div>
    </div>
</div>

类似的我需要在第一个div隐藏掉，第二个div 展示出来然后定义滑动。可是没有成功。

原因

找了很久发现是 div:display:none 的原因。。。

因此我单独做了测试：

<div id="one" style="display:none;">
         <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 40
     });
    $("#one").fadeIn();

这个就不能滑动

   $("#one").fadeIn();
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 40
     });

这样就可以滑动。。

但是我自己的项目代码里面先fadeIn() 也不能正常初始化。可能还有其他的坑。但是我已经知道，如果不用display:none . 就可以避开这个。