0

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",
        },
      });
    });

`

0 Answers0