滑动点击事件在循环返回第一张幻灯片时失败

Question

循环返回第一张幻灯片时，Swiper 单击事件不起作用。在以下场景中，点击处理程序无法触发：

• 当单击上一张幻灯片中的

  >

  箭头时

  < 4/4 >

• 当单击第一张幻灯片中的

  <

  箭头时

  < 1/4 >

这是 StackBlitz 上的现场演示。

---

以下是代码片段供您参考：

  mounted(): void {
    new Swiper(this.$refs.swiper, {
      modules: [Navigation, Pagination, Autoplay],

      // SwiperOptions
      loop: true,
      loopFillGroupWithBlank: true,
      autoplay: {
        delay: 4 * SECOND,
        disableOnInteraction: false,
      },
      speed: SECOND / 2,
      observer: true,
      observeParents: true,
      parallax: true,
      preventClicks: false,
      preventClicksPropagation: false,
      centeredSlides: true,
      slideToClickedSlide: true,

      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

      on: {
        slideChange: (swiper) => {
          this.activeIndex = swiper.realIndex
        },
        touchEnd: (swiper) => {
          this.activeIndex = swiper.realIndex
        },
      },
    })
  }

我已经在互联网上彻底搜索了此问题的解决方案，但尚未找到。

我们将非常感谢您的帮助。

Answer 1

slideToClickedSlide：true，启用循环时可能无法按预期工作。 所以，删除slideToClickedSlide: true

添加自定义单击事件处理程序以手动处理单击事件并在单击箭头时滑动到下一张/上一张幻灯片。

Javascript

mounted(): void {
  const swiper = new Swiper(this.$refs.swiper, {
    modules: [Navigation, Pagination, Autoplay],

    // SwiperOptions
    loop: true,
    loopFillGroupWithBlank: true,
    autoplay: {
      delay: 4 * SECOND,
      disableOnInteraction: false,
    },
    speed: SECOND / 2,
    observer: true,
    observeParents: true,
    parallax: true,
    preventClicks: false,
    preventClicksPropagation: false,
    centeredSlides: true,

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },

    on: {
      slideChange: (swiper) => {
        this.activeIndex = swiper.realIndex;
      },
      touchEnd: (swiper) => {
        this.activeIndex = swiper.realIndex;
      },
    },
  });

  // Custom click event handler for navigation arrows
  const nextButton = document.querySelector('.swiper-button-next');
  const prevButton = document.querySelector('.swiper-button-prev');

  if (nextButton && prevButton) {
    nextButton.addEventListener('click', () => {
      swiper.slideNext();
    });

    prevButton.addEventListener('click', () => {
      swiper.slidePrev();
    });
  }
}