码迷,mamicode.com
首页 > 其他好文 > 详细

轮播图swiper5第三方插件的使用

时间:2020-06-28 18:58:37      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:attribute   地方   循环播放   import   rom   tag   格式   pre   rip   

局部引用示例:

  

1.首先,先进行下载安装
  命令: npm install --save swiper

 

2.在局部页面中引入(一般用于首页)
  
  注:vue项目哦
//-----------------------------------------------------------html代码----------------------------------------------------------
写的有点过于简陋,不过主要就是这个格式
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
    </div>
    <div class="swiper-pagination"></div>

  </div>

//-----------------------------------------------------------js代码------------------------------------------------------------
  <script>
    //引入swiper
    import Swiper from "swiper"
    //引入swiper样式--------------不一定都一样(请去node_modules中的swiper中自行查看路径)
    import "swiper/css/swiper.min.css"
    //下方就是例子了,我这个是home页面
    export default{
      name:‘Home‘,
      //注册组件的地方
      components:{},
      //dom渲染后的生命周期钩子函数
      mounted(){
        //创建一个swiper实例对象,来实现轮播
        new Swiper(‘.swiper-container‘,{
          loop:true, //循环轮播
          pagination:{//分页器
            el:‘.swiper-pagination‘
          },
          autoplay:{
            stopOnLastSlide:true,//开启自动循环播放
            delay:3000//设置轮播时间
          }
        })
      }
    }    
  </script>

 

轮播图swiper5第三方插件的使用

标签:attribute   地方   循环播放   import   rom   tag   格式   pre   rip   

原文地址:https://www.cnblogs.com/a973692898/p/13204091.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!