在 React 中使用 Swiper 封装组件 做轮播图

1. 安装 Swiper

npm install --save swiper

2. 编写 Swiper 组件

首先引入 Swiper 以及样式

import 'swiper/dist/css/swiper.min.css'

import Swiper from 'swiper/dist/js/swiper.js'

在组件挂载完毕的时候生成 Swiper 对象

componentDidMount () {
    
      var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        pagination : {
            el: '.swiper-pagination',
        }
      });
}

在 React 的 render 方法构造 html 结构

render() {
    return (
      <div className="App">
        <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">Slide 1</div>
          <div className="swiper-slide">Slide 2</div>
          <div className="swiper-slide">Slide 3</div>
        </div>
        <div className='swiper-pagination'></div>
      </div>
      </div>
    );
  }
}