react中swiper插件如何使用？-js教程-PHP中文网

react中swiper插件如何使用？

青灯夜游

发布： 2020-11-25 15:40:13

原创

3966人浏览过

方法：1、使用“npm i swiper -S”命令安装swiper包；2、使用import语句引入swiper的css和js文件；3、在render中编写swiper组件的结构，并在react的挂载生命周期函数内创建Swiper对象即可。

react中swiper插件如何使用？

本教程操作环境：windows7系统、react16版，该方法适用于所有品牌电脑。

react中使用基本swiper

第一步：安装包

npm i swiper -S

登录后复制

第二步：引包

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

import Swiper from 'swiper/dist/js/swiper.js'  
import 'swiper/dist/css/swiper.css'

登录后复制

第三步：写html

    <!-- Slider main container -->
    <p class="swiper-container">

        <!-- Additional required wrapper -->
        <p class="swiper-wrapper">

            <!-- Slides -->
            <p class="swiper-slide">Slide 1</p>
            <p class="swiper-slide">Slide 2</p>
            <p class="swiper-slide">Slide 3</p>
        </p>

        <!-- If we need pagination -->
        <p class="swiper-pagination"></p>

        <!-- If we need navigation buttons -->
        <p class="swiper-button-prev"></p>
        <p class="swiper-button-next"></p>

        <!-- If we need scrollbar -->
        <p class="swiper-scrollbar"></p>
    </p>

登录后复制

第四步：在react声明周期里创建Swiper对象进行调用

// 直接引用数据将，new Swiper放在componentDidMount
// 用axios请求数据，new Swiper放在componentDidUpdate  

    new Swiper('.swiper-container', {
        direction: 'vertical',//竖向轮播
        loop: true,//无缝轮播
        pagination: {//小圆点分页
            el: '.swiper-pagination',
        },
        navigation: {//左右分页
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {//下划线分页
            el: '.swiper-scrollbar',
        }
    })

登录后复制

更多编程相关知识，请访问：编程入门！！

以上就是react中swiper插件如何使用？的详细内容，更多请关注php中文网其它相关文章！