zoukankan      html  css  js  c++  java
  • vue中swiper的使用

    首先通过npm引入swiper

    npm i swiper 

    在要使用swiper的页面加入swiper

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://img5.imgtn.bdimg.com/it/u=3920751897,3443157588&fm=26&gp=0.jpg" alt="">
             <img src="http://img5.imgtn.bdimg.com/it/u=3920751897,3443157588&fm=26&gp=0.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="http://img1.imgtn.bdimg.com/it/u=2320813231,2555689438&fm=26&gp=0.jpg" alt="">
               <img src="http://img1.imgtn.bdimg.com/it/u=2320813231,2555689438&fm=26&gp=0.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="http://img1.imgtn.bdimg.com/it/u=3667678122,3437809409&fm=26&gp=0.jpg" alt="">
                <img src="http://img1.imgtn.bdimg.com/it/u=3667678122,3437809409&fm=26&gp=0.jpg" alt="">
          </div>
        </div>
      </div>

     在script中引入

    import Swiper from 'swiper'
      import '../../../../node_modules/swiper/js/swiper.js'
      import "../../../../node_modules/swiper/css/swiper.css"
        export default {
                mounted(){
              var mySwiper = new Swiper('.swiper-container', { 
             autoplay: {
                delay: 3000,//自动切换时间设置
                stopOnLastSlide: false,//当自动切换到最后一张时是否停止自动切换
                disableOnInteraction: true,//用户触摸时是否停止自动切换
               },
              loop:true
            })
          },
            
        }

     更多的用法描述可参考https://blog.csdn.net/taoqidejingling/article/details/98492467

  • 相关阅读:
    OCP-1Z0-053-V13.02-702题
    OCP-1Z0-053-V13.02-688题
    OCP-1Z0-053-V13.02-691题
    OCP-1Z0-053-V13.02-698题
    OCP-1Z0-053-V13.02-703题
    OCP-1Z0-053-V13.02-701题
    OCP-1Z0-053-V13.02-685题
    memcached 按键查找和批量查找
    catch(CException *e)捕获异常
    char数组最大长度
  • 原文地址:https://www.cnblogs.com/lipu12281/p/11888019.html
Copyright © 2011-2022 走看看