一页上有两个滑动滑块答案

【问题标题】：Two swiper sliders on one page一页上有两个滑动滑块
【发布时间】：2017-09-06 09:52:25
【问题描述】：

我在我的页面上使用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 是按钮切换内容的类。

【问题讨论】：

标签： javascript jquery html slider swiper

【解决方案1】：

您的代码运行良好，请检查以下 sn-p。

如果您有 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

【讨论】：

这是有线的...在我的页面中，第二个刷卡器不起作用...我无法弄清楚发生了什么...在 js 控制台中没有错误，样式看起来像每种样式从 swiper css 或 bootstrap 应用...
好的，找到了！我被写了。抱歉，您不知道这个问题...
您的问题不清楚，您面临的具体问题是什么，我刚刚发布了可能的解决方案。

【解决方案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>

【讨论】：

【解决方案3】：

只是说，我也遇到了导航页面上多个 Swiper 的问题。（每个都有自己的额外类，例如 https://github.com/nolimits4web/swiper/blob/master/demos/320-multiple-swipers.html （但演示只有分页，没有导航箭头。）

所以我添加了 .swiper-one 和 .swiper-two 两个每个 swiper-container，它只适用于分页活动，但如果你同时添加 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。

【讨论】：

刚刚想通了。当你创建一个新的 swiper 时，必须将 .swiper-container 类与新类一起使用，所以在你的情况下，我不得不 var swiper = new Swiper('.swiper-container.swiper-one', {. (更新我的回答）