Two swiper sliders on one page

问题

I am using swiper slider on my page.

Now i want add another one. I was copied first slider and change his class the same thing i do with js initialization. Both sliders work but in second slider looks like configuration parameters are ignored... I have 1 visible slide not 10, spaceBetween parameter not changing anything i set 1 or 500 nothing...

What i doing wrong?

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'
});

EDIT:

So problem was - html swiper slider was in bootstrap class tab-pane it is bootstrap tabs so it was hidden and after click on tab it was show up.

So original js for second slider:

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

and solution:

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

.locality-tab is class on button whitch switches contents.

回答1:

Your code is working fine check below snippet.

In case you have 1 visible slide, in that case spaceBetween configuration has no meaning.

You need to set slidesPerView value to atleast 2, if you want to make use spaceBetween configuration.

spaceBetween: Distance between slides in px.

slidesPerView: Number of slides per view (slides visible at the same time on slider's container).

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>

For more configurations visit Swiper Parameters

回答2:

Just to say, I also had the issue with multiple Swipers on the page with Navigation. (each having their own extra class, like example https://github.com/nolimits4web/swiper/blob/master/demos/320-multiple-swipers.html (but the demo only has pagination, no navigation arrows.)

So I added .swiper-one and .swiper-two two each swiper-container and it works with just the Pagination active, but if you add Navigation two both, the 2nd swiper doesn't slide.

Here's a pen 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',
  },
});

(I added different classes to Nav too. When you click the arrows, you can see something happening in the DOM, but no visual change of display.)

So, now the Navigation works. I had to add the .swiper-container as well to each new Swiper.

来源：https://stackoverflow.com/questions/46072100/two-swiper-sliders-on-one-page

标签

javascript

jquery

html

slider

swiper