Two Sliders (set of horizontal/vertical) on Single Page Not Working Properly

[gretaliap]

My blog page contains sets of sliders, horizontal and vertical, and I've noticed that the buttons for both sliders only scroll to a specific <script> that has a vertical setup. Although the horizontal slider has its own class, the vertical slider code had somehow submerged/added itself to the horizontal class. How can I make each slider work in the given direction that they're set to?

Horizontal:

      var swiper = new Swiper(".shoppable-edits", {
mode: 'horizontal',
direction: 'horizontal',
normalizeSlideIndex: true,
autoHeight: true,
        slidesPerView: 1,
        spaceBetween: 0,
        slidesPerGroup: 1,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination .swiper-nav-edits",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

Vertical:

      var swiper = new Swiper(".shoppable-catalog", {
direction: 'vertical',
        slidesPerView: 2,
        spaceBetween: 0,
        slidesPerGroup: 1,
        loop: true,
        loopFillGroupWithBlank: false,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

After page has been loaded:
Horizontal:
class="swiper-container mySwiper shoppable-catalog shoppable-edits swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events swiper-container-autoheight swiper-container-vertical"

Vertical:
class="swiper-container mySwiper shoppable-catalog selector-home active swiper-container-initialized swiper-container-vertical swiper-container-pointer-events"