Как убрать прокрутку у слайдера, но оставить логику смены с другим слайдом?

Как убрать прокрутку у слайдера, но оставить логику смены с другим слайдом и оставить сам скроллбар видимым?

То есть, чтобы прокручивать можно было только саму страницу а не слайдер. Код:

let card_gallery = new Swiper(".swiper-card", {
      direction: 'vertical',
      slidesPerView: 5,
      spaceBetween: 13,
      mousewheel: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
      scrollbar: {
        el: ".swiper-scrollbar",
      },
      navigation: {
        nextEl: ".card__gallery .swiper-button-next",
        prevEl: ".card__gallery .swiper-button-prev",
      },
      breakpoints: {
        320: {
          direction: 'horizontal',
          spaceBetween: 30,
          slidesPerView: 4,
        },
        1023: {
          direction: 'vertical',
          spaceBetween: 13,
          slidesPerView: 5,
        },
      }
    });

    let single_gallery = new Swiper(".swiper-single", {
      //slidesPerView: 1,
      mousewheel: true,
      navigation: {
        nextEl: ".swiper-card .swiper-button-next",
        prevEl: ".swiper-card .swiper-button-prev",
      },
      thumbs: {
        swiper: card_gallery,
      },
      breakpoints: {
        320: {
          slidesPerView: 'auto',
        },
        1023: {
          slidesPerView: '1',
        },
      }
    });
.swiper-slide{
  padding-bottom: 40px;
}

.swiper-card {
    height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.3.1/swiper-bundle.css" rel="stylesheet"/>

<div class="swiper swiper-card">
  <div class="swiper-scrollbar"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      1
    </div>
    <div class="swiper-slide">
      2
    </div>
    <div class="swiper-slide">
      3
    </div>
    <div class="swiper-slide">
      4
    </div>
    <div class="swiper-slide">
      5
    </div>
    <div class="swiper-slide">
      6
    </div>
  </div>
  <!--end swiper-wrapper-->
   <button class="swiper-button-next"></button>
                            <button class="swiper-button-prev"></button>
</div>



<div class="card__single">
  <div class="swiper swiper-single">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        1
      </div>
      <div class="swiper-slide">
        2
      </div>
      <div class="swiper-slide">
        3
      </div>
      <div class="swiper-slide">
        4
      </div>
      <div class="swiper-slide">
        5
      </div>
      <div class="swiper-slide">
        6
      </div>
    </div>
    <!--end swiper-wrapper-->
  </div>
</div>
<!--end card__single-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.3.1/swiper-bundle.min.js"></script>


Ответы (1 шт):

Автор решения: Gelloiss

Это описано в документации) https://swiperjs.com/swiper-api#mousewheel-control

mousewheel: false

let card_gallery = new Swiper(".swiper-card", {
  direction: 'vertical',
  slidesPerView: 5,
  spaceBetween: 13,
  mousewheel: false,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
  scrollbar: {
    el: ".swiper-scrollbar",
  },
  navigation: {
    nextEl: ".card__gallery .swiper-button-next",
    prevEl: ".card__gallery .swiper-button-prev",
  },
  breakpoints: {
    320: {
      direction: 'horizontal',
      spaceBetween: 30,
      slidesPerView: 4,
    },
    1023: {
      direction: 'vertical',
      spaceBetween: 13,
      slidesPerView: 5,
    },
  }
});
→ Ссылка