zoukankan      html  css  js  c++  java
  • react中如何使用swiper

     react中怎么使用基本swiper

      第一步:安装包

    1
    npm i swiper -S

      第二步:引包

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

      第三步:写html

    复制代码
        <!-- Slider main container -->
        <div class="swiper-container">
    
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
    
                <!-- Slides -->
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
    
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
    
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
    
            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
    复制代码

      第四步:调用  

      注意: // 直接引用数据将,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',
            }
        })
  • 相关阅读:
    快速认识ELK中的L
    HBase启动和停止命令
    Kafka 快速起步(作者:杜亦舒)
    Kafka 消息存储及检索(作者:杜亦舒)
    HBase集群搭建
    Kafka消息保证不丢失和重复消费问题
    Kafka文件的存储机制
    Kafka的配置文件详细描述
    kafka常用操作命令
    BZOJ1769 : [Ceoi2009]tri
  • 原文地址:https://www.cnblogs.com/bamboopanders/p/12899063.html
Copyright © 2011-2022 走看看