react中用swiper做轮播步骤

最新推荐文章于 2025-06-29 09:23:48 发布

原创最新推荐文章于 2025-06-29 09:23:48 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react中用swiper做轮播步骤

IT 同时被 2 个专栏收录

83 篇文章

订阅专栏

react

6 篇文章

订阅专栏

第一步:在cmd中引入

npm install --save swiper

第二步:

在页面上引入：

import Swiper from ‘swiper/dist/js/swiper.js’
import ‘swiper/dist/css/swiper.min.css’

第三步：在生命周期钩子函数componentDidMount()中写入轮播方法

componentDidMount(){
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,//这里是自动轮播
            autoplay:{
                delay:1000 ,
                disableOnInteraction: false
            },
            pagination : {
                el:'.swiper-pagination',//这里是分页器设置
            }
        });
    }

第四步：在render中渲染dom

（1）如果数据是根据异步加载完成那么我们需要通过数组遍历：

render() {
    return (
        <div className="App">
            <div className="swiper-container">
                <div className="swiper-wrapper">
                {
                    this.state.carouselr.map((item,index)=>{
                        return(
                                <div className="swiper-slide" key={index}>
                                    <img src={item.picUrl}/>
                                </div>
                        )
                    })
                }
        </div>
        <div className='swiper-pagination'></div>
            </div>
        </div>
        );
}

（2）如果是直接在render中渲染那么代码如下：

render() {
    return (
        <div className="Hello">
            <div className="swiper-container">
            <div className="swiper-wrapper">
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 2</div>
                <div className="swiper-slide">Slide 3</div>
            </div>
                <div className='swiper-pagination'></div>
            </div>
        </div>
    );
}