React 轮播图之二菜单栏左右滑动特效(swiper.js)

之前也写了react中的轮播图，用的是react-swipe

现在用的是在react中导入swiper.js来实现菜单栏左右滑动特效。话不多说，还是上代码：

注意：在react中一定要记得导入swiper.min.css。import Swiper from 'swiper'这段代码只导入了js

import React from 'react'
import "./scss/css.css"
import carShopImg from "./../images/carShopImg.png"
import "./../../static/css/swiper.min.css"
import Swiper from 'swiper'
class MyOrederFuRefuseCom extends React.Component {
constructor(props) {
super(props);
this.state = {

};
}
componentWillMount(){
document.title="菜单栏左右滑动特效";
}
componentDidMount(){
let mySwiper = new Swiper('.swiper-container',{
initialSlide :4,
slidesPerView :5,
freeMode: true,
normalizeSlideIndex:true
});
}

render() {
return (
<div>
<div className="MyOrederFuRefuse" ref="myOreder">
<ul className="orederTab clearfloat">
<div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide slide1">
<li>全部</li>
</div>
<div className="swiper-slide slide1">
<li>待付款</li>
</div>
<div className="swiper-slide slide1">
<li >待确认</li>
</div>
<div className="swiper-slide slide1">
<li >待发货</li>
</div>
<div className="swiper-slide slide2">
<li >待收货</li>
</div>
<div className="swiper-slide slide1">
<li >已完成</li>
</div>
<div className="swiper-slide slide1">
<li >拒绝订单</li>
</div>
<div className="swiper-slide slide1">
<li >退货/售后</li>
</div>
</div>
</div>
</ul>
</div>
</div>
);
}
}

export default MyOrederFuRefuseCom