react中swiper的配置（纯swiper篇）

本次的swiper的配置基于3.4.2版本的swiper包

本篇博客可以有效解决配置的swiper不轮播，不自动轮播问题

1、首先安装swiper3.4.2版本

npm i swiper@3.4.2 -s

这时候你会发现你的node_modules里面多了一个swiper包，如果你已经安装过其他的swiper，请先卸载

2、如果你的swiper里面轮播的内容是静态的，也就是死数据的话，new swiper可以放在组件componentDidMount周期里面

componentDidMount(){
    new Swiper ('.swiper-container',{
    autoplay:1000,
    loop: true
    })
  }

如果你的资源，会更新，是后期获取的，那么你的new swiper应该写在组件的componentDidUpdate 里面，这样的话，可以更新swiper，避免出现不轮播，效果出不来的情况

componentDidUpdate(){
    new Swiper ('.swiper-container',{
      autoplay:2000,
      loop: true
      })
  }

3、swiper的引入和挂载
引入：

import Swiper from "swiper/dist/js/swiper"
import "swiper/dist/css/swiper.css"

这两个文件是在你写swiper组件里面引入的，一个是js,一个是css,
如果引入出错，你可以查看你的node_modules 里面是否有swiper包，包里面的目录是否和引入一致

挂载：

<div className="swiper-container">
              <div className="swiper-wrapper">
                {this.state.banner.map((items,imgs_index)=>{
                    return (
                    <div className="swiper-slide" key={items.banner_img}>
                        <img src={items.banner_img}  alt=''></img>
                  </div>
                  )
                })}
              </div>
          </div>

这样你的swiper就能正常使用啦！

如果你的配置出现问题的话，请留言，我等立马效力！

来源：oschina

链接：https://my.oschina.net/u/4341499/blog/4358041

标签

swiper

react