Как убрать прокрутку у слайдера, но оставить логику смены с другим слайдом?
Как убрать прокрутку у слайдера, но оставить логику смены с другим слайдом и оставить сам скроллбар видимым?
То есть, чтобы прокручивать можно было только саму страницу а не слайдер. Код:
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,
},
}
});