在react中使用swiper制作具有滑动效果的导航栏

1.先下载swiper包

npm install swiper -S

2.在下载完成之后，在想要使用的页面引入swiper

import Swiper from "swiper"

同时还要将swiper的样式进行引入，我当时搜索网上的都是将css和swiper在同一个页面进行引用，但是我的在页面是没有进行引入的，或者说只是在public文件夹里面的index.html文件进行了css的相关引入。
3.就是在使用的地方进行使用

<div class="swiper-container">
                <div class="swiper-wrapper" style={{display:'inline-flex'}}>
                    <div className='swiper-slide'>1</div>
                    <div className='swiper-slide'>2</div>
                    <div className='swiper-slide'>3</div>
                </div>
            </div>

同时自己也可以根据css的类名，改变相关样式，改造成符合自己需要的样子
我的是这样的

.swiper-container{/*把主要的框写好*/
    width:100%;
    height:0.89rem;
    .swiper-slide{/*轮播的内容*/
        width:30%;
        height:100%;
        text-align: center;
        line-height: 0.89rem;
        border-radius: 0.44rem;
        font-size: 0.44rem;
        color: #666666;
        font-weight: bold;
    }
    
}

4.上面就是我使用的相关样式，同时这样还是不能使用的，要等到页面加载完成之后，才能去调用swiper对象里面的方法
因为我是在react中写的，所以我就在生命周期componentDidMount中创建了实例对象。

 componentDidMount(){
        var swiper = new Swiper(".swiper-container", {
            paginationClickable: true,         //值为真时，当单击指示器时会执行过渡动画到目标slide
            speed:300,                         //slides滑动动画之间的持续时间
        slidesPerView: 4,//表示当前显示出来的导航栏数目为4个
    });                
    }

这样就完成了，其他的效果就需要根据自己的需求进行相应的样式调整。
下面是我完整的代码，

import React,{Component} from 'react'
import './index.less'
import Swiper from "swiper"
class Navigation extends Component{
    componentDidMount(){
        var swiper = new Swiper(".swiper-container", {
            paginationClickable: true,         //值为真时，当单击指示器时会执行过渡动画到目标slide
            speed:300,                         //slides滑动动画之间的持续时间
        slidesPerView: 4,
        // slideToClickedSlide:true  
    }); 
    swiper.slideTo(this.props.activedIndex)                
    }
    render(){
        return (
            <>
           <div class="swiper-container">
                <div class="swiper-wrapper" style={{display:'inline-flex'}}>
                    <div className='swiper-slide'>1</div>
                    <div className='swiper-slide'>2</div>
                    <div className='swiper-slide'>3</div>
                </div>
            </div>
            </>
        )
    }
}
export default Navigation

最后还要说明一点，在切换的时会有一个激活类，这个是可有可无的，可以根据自己是否需要进行修改类名，不写就不会显示。