React中使用swiper

https://www.jianshu.com/p/6697415d09d8

虽然用ui框架有很多是有轮播图，走马灯的，但是有时候我们的需求是这些都无法满足的，
在这里我这个菜鸟遇到了要求图文列表可以左右滑动的情况，找了很久还是swiper适合我
下面展示一下我的用法：

首先，react项目中安装swiper

cnpm install swiper -s

然后再需要用到swiper的组件中引入：

import Swiper from "swiper";
// import Swiper from "swiper/dist/js/swiper.js";
import "swiper/swiper-bundle.css";


配置
  componentDidMount() {
    new Swiper(".swiper-container", {
      slidesPerView: 6,
      centeredSlides: false,
      virtual: {
        slides: this.state.newlist,
      },
    });
  }


 <div
          className="swiper-container"
          style={{
            width: "1200px",
            height: "100px",
          }}
        >
          <div className="swiper-wrapper">
            {this.state.newlist.map((item) => {
              return (
                <div className="swiper-slide" key={item}>
                  <img
                    style={{ width: "100px", height: "100%" }}
                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    alt=""
                  />
                </div>
              );
            })}
          </div>
        </div>

可以左右滑动

参考 https://swiperjs.com/get-started/ 网站