zoukankan      html  css  js  c++  java
  • vue app外卖(5) 使用swiper 进行图片轮播

    1.查看swiper 文档

    https://www.swiper.com.cn/usage/index.html
    

     2. 下载

    npm  install  --save  swiper

    3.在页面引入

    import swiper  from  'swiper'
    import 'swiper/dist/css/swiper.min.css'
    

      

    4.在页面使用

    html 

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        
    </div>
    

     js

    创建一个swipper实例对象,进行视图轮播
    有一个参数,第一个为'.swiper-container',第2个为配置对象

    //创建一个swipper实例对象,进行视图轮播
      //有一个参数,第一个为'.swiper-container',第2个为配置对象
      mounted() {
        new Swiper ('.swiper-container', {
            loop: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
      })
    },
    

      

    效果:

  • 相关阅读:
    装饰器
    函数的初识
    python的文件操作
    深浅copy
    set集合,是一个无序且不重复的元素集合
    基础数据类型 :字典
    列表的增删改查
    易错点 默认参数陷阱
    js中Array对象常用方法
    printf用法demo
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/9595308.html
Copyright © 2011-2022 走看看