在 react 中使用 Swiper 4 做轮播图

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 (
      

        

        

          
Slide 1
          
Slide 2
          
Slide 3
        
        

      
      
    );
  }
}

这样就可以了