React swiper carousel second menu bar sliding effect

I also wrote the carousel in react before, using react-swipe

Now we use the import swiper.js in react to realize the left and right sliding effect of the menu bar. Without further ado, let's go to the code:

Note: Be sure to import swiper.min.css in react. import Swiper from 'swiper' this code only imports 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="Menu bar sliding effect";
    }
    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>Pending payment</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li>To be confirmed</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li >Pending Shipment</li>
                                    </div>
                                    <div className="swiper-slide slide2">
                                        <li>Pending delivery</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li>Completed</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li>Reject the order</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li>Return/After-sale</li>
                                    </div>
                                </div>
                            </div>
                        </ul>
                </div>
            </div>
        );
    }
}

export default MyOrederFuRefuseCom