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.

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.

• javascript
• jquery
• html
• slider
• swiper.js

3 Answers 3

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./bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
  </body>
</html>

For more configurations visit Swiper Parameters

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.

 <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>

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./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.