React Swiper横向循环焦点轮播

React Swiper是一个流行的JavaScript库，用于创建响应式的触摸滑动组件，特别适合于构建轮播图、幻灯片展示等。如果你想在React应用中实现一个支持横向循环焦点移动的轮播效果，Swiper可以轻松做到。

首先，你需要安装Swiper库及其React集成版本，通常通过npm或yarn来添加依赖：

npm install swiper react-swiper
# 或者
yarn add swiper react-swiper

然后，在React组件中导入Swiper组件，并配置成你需要的效果。例如，设置循环模式(circular)和焦点(focus on slides)：

import { Swiper, SwiperSlide } from 'react-swiper';

function MyCarousel() {
  const params = {
    loop: true, // 设置循环模式
    focusOnSelect: true, // 每次切换时聚焦新的幻灯片
    autoplay: {
      disableOnInteraction: false,
      delay: 3000, // 自动播放时间间隔
    },
  };

  return (
    <Swiper containerClass="swiper-container" params={params}>
      {/* 定义你的轮播图片 */}
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      {/* ... */}
    </Swiper>
  );
}

这个例子中，`loop`属性启用循环模式，使得轮播到最后一张后会自动回到第一张；`focusOnSelect`确保每次点击或者滑动到一个新的幻灯片时，该幻灯片会被选中并显示。