Question

我在页面上使用swiper slider。

现在我要添加另一个。我被复制第一个滑块并改变他的类与js初始化相同的事情。两个滑块都工作，但在第二个滑块看起来像配置参数被忽略...我有1个可见幻灯片不是10，spaceBetween参数没有改变任何我设置1或500没有...

我做错了什么？

HTML：

<div class="swiper-container slider1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            slide 1  
        </div>
        <div class="swiper-slide">
            slide 2  
        </div>
        ...
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<div class="swiper-container slider2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            slide 1  
        </div>
        <div class="swiper-slide">
            slide 2  
        </div>
        ...
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

JS：

var swiper = new Swiper('.slider1', {
    slidesPerView: 3,
    paginationClickable: true,
    lazyLoading: true,
    spaceBetween: 10,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

var newSwiper = new Swiper('.slider2', {
    slidesPerView: 10,
    paginationClickable: true,
    lazyLoading: true,
    spaceBetween: 10,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

编辑：

问题是 - html swiper滑块位于引导类tab-pane中，它是bootstrap tabs所以它被隐藏了，点击选项卡后它就显示出来了。

第二个滑块的原始js：

var newSwiper = new Swiper('.slider2', {
    slidesPerView: 10,
    paginationClickable: true,
    lazyLoading: true,
    spaceBetween: 10,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

和解决方案：

$(".locality-tab").on("click",function(){ 
    setTimeout(function () {
        newSwiper.update();
    }, 400);
});

.locality-tab是按钮whitch切换内容的类。

Answer 1

您的代码工作正常，请查看下面的代码段。

如果您有1张可见幻灯片，那么 spaceBetween 配置没有任何意义。

如果您想使用 spaceBetween 配置，则需要将 slidesPerView 值设置为至少2。

spaceBetween ：px中幻灯片之间的距离。

slidesPerView ：每个视图的幻灯片数量（幻灯片容器上的幻灯片同时可见）。

var swiper = new Swiper('.slider1', {
    slidesPerView: 2,
    spaceBetween: 20, //it is only effective when slidesPerView >=2
    paginationClickable: true,
    lazyLoading: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

var newSwiper = new Swiper('.slider2', {
    slidesPerView: 3,
    paginationClickable: true,
    spaceBetween: 5,
    lazyLoading: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <style>
      .swiper-slide{
        color:white;
        padding:10px;
      }

    </style>
  </head>
  <body>
    <div class="swiper-container slider1 row">
        <div class="swiper-wrapper col-md-12">
            <div class="swiper-slide col-md-4 text-center" style="background-color:blue;">
                slide 1  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:black;">
                slide 2  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:yellow;">
                slide 3  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:red;">
                slide 4  
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <br>
    <br>
    <div class="swiper-container slider2 row">
        <div class="swiper-wrapper col-md-12">
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:red;">
                slide 1  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:yellow;">
                slide 2  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:blue;">
                slide 3  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:green;">
                slide 4  
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
  </body>
</html>

有关更多配置，请访问Swiper Parameters

Answer 2

您不需要对 JS 文件做任何事情。您所需要的只是向分页添加一个额外的类，也向幻灯片添加一个额外的类，并在其他所有类中区分其余类（请参见下面的代码）。有了这个，您可以在同一页面中拥有任意数量的幻灯片。

 <div class="swiper-container swiper1">
        <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 swiper-pagination1"></div>
    </div>

    <!-- Swiper -->
    <div class="swiper-container swiper2">
        <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 swiper-pagination2"></div>

 <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
});
var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
});
<script>

Answer 3

可以说，导航页面上的多个刷卡器也存在问题。（每个都有自己的额外类，例如示例https://github.com/nolimits4web/swiper/blob/master/demos/320-multiple-swipers.html（但该演示仅具有分页功能，没有导航箭头。）

因此，我分别添加了.swiper-one和.swiper-two两个，每个swiper-container都可以，并且仅在分页处于活动状态时有效，但是如果同时添加Navigation Navigation，则第二个swiper不会滑动。

这是一支笔https://codepen.io/stewest/pen/GRpdROQ

var swiper = new Swiper('.swiper-container.swiper-one', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

var swiperTwo = new Swiper('.swiper-container.swiper-two', {
  loop: true,
  navigation: {
    nextEl: '.modal-swiper-button-next',
    prevEl: '.modal-swiper-button-next',
  },
});

（我也向Nav添加了不同的类。单击箭头时，您可以看到DOM中发生了某些事情，但是显示没有视觉变化。）

因此，现在导航正常工作。我必须将.swiper-container也添加到每个新的Swiper中。

一页上有两个滑动滑块

编辑：

3 个答案: