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

　　

效果：