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

　　

效果：

 

 

转载于:https://www.cnblogs.com/guangzhou11/p/9595308.html