温馨提示×

react中swiper插件如何使用

发布时间:2020-11-26 09:56:23 来源:亿速云 阅读:102 作者:栢白 栏目:web开发

这篇文章主要介绍了react中swiper插件如何使用,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。

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

react中swiper插件如何使用

  • 该方法适用于所有品牌的电脑。

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插件如何使用的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来亿速云行业资讯!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部