Multiple Swipers Navigation not working as expected

Design help Custom code
1

Hey folks,

I’m trying to get multiple swiper sliders to work with their own navigation arrows on my site and having little luck.

<script>

var swiper2 = new Swiper(".swiper2", {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
    stretch: 100,
  },
  direction: "horizontal",
  watchSlidesProgress: true,
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 0,
  centeredSlides: true,
  autoplay: {
   delay: 2000,
 },
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 3
    }
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
    scrollbar: {
    hide: true,
  },
});

var swiper3 = new Swiper(".swiper3", {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
    stretch: 100,
  },
  direction: "horizontal",
  watchSlidesProgress: true,
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 0,
  centeredSlides: true,
  autoplay: {
   delay: 2000,
 },
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 3
    }
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
    scrollbar: {
    hide: true,
  },
});

var swiper4 = new Swiper(".swiper4", {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
    stretch: 100,
  },
  direction: "horizontal",
  watchSlidesProgress: true,
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 0,
  centeredSlides: true,
  autoplay: {
   delay: 2000,
 },
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 3
    }
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
    scrollbar: {
    hide: true,
  },
});
</script>

The above is the code I’m using, but no matter what, even when I attach the different class name for each swiper to their own, all arrows on each slider only affect the first one.

Anyone have any solution to this? I’m stumped after even exploring examples that work online that I’ve duplicated to no avail. Thanks so much!

SIDE NOTE: I’ve hidden the arrows for the time being

A couple other notes:

  • I am using a CMS to populate the sliders
  • Each slider is pulling from the same CMS, just filtered by specific items within it

Here is my site Read-Only: (Webflow - Iron Galaxy Studios)

Here is my site published: (Iron Galaxy Studios - Games)