Javascript 如何在单个页面上显示多个“Swiper”幻灯片

How can I have multiple "Swiper" slideshows on a single page

提问by David Martins

I'm using Swiper Slideshow. I'm using this particular version. Here's the exact codeI'm using.

我正在使用Swiper Slideshow。我正在使用这个特定版本。这是我正在使用的确切代码。

When adding a second "Swiper", the pagination doesn't work properly.

添加第二个“Swiper”时，分页无法正常工作。

I tried giving a different class to the second "swiper" container but it didn't work.

我尝试为第二个“swiper”容器提供不同的类，但没有用。

How can I have two of this in the same page???

我怎么能在同一页上有两个这个？？？

Thanks.

谢谢。

回答by David Martins

Their support sent me this DEMO. It works!

他们的支持给了我这个DEMO。有用！

You don't need to do anything to the JS File. All you need is to add an extra class to pagination, add an extra class also to the slideshow, and differentiate the rest of the classes on everything else (see code below). With this you can have as many slishows as you want in the same page.

您不需要对 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>

回答by SergeTkach

My current Swiper version is 3.4.2. When I click on the next-prev button, all the sliders on the page moves.

我当前的 Swiper 版本是 3.4.2。当我点击 next-prev 按钮时，页面上的所有滑块都会移动。

For set different next-prev buttons I done this:

为了设置不同的下一个上一个按钮，我这样做了：

<div class="swiper-pager">
  <div class="swiper-button-next></div>
  <div class="swiper-button-prev></div>
</div>

=>

=>

<div class="swiper-pager">
  <div class="swiper-button-next swiper-button-next_slideshow<?=$module?>"></div>
  <div class="swiper-button-prev swiper-button-prev_slideshow<?=$module?>"></div>
</div>

And in js:

在 js 中：

$('#slideshow<?=$module?>').swiper({
  mode: 'horizontal',
  slidesPerView: 1,
  pagination: '.slideshow<?=$module?>',
  paginationClickable: true,
  // nextButton: '.swiper-button-next', // not work properly
  // prevButton: '.swiper-button-prev', // not work properly
  nextButton: '.swiper-button-next_slideshow<?=$module?>',
  prevButton: '.swiper-button-prev_slideshow<?=$module?>',
  spaceBetween: 30,
  autoplay: 2500,
  autoplayDisableOnInteraction: true,
  loop: true
});

回答by Illia Chil

@David Martins Thanks a lot, but in current version 4.5.0, you need to modify a little js code:

@David Martins 非常感谢，但是在当前版本 4.5.0 中，您需要修改一些 js 代码：

<script type="text/javascript">
// Init Swiper
var swiper1 = new Swiper('.swiper1', {
  pagination: {
    el: '.swiper-pagination1',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});
var swiper2 = new Swiper('.swiper2', {
  autoHeight: true,
  pagination:  {
    el: '.swiper-pagination2',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});

anyway, thanks a lot for help!

无论如何，非常感谢您的帮助！

回答by ramigs

In case someone is passing here in search for a solution to conflicts with prev and next button between multiple swipers, this is what fixed it for me (Nuxt.js/SSR project):

如果有人经过这里以寻找解决多个 swipers 之间与 prev 和 next 按钮冲突的解决方案，这就是为我解决的问题（Nuxt.js/SSR 项目）：

1) Add id attributes to button's divs: <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div><div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

1) 给按钮的 div 添加 id 属性： <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div><div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

2) In the swiper options object, refer to the new ids instead of swiper-button-prevand swiper-button-nextclasses:

2) 在 swiper 选项对象中，引用新的 ids 而不是swiper-button-prev和swiper-button-nextclasses：

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

回答by Ahmed Matri

var i=1;
var str1='sliderBox_'
var str2='.sliderBox_';
$('.swiper-container').each(function (index,value) {

    var classAdd = str1 + i;
    var classCall = str2 + i;
    var next_slider = 'slider-next' + i;
    var prev_slider = 'slider-prev' + i;
    $(this).addClass(classAdd);
    $(this).parent().siblings(".sites-slider__prev").addClass(prev_slider);
    $(this).parent().siblings(".sites-slider__next").addClass(next_slider);
    new Swiper(classCall,{
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        navigation: {
            nextEl: ('.' + next_slider),
            prevEl: ('.' + prev_slider),
        },
        breakpoints: {
            1199: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 2,
            },
            600: {
                slidesPerView: 1,
            },
        }
    });
    i++;



});

回答by Lyall

You were going down the right path - you need to add a different class to the second swiper but you alsoneed to add references to the new class in dist/js/swiper.min.jsotherwise it will only be targeting elements using the original class. It should just be a case of copying the relevant sections and repeating them with the new ID (same as what I had to do with wow.js).

您走的是正确的道路 - 您需要向第二个 swiper 添加一个不同的类，但您还需要添加对新类的引用，dist/js/swiper.min.js否则它只会使用原始类定位元素。它应该只是复制相关部分并使用新 ID 重复它们的情况（与我对 wow.js 所做的相同）。