react swiper慢速流畅播放

### 配置 React Swiper 实现慢速流畅自动播放

为了实现React中的Swiper组件具有慢速且流畅的自动播放效果，可以调整`autoplay`属性的相关参数。设置`delay`选项来定义轮播间隔时间，较大的数值代表更慢的速度；启用`disableOnInteraction`为`false`使得交互后仍能继续自动播放[^1]。

下面是一个具体的配置实例：

import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';

function App() {
  return (
    <Swiper
      autoplay={{
        delay: 3000, // 设置每张幻灯片展示时间为3秒
        disableOnInteraction: false,
      }}
      loop={true}
      speed={800} // 过渡动画持续时间为800毫秒，增加此值可使切换更加平滑
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

export default App;

通过上述代码片段可以看出，在`Swiper`标签内设置了三个主要属性：`autoplay`, `loop` 和 `speed`。其中`autoplay`对象内的`delay`决定了两张图片之间的停留时间，而`speed`则影响着页面翻转时过渡动画的时间长度，两者共同作用实现了缓慢和平滑的效果[^1]。