1.新建vue项目

vue create 项目名

然后选最下面那一个（键盘上下键操作）然后回车

选择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的使用方法。
注意：请确保../assets/img/ 路径下有swiper1.jpg等照片

<template><div id="swipercom"><div class="swiper-container" id="swiperIndex"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,i) in imgs" :key="i"><img :src="item.pic" alt=""></div></div>//换页器<div class="swiper-pagination"></div>//前进后退<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>//滚动条<div class="swiper-scrollbar"></div></div></div>
</template><script>import 'swiper/css/swiper.css'  //引入swiper样式import Swiper from 'swiper'; //引入swiperexport default {name: "Swiper",data(){return{imgs:[{pic:require('../assets/img/swiper1.jpg')},{pic:require('../assets/img/swiper2.jpg')},{pic:require('../assets/img/swiper3.png')}]}},mounted() {var mySwiper=new Swiper('#swiperIndex',{//配置分页器内容loop: true, // 循环模式选项pagination:{el:".swiper-pagination",//换页器与哪个标签关联clickable:true//分页器是否可以点击},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},//如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})}}
</script><style lang="less">#swipercom{width: 7.5rem;#swiperIndex.swiper-container{width: 7.1rem;height: 2.6rem;border-radius: 0.1rem;.swiper-slide img{width: 100%;}.swiper-pagination-bullet-active{background-color: orangered;}}}
</style>

2.然后在项目中找到HomeView.vue（默认为主页面），把下面代码复制，替换掉里面内容，里面引入了swiperCom子组件，这也是我们需要用到swiper的子组件

<template><div class="home">
<!--    轮播图--><swiperCom></swiperCom></div>
</template><script>
import SwiperCom from "@/components/swiperCom";export default {name: 'HomeView',components: {SwiperCom}
}
</script><style scoped></style>

大功告成，效果如下

除此之外要是想要有更多的轮播图样式可以去swiper官网进行查阅
https://www.swiper.com.cn/usage/index.html

在vue中使用swiper轮播图（亲测有效）相关推荐

在vue项目中使用swiper轮播图的关于在ios中图片白边闪屏踩坑记录
场景描述: 近日,接到一个需求,改善APP首页的布局,需要在顶部添加一个可滚动的栏目导航,以切换栏目然后切换栏目内容类似于唯品会目前的切换效果.如下图问题描述: 在切换顶部栏目的时候,下面内容页的b ...
react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
vue中用的swiper轮播图的用法及github的地址
https://github.com/surmon-china/vue-awesome-swiper 以上是github的地址 Vue-Awesome-Swiper Swiper4 component ...
vue中用的swiper轮播图的用法github的地址
https://github.com/surmon-china/vue-awesome-swiper
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...

在vue中使用swiper轮播图（亲测有效）

在vue中使用swiper轮播图（亲测有效）

1.新建vue项目

2.装swiper的包

3.使用swiper

在vue中使用swiper轮播图（亲测有效）相关推荐

最新文章

热门文章