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

方法：1、使用“npm i swiper -S”命令安装swiper包；2、使用import语句引入swiper的css和js文件；3、在render中编写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插件如何使用？的知识。速戳>>知识兔学习精品课！