滚动时锁定滑块(Swiper.js)

Question

我对机车卷轴和刷卡有问题。我想在滚动时在滑块上停止，然后滚动整个滑块并继续滚动页面。我如何使用JQuery或香草js来做到这一点。

我想知道如何在滚动时锁定滑块。(机车卷轴和转轴)

`

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

`

Answer 1

若要在滚动时锁定滑块，可以将allowSlideNext和allowSlidePrev选项添加到Swiper实例中，并将它们最初设置为false。然后，您可以侦听window对象上的window事件，并检查用户是否滚动过滑块。如果有，您可以将allowSlideNext和allowSlidePrev选项设置为true，以允许用户滚动滑块。