2 different slides from different sections, gets merged after adding swiper.js to both of them

Question

So I have 2 sections in which I want to add swiper.js to there content, when I add swiper.js to one of them it works correctly, but when the library is added to both of them they get merged to each other!

The HTML:

<!--First section, second section gets merged to it-->
 <section class="quotesvideo">
      <div class="swiper swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <iframe
              width="280"
              height="157.5"
              src="https://www.youtube.com/embed/X_DQP0Z_bZ0?si=ImwOAMTEguIy6G85"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen
            ></iframe>
            <h4>للجيل الصاعد</h4>
          </div>
          <div class="swiper-slide">
            <iframe
              width="280"
              height="157.5"
              src="https://www.youtube.com/embed/X_DQP0Z_bZ0?si=ImwOAMTEguIy6G85"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen
            ></iframe>
            <h4>للجيل الصاعد</h4>
          </div>
        </div>
      </div>
    </section>

<!--Second section, youtube api is used in it for like 20 videos -->
    <section class="latest-videos">
      <div class="swiper swiper2">
        <h2 class="main-title">الفيديوهات</h2>
        <div class="swiper-wrapper">
<!-- The swiper-slide is created using the dom, but i included it here to make it easier-->          
<div class="swiper-slide">
            <a
              href="https://www.youtube.com/watch?v=${video.videoId}"
              target="_blank"
            >
              <img src="${video.thumbnailUrl}" alt="${video.title}" width="320"
              height:"180" loading='lazy'/>
            </a>
            <h4 class="title">${video.title}</h4>
          </div>
        </div>
      </div>
    </section>

JS:

//First section slider:
document.addEventListener("DOMContentLoaded", () => {
  new Swiper(".swiper1", {
    slidesPerView: 1,
    draggable: true,
  });
});

//Second section slider:
initSwiper = () => {
  const swiper = new Swiper(".swiper2", {
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: true,
    centeredSlide: true,
    draggable: true,
    lazyPreloadPrevNext: 3,
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      500: {
        slidesPerView: 2,
      },
      700: {
        slidesPerView: 3,
      },
      1200: {
        slidesPerView: 4,
      },
    },
  });
};

Tried:

Changing the styling
Changing the classes

Any suggested edits to this question to make it better and more clear would be appreciated

Leave a Comment Cancel reply