@Anonimmus

Как отключить скролл последнего swiper элемента?

Доброго времени суток.
613122e253070423769152.png
Товарищи подскажите как отключить скролл мышью только для последнего слайда???
То есть в перспективе это будет оффер и пока юзер скролит вниз он не покидает слайдер, однако последний слайд обязан пустить пользователя просматривать контент дальше уже за пределами слайдера.

var swiper = new Swiper(".swiper-3-small", {
	spaceBetween: 10,
	slidesPerView: 4,
	freeMode: true,
	direction: "vertical",
	watchSlidesProgress: true,
	loop: true,
	updateOnWindowResize: true,
	observer: true,
	observeParents: true,
});
var swiper2 = new Swiper(".swiper-3-big", {
	spaceBetween: 10,
	loop: false,
	direction: "vertical",

	mousewheel: {
		invert: false,
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev",
	},
	thumbs: {
		swiper: swiper,
	},
	autoplay: {
		delay: 23700,
		disableOnInteraction: false,
		loop: true,
	},
});


<div class=" swiper3">
			<!-- Swiper -->
			<div thumbsSlider="" class="swiper gallery-small swiper-3-small">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
					</div>
				</div>
			</div>
			<div class=" swiper gallery-big  horizontal swiper-3-big">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
					</div>
					<div class="swiper-slide">
						<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
					</div>
					<div class="swiper-slide no-swipe">
						<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
			<!-- end Swiper -->
		</div>


сижу и думаю как на активном последнем слайде
Последний отключить функцию
mousewheel
  • Вопрос задан
  • 1101 просмотр
Решения вопроса 1
@Anonimmus Автор вопроса
Гыы, сам спросил сам ответил немого позже))

решение:
mousewheel: {
invert: false,
eventsTarget: ".swiper-slide:not(.no-swipe)",
},
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы