vue swiper轮播,vue中使用swiper缩略图控制轮播
最近用vue做移动项目的时候，遇到了carousel的制作。接下来，让边肖带你一步一步地做到这一点。下面这篇文章主要介绍在Vue中使用swiper carousel的正确姿势。有需要的朋友可以参考一下。
目录
前言1。新vue项目2。带swiper 3的包装。用swiper总结
前言
我在网上搜了很多关于如何在vue中使用swiper的内容，结果发现了很多垃圾，也不知道是从哪里抄来的。我吐出来了。假设你是新手，我就从一个新项目开始。以下是步骤。
1.新建vue项目
创建项目名称
然后选择最下面的一个(键盘上下键操作)然后回车。
选择Bable、Router、Vuex、Css-Processords，不选中其他选项(选中和不选中空格键)。
根据这个图选择剩下的步骤，然后项目就创建成功了。
2.装swiper的包
首先在命令行中Cd到项目。
Cd项目名称
npm i swiper vue-awesome-swiper
npm i swiper@5
检查package.json中的包是否完成
3.使用swiper
1.在components文件夹中创建一个新的swiperCom.vue，并将以下代码复制到其中，在注释中使用swiper。
注意：请确保有swiper1.jpg的照片在./assets/img/path。
模板
div id=swipercom
div class= swiper-container id= swiperIndex
div class=swiper-wrapper
I :key= I
img :src=item.pic alt=
/div
/div
//换页器
swiper-pagination
/div
//向前和向后
div class= swiper-button-next /div
div class= swiper-button-prev /div
//滚动条
div class= swiper-scroll bar /div
/div
/div
/模板
脚本
导入 swiper/CSS/Swiper . CSS //引入Swiper样式
从“Swiper”导入Swiper；//介绍swiper
导出默认值{
名称： Swiper ，
data(){
返回{
imgs
{pic:要求(./assets/img/swiper1.jpg)}，
{pic:要求(./assets/img/swiper2.jpg)}，
{pic:要求(./assets/img/swiper3.png)}
]
}
},
已安装(){
var mySwiper=new Swiper( # swiperIndex ，{
//配置寻呼机内容
Loop: true，//循环模式选项
分页：{
艾尔：。swiper-pagination ，//换页器与哪个标签相关联？
可点击：真//寻呼机可以点击吗？
},
//如果需要前进和后退按钮
导航：{
nextEl:。swiper-button-next ，
普雷维尔：。swiper-button-prev ，
},
//如果你需要滚动条
滚动条：{
艾尔：。滚动条，
},
})
}
}
/脚本
style lang=less
#swipercom{
宽度：7.5雷姆；
#swiperIndex.swiper-container{
宽度：7.1雷姆；
身高：2.6雷姆；
边框半径：0.1毫米；滑动图像{
宽度：100%；
}。swiper-pagination-bullet-active {
背景色：橙色；
}
}
}
/风格
2.然后在项目中找到HomeView.vue(默认是主页面)，复制下面的代码，替换里面的内容，就是引入了swiperCom子组件，这也是我们需要用到的swiper的子组件。
模板
div class=home
！-旋转地图-
swiperCom/swiperCom
/div
/模板
脚本
从“@/components/swiperCom”导入swiper com；
导出默认值{
名称：“主视图”，
组件：{
SwiperCom
}
}
/脚本
样式范围
/风格
你完了。效果如下
另外，如果想要更多的旋转木马图案，可以去swiper官网参考。
https://www.swiper.com.cn/usage/index.html
总结
关于在vue中使用swiper carousel的正确姿势的这篇文章到此为止。有关在vue中使用swiper carousel的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。