vue中使用图片轮播插件swiper
1、在项目中安装插件
npm install vue-awesome-swiper --save
2.main.js中引入插件的css文件。（官方给出的路径，直接引入的node_modules中的）
import 'swiper/dist/css/swiper.css'
【vue中使用图片轮播插件swiper】2.在使用此插件的组件的标签中导入swiper
import { swiper, swiperSlide } from 'vue-awesome-swiper'
4.组件中注册
components: {
swiper,
swiperSlide
}
5.可以在官网上查找要使用的模板代码
https://github.com/surmon-china/vue-awesome-swiper
点击如下可以查看很多效果
文章图片
image.png
想要使用哪一个效果，可以点右边进去查看代码
文章图片
image.png
模板参考 每一个swiper-slide里面放一个图片。:options是为了后面在data中配置参数。
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
//分页器小圆点//左右按钮
在data中配置参数
swiperOption: {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
想要了解更多的配置，可以查看官网API：https://www.swiper.com.cn/api/index.html
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 由浅入深理解AOP
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 我眼中的佛系经纪人