欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

react中swiper插件如何使用?

程序员文章站 2022-03-02 11:09:42
...

方法: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

第二步:引包

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插件如何使用?的详细内容,更多请关注其它相关文章!

相关标签: react swiper