adding multiple Swiper.js carousel in one html page

Sorry, I thought I had tested that piece, apparently not. The easiest way to do that would be to duplicate and modify the classes referenced in your initialization.

    var mySwiper = new Swiper ('.s1', {
      loop: true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      scrollbar: '.swiper-scrollbar'
    });

So in this case, I took the .swiper-pagination, .swiper-button-next, .swiper-button-prev, and .swiper-scrollbar classes from the original swiper.css file and duplicated them into my custom styles as .swiper-pagination2, .swiper-button-next2, .swiper-button-prev2, and .swiper-scrollbar2.

I've updated the Codepen with these changes and both swipers are working independently of each other: http://corc.co/19VdT

Alternatively, you could simply reference new classes in your initialization and create custom styles. The corresponding classes would need to be updated in your HTML as well, just like they are in my Codepen example.

Hi Anthony,

I found the answer here: https://github.com/nolimits4web/Swiper/issues/273

And tested it out with Codepen here: http://corc.co/19VdT

Instead of referencing the .swiper-container class, you can add an additional class to your container div and initialize with that instead.

    var mySwiper = new Swiper ('.s1', {
      loop: true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      scrollbar: '.swiper-scrollbar'
    });
    var mySwiper2 = new Swiper ('.s2', {
      loop: true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      scrollbar: '.swiper-scrollbar'
    });

  <div class="swiper-container s1">
    <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>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>

  <div class="swiper-container s2">
    <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>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>

.s1 {
    width: 600px;
    height: 300px;
}

.s2 {
    width: 600px;
    height: 300px;
} 

You could continue to use the .s1 and .s2 classes to style your sliders, and even add additional classes for styling to your wrappers, slides, pagination, etc. This will prevent accidentally styling one slider when you meant to style the other.