这种循环行为在 Swiper 中可能吗？

Question

假设我们有以下 swiper 幻灯片：

幻灯片数量：7
每组幻灯片：3
单击按钮以跨页面移动：

默认情况下，滑块将显示第一组 (1, 2, 3)

[1 2 3] 4 5 6 7

如果点击右箭头按钮，将转到第2页：

1 2 3 [4 5 6] 7

下一个只会显示一个

1 2 3 4 5 6 [7 _ _]

下次我们按向右箭头按钮时将循环到第一页

[1 2 3] 4 5 6 7

而不是这种行为，我想要以下行为：

最后一页应显示以下无空格的元素：

1 2 3 4 [5 6 7]

然后保持下一个又是第一页

如果从最后一页循环返回（单击向左箭头按钮），行为应该是这样的：

1 2 3 4 [5 6 7] > 1 [2 3 4] 5 6 7 > [1 2 3] 4 5 6 7

这可能吗？怎么样？

Answer 1

所以基本上，默认情况下这种行为是不可能的，所以我（我的团队）添加了一些自定义逻辑来实现它：

我将post只是一些代码，省略细节。另请注意，我将它与 React 和 TypeScript

一起使用

progressMode 需要 'freescroll'

public slideTimes = (times: number, direction: 'right' | 'left') => {
  const swiper = this.swiperRef.current && this.swiperRef.current.swiper;
  if (!swiper) return null;
  swiper.loopFix();
  swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
  return direction === 'right'
    ? swiper.slideTo(swiper.activeIndex + times)
    : swiper.slideTo(swiper.activeIndex - times);
};

protected slideNext = () => {
  if (!this.slideShowRef.current) {
    return;
  }
  const { currentPage } = this.state;
  const { services } = this.props;

  let nextPage = currentPage + 1;
  if (nextPage > Math.ceil(services.length / SLIDES_PER_PAGE)) {
    nextPage = 1;
  }
  this.setState({ currentPage: nextPage, swipping: true }, () => {
    const remainingServicesLastPage = services.length % SLIDES_PER_PAGE;
    if (
      remainingServicesLastPage !== 0 &&
      nextPage === Math.ceil(services.length / SLIDES_PER_PAGE)
    ) {
      return this.slideShowRef.current.slideTimes(remainingServicesLastPage, 'right');
    }
    return this.slideShowRef.current.slideTimes(SLIDES_PER_PAGE, 'right');
  });
};

protected slidePrev = () => {
  if (!this.slideShowRef.current) {
    return;
  }
  const { currentPage } = this.state;
  const { services } = this.props;

  let prevPage = currentPage - 1;
  if (prevPage < 1) {
    prevPage = Math.ceil(services.length / SLIDES_PER_PAGE);
  }
  this.setState({ currentPage: prevPage, swipping: true }, () => {
    const remainingServicesLastPage = services.length % SLIDES_PER_PAGE;
    if (
      remainingServicesLastPage !== 0 &&
      prevPage === Math.ceil(services.length / SLIDES_PER_PAGE) - 1
    ) {
      return this.slideShowRef.current.slideTimes(remainingServicesLastPage, 'left');
    }
    return this.slideShowRef.current.slideTimes(SLIDES_PER_PAGE, 'left');
  });
};

这种循环行为在 Swiper 中可能吗？

Is this loop behavior possible in Swiper?

javascript

swiper