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',
            }
        })
  • 相关阅读:
    4. Object
    3. string
    8. 滚动条美化
    7. 单位,移动布局
    2. js的异步
    2. 即时通讯
    让PHP更快的提供文件下载
    phpstorm+xdebug远程调试设置
    postman自动生成签名
    一位技术人员成长历程
  • 原文地址:https://www.cnblogs.com/bamboopanders/p/12899063.html
Copyright © 2011-2022 走看看