1. 安裝 Swiper

npm install --save swiper

2. 編寫 Swiper 元件

1. 首先引入 Swiper 以及樣式

// 引入此路徑，才不會打包失敗

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

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

1. 在元件掛載完畢的時候生成 Swiper 物件

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

2 . 在 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>
    );
  }
}
 

這樣就可以了