How to have multiple Swiper JS sliders on same page?

Question

I'm having trouble adding two different sliders on the same page.

When I add .swiper2 to another div of another slider,a scroll bar appears(the slider works but you can drag and move everything across the width) .The first slider does everything right. To note everything is on the same page (on the home page). If you need someone further explained I can send you screenshots what it looks like.

See my html and js code:

<div class="section__thumb__tile swiper">
            
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide">
                ----CONTENT----
              </div>

              <div class="swiper-slide">
                ----CONTENT----
              </div>

              <div class="swiper-slide">
                ----CONTENT----
              </div>
            </div>
          </div>


<div class="wrapper swiper2">
        <div class="section__fifth-cards swiper-wrapper">
          <div class="section__fifth-card swiper-slide">            
           -----Content----
          </div>
          <div class="section__fifth-card swiper-slide">            
           -----Content----
          </div>
            <div class="section__fifth-card swiper-slide">            
            -----Content----
            </div>
          </div>
        </div>
      </div>



----------------JS-----------------
const swiper = new Swiper(".swiper", {
  // Optional parameters
  loop: true,
  spaceBetween: 50,
  slidesPerView: 2,
  freeMode: true,
  speed: 500,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-right",
    prevEl: ".swiper-left",
  },

  breakpoints: {
    // iznad 640px
    640: {
      slidesPerView: 2.2,
      centeredSlides: true,

      slidesPerGroup: 1,
      freeMode: false,
    },
  },
});

var swiper2 = new Swiper(".swiper2", {
  /* Options */
  loop: true,
  spaceBetween: 10,
  slidesPerView: 3,
  freeMode: true,
  speed: 500,
  centeredSlides: true,
  scrollContainer: false,
  wrapper: ".swiper-wrapper1",

  // breakpoints: {
  //   // iznad 640px
  //   640: {
  //     slidesPerView: 3,
  //     centeredSlides: true,

  //     slidesPerGroup: 1,
  //     freeMode: false,
  //   },
  // },
});```

Answer 1

You need to put swiper-container or just swiper in parent div

swiper only from version 6

below this version has to be swiper-container

const swiper = new Swiper(".swiper1", {
  // Optional parameters
  loop: true,
  spaceBetween: 50,
  slidesPerView: 2,
  freeMode: true,
  speed: 500,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-right",
    prevEl: ".swiper-left",
  },

  breakpoints: {
    640: {
      slidesPerView: 2.2,
      centeredSlides: true,

      slidesPerGroup: 1,
      freeMode: false,
    },
  },
});

var swiper2 = new Swiper(".swiper2", {
  loop: true,
  spaceBetween: 10,
  slidesPerView: 3,
  freeMode: true,
  speed: 500,
  centeredSlides: true,
  scrollContainer: false,
  wrapper: ".swiper-wrapper1",
});

<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>


<div class="section__thumb__tile swiper swiper1">    
  <div class="swiper-wrapper">
      <div class="swiper-slide">
        ----CONTENT----
      </div>
      <div class="swiper-slide">
        ----CONTENT----
      </div>
      <div class="swiper-slide">
        ----CONTENT----
      </div>
  </div>
</div>


<div class="wrapper swiper swiper2">
  <div class="section__fifth-cards swiper-wrapper">
     <div class="section__fifth-card swiper-slide">            
        -----Content----
     </div>
     <div class="section__fifth-card swiper-slide">            
       -----Content----
     </div>
     <div class="section__fifth-card swiper-slide">            
       -----Content----
     </div>
  </div>
</div>