I have a problem with locomotive scroll and swiper. I would like to stop on the slider while scrolling and then scroll the entire slider and continue scrolling the page. How can i do that with using JQuery or vanilla js.
I want to know how to lock on slider when scrolling. (locomotive scroll & swiper)
`
var $swiperNumbers = $(".swiper-container-numbers");
$swiperNumbers.each(function (index) {
var $this = $(this);
$this.addClass("swiper-slider-numbers-" + index);
var dragSize = $this.data("drag-size") ? $this.data("drag-size") : 50;
var freeMode = $this.data("free-mode") ? $this.data("free-mode") : false;
var slidesDesktop = $this.data("slides-desktop")
? $this.data("slides-desktop")
: 4;
var slidesTablet = $this.data("slides-tablet")
? $this.data("slides-tablet")
: 3.15;
var slidesMobile = $this.data("slides-mobile")
? $this.data("slides-mobile")
: 1.2;
var spaceBetween = $this.data("space-between")
? $this.data("space-between")
: 0;
var swiperNumbers = new Swiper(".swiper-slider-numbers-" + index, {
direction: "horizontal",
loop: false,
centeredSlides: true,
spaceBetween: spaceBetween,
mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},
breakpoints: {
1920: {
slidesPerView: 3.5,
spaceBetween: 90,
},
1440: {
slidesPerView: 2.5,
spaceBetween: 90,
},
991: {
slidesPerView: 2.5,
spaceBetween: 50,
},
768: {
slidesPerView: 2.1,
spaceBetween: 50,
},
580: {
slidesPerView: 1.5,
spaceBetween: 50,
},
320: {
slidesPerView: 1.5,
spaceBetween: 10,
loop: true,
centeredSlides: false,
},
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
`