React Splide Carousel非循环模式下最后幻灯片无留白实现求助

问题 #

要实现非循环轮播效果：

• 未到最后一组幻灯片时，右侧显示下一张的部分预览
• 到达最后一组时停止轮播，右侧无多余空白或图片露出

目前用padding: {right: '5%'}实现了预览，但最后一页右侧会出现留白；尝试动态移除padding会导致所有图片尺寸变大，产生布局偏移；设置perPage: 5.25则会导致切换时出现异常行为。

解决方案 #

思路：动态控制padding + 滑动事件监听 #

通过监听Splide的move事件，判断当前是否为最后一页，动态调整右侧padding。利用Splide的refresh方法更新布局，避免直接修改样式导致的偏移。

实现代码 #

import { useEffect, useRef } from 'react';
import { Splide, SplideTrack, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/react-splide/css';

const ProductSlider = ({ slides }) => {
  const slideRef = useRef(null);

  useEffect(() => {
    const splideInstance = slideRef.current?.splide;
    if (!splideInstance) return;

    splideInstance.on('move', () => {
      const { page, pages } = splideInstance;
      const isLastPage = page === pages;
      // 更新padding配置
      splideInstance.options = {
        ...splideInstance.options,
        padding: { right: isLastPage ? '0%' : '5%' },
      };
      // 刷新布局，避免偏移
      splideInstance.refresh();
    });

    return () => splideInstance.off('move');
  }, [slides.length]);

  return (
    <Splide
      ref={slideRef}
      className="product-slider"
      hasTrack={false}
      options={{
        type: 'slide',
        perPage: 5,
        pagination: false,
        perMove: 2,
        wheel: true,
        padding: { right: '5%' },
        loop: false, // 必须禁用循环
      }}
    >
      <>
        <div className="splide__arrows">
          <button className="splide__arrow splide__arrow--prev">
            <IconChevron direction="left" />
          </button>
          <button className="splide__arrow splide__arrow--next">
            <IconChevron direction="right" />
          </button>
        </div>
        <SplideTrack>
          {slides.map((slide) => (
            <SplideSlide key={slide.id}>
              <Image />
            </SplideSlide>
          ))}
        </SplideTrack>
      </>
    </Splide>
  );
};

export default ProductSlider;

额外优化建议 #

• 给幻灯片设置固定宽度（比如width: calc(20% - 8px)，对应perPage=5的情况），进一步避免布局偏移
• 如果refresh方法仍有视觉跳动，可以尝试通过添加自定义CSS类来控制padding，而不是直接修改Splide配置：

  .product-slider.no-right-padding .splide__track {
    padding-right: 0 !important;
  }
  

  然后在事件监听中给容器添加/移除这个类

内容的提问来源于stack exchange，提问作者dustin