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',
        },
      })
    },
    

      

    效果:

  • 相关阅读:
    法院
    Spring Cloud常用组件
    PowerShell使用教程
    浅谈3DES加密解密
    SC win consul
    SB-Token-Jwt
    前端MVC Vue2学习总结
    spring-session-data-redis
    SpringBoot WS
    SpringBoot之使用Spring Session集群-redis
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/9595308.html
Copyright © 2011-2022 走看看