react 中使用 swiper

最近项目中需要用到轮播图，我立马想起了 swiper ，那么本文就来带大家体验一下如何在 React 中使用这个插件，使用的是 函数组 + hooks 的形式。

需求非常简单，就是一个可以自动播放、点击切换的轮播图（跑马灯），可以同时展示n张图片，无限滚动。注意：如果是遇到纯文字的轮播效果，那我建议完全可以不用这么重的东西，直接使用 antd 中的Tab 组件或者干脆自己写也能达到效果

直接食用

示例效果如下

1、安装依赖

npm i swiper

2、直接完成代码
需要什么就从'swiper/modules'中拓展，下面的几个满足大多数需求

// index.tsx
import { useState } from 'react';
import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

import './index.css'
import SlideNextButton from './SlideNextButton' //自定义控制按钮

export default function Index () => {
  const [ list ] = useState([ 1, 2, 3, 4, 5, 6, 7])

  return (
    <Swiper
      loop
      centeredSlides
      modules={[Navigation, Pagination, Scrollbar]}
      spaceBetween={50}
      slidesPerView={3}
      navigation // 对应 Navigation
      pagination={{ clickable: true }} // 对应 Pagination
      scrollbar={{ draggable: true }} // 对应 Scrollbar
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      { list.map(item =>
        <SwiperSlide>
          <div className="card">
            { item }
          </div>
        </SwiperSlide>
      )}
      <SlideNextButton/>
    </Swiper>
  );
};

// index.css
.card{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: pink;
}

额外的自定控制组件 <SlideNextButton/>
要使用useSwiper 一定要将组件作为 <Swiper/>子组件使用

// SlideNextButton.tsx
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  const onPrev = () => {
    swiper.slidePrev()
  }
  
  const onNext = () => {
    swiper.slideNext()
  }

  return (
    <div style={{ position: 'fixed' }}>
      <button onClick={onPrev}>prev</button>
      <button onClick={onNext}>next</button>
    </div>
  );
}