vue app外卖(5)使用swiper 进行图片轮播

it2022-05-06  0

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


最新回复(0)