zoukankan      html  css  js  c++  java
  • 轮播图swiper5第三方插件的使用

    局部引用示例:

      

    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>
  • 相关阅读:
    理解SetCapture、ReleaseCapture、GetCapture(控制了消息发往哪个窗口,是理解消息的关键)
    Javascript 的addEventListener()及attachEvent()区别分析
    鼠标拖拽
    鼠标右键菜单
    keydown
    一串跟随鼠标的DIV
    event对象和事件冒泡
    发表说说
    文档流
    CSS3 @keyframes 规则
  • 原文地址:https://www.cnblogs.com/a973692898/p/13204091.html
Copyright © 2011-2022 走看看