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/ 網站