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

Their support sent me this DEMO. It works!

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>

I had a case where I needed 3 identical sliders on the same page and I didn't want to duplicate any code, nor did I want to hardcode anything. This is how I solved it 👇

// Function that actually builds the swiper 
const buildSwiperSlider = sliderElm => {
    const sliderIdentifier = sliderElm.dataset.id;
    return new Swiper(`#${sliderElm.id}`, {
        navigation: {
            nextEl: `.swiper-button-next-${sliderIdentifier}`,
            prevEl: `.swiper-button-prev-${sliderIdentifier}`
        },
        pagination: {
            el: `.swiper-pagination-${sliderIdentifier}`,
            type: 'progressbar',
        },
    });
}

// Get all of the swipers on the page
const allSliders = document.querySelectorAll('.swiper');

// Loop over all of the fetched sliders and apply Swiper on each one.
allSliders.forEach(slider => buildSwiperSlider(slider));

As you can see from the above code the key here is assigning an identifier to each of the sliders. In my case, I opted to use a data-id property and reference that. Like this 👇

<div class="swiper" data-id="ID_OF_FIRST_SLIDER">
...
</div>
<div class="swiper" data-id="ID_OF_SECOND_SLIDER">
...
</div>
<div class="swiper" data-id="ID_OF_THIRD_SLIDER">
...
</div>

And pagination/navigation element just incorporate the identifier as part of their class name.

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

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:

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

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

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>

2) In the swiper options object, refer to the new ids instead of swiper-button-prev and swiper-button-next classes:

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