文章目录

项目场景：
普通vue3项目：
vue3+typeScript项目：
组件样式修改：
关于垂直方向：
关于自动播放：
关于无限循环：
关于获取swiper实例：

项目场景：

前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。

另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失

普通vue3项目：

win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。

之后在命令行里面输入vue create vue3

接着选择创建默认的vue3项目

接着用VSCode编辑器打开项目，在命令输入npm i swiper（swiper8出了可以指定一下版本npm i swiper@7），成功后package.json文件中会标上

接着我在官网找了个功能比较全的代码作为例子，如下：

<template><swiper:modules="modules":slides-per-view="3":space-between="50"navigation:pagination="{ clickable: true }":scrollbar="{ draggable: true }"@swiper="onSwiper"@slideChange="onSlideChange"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>...</swiper>
</template>
<script>// import Swiper core and required modulesimport { Navigation, Pagination, Scrollbar, A11y } from 'swiper';// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from 'swiper/vue';// Import Swiper stylesimport 'swiper/css';import 'swiper/css/navigation';import 'swiper/css/pagination';import 'swiper/css/scrollbar';// Import Swiper stylesexport default {components: {Swiper,SwiperSlide,},setup() {const onSwiper = (swiper) => {console.log(swiper);};const onSlideChange = () => {console.log('slide change');};return {onSwiper,onSlideChange,modules: [Navigation, Pagination, Scrollbar, A11y],};},};
</script>

我们把它拷到App.vue中全部替换掉之后执行，你会发现报css依赖不存在的错误，

我们打开node_modules文件夹，找到swiper文件夹，你会发现这下路径指向都是不明确的，所以接下来们要手动修改一下路径，

把js的路径换成vue文件夹下的swiper-vue.js

默认基础样式用swiper目录下的swiper.min.css

接着我们打开modules目录，把用到的组件路径都改一下，然后久违的绿它色终于出现了

如果嫌麻烦可以直接用总样式，在swiper目录下的swiper-bundle.css或者压缩版swiper-bundle.min.css，

然后你在浏览器看到的样子是这样的，麻的什么鬼，官方真的是(╯°Д°)╯︵┻━┻

这是因为官方例子里默认一次显示3个滑块，而例子只有3个swiper-slide，之后就用省略号了

我们把它改成1并且添加点样式后看下效果：

最终的代码：

<template><swiper:modules="modules":slides-per-view="1":space-between="50"navigation:pagination="{ clickable: true }":scrollbar="{ draggable: true }"@swiper="onSwiper"@slideChange="onSlideChange"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide></swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";/*** 如果嫌麻烦可以把上面的全部样式都删了，直接用总的* bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）*/
// import "swiper/swiper-bundle.min.css";// Import Swiper styles
export default {components: {Swiper,SwiperSlide,},setup() {const onSwiper = (swiper) => {console.log(swiper);};const onSlideChange = () => {console.log("slide change");};return {onSwiper,onSlideChange,modules: [Navigation, Pagination, Scrollbar, A11y],};},
};
</script>
<style scoped>
.swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: pink;
}
</style>

vue3+typeScript项目：

我们先在桌面打开命令行，输入vue create vue3-ts

我们选择自定义项目

接着选这三项就好了，其他可以先不用

选择3.x

之后的配置看着选，问题不大

同样的，先在命令输入npm i swiper（swiper8出了可以指定一下版本npm i swiper@7）把swiper7装上

因为ts的书写方式不一样，不可以直接用官方的例子，所以就不一一粘贴显示了，直接上改好了的，把下面的代码全部替换到App.vue文件就可以了，显示的效果是和普通项目一样的我就不展示了。


<template><swiper:modules="modules":slides-per-view="1":space-between="50"navigation:pagination="{ clickable: true }":scrollbar="{ draggable: true }"@swiper="onSwiper"@slideChange="onSlideChange"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide></swiper>
</template>
<script lang="ts">
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";/*** 如果嫌麻烦可以把上面的全部样式都删了，直接用总的* bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）*/
// import "swiper/swiper-bundle.min.css";import { defineComponent } from "vue";export default defineComponent({name: "",components: {Swiper,SwiperSlide,},setup() {const onSwiper = (swiper: any) => {console.log(swiper);};const onSlideChange = () => {console.log("slide change");};return {onSwiper,onSlideChange,modules: [Navigation, Pagination, Scrollbar, A11y],};},
});
</script>
<style scoped>
.swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: pink;
}
</style>

组件样式修改：

因为vue为了不让单页的样式污染全局，通常会在style标签加上scoped，这就导致了我们无法替换掉组件的样式，所以我们可以用::v-deep把样式抛出去替换到全局的，比方说我们要把swiper的pagination页面小圆点改成白色，那么样式就可以这样写：

<style scoped>
.swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: pink;
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet {background: rgb(255, 255, 255);
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {background: rgb(255, 255, 255);
}
</style>

当然，有些小伙伴会说我要用 CSS 预处理器，比方说scss，那么就可以用:deep()，这样写：

顺便提一下，目前vue3中并不支持最新版的sass，我们可以用4.14.1的 node-sass搭配7.3.1的sass-loader使用
npm install node-sass@^4.14.1 -D
npm install sass-loader@^7.3.1 -D

<style lang="scss" scoped>
.swiper:deep() {.swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: pink;}.swiper-pagination {.swiper-pagination-bullet {background: rgb(255, 255, 255);}.swiper-pagination-bullet-active {background: rgb(255, 255, 255);}}
}
</style>

效果：

关于垂直方向：

关于垂直方向的官方文档在这：#Vertical，但是目前给的vue的demo代码竟然还是6.x的，真的是(╯°Д°)╯︵┻━┻。好了，想要把轮播图设置为垂直方向，要在swiper标签里加上:direction="'vertical'"，这里注意了，vertical一定要有两对引号包裹的，不管单引号在里还是外，否则不生效，加了这个参数后你会发现滚动轮播图时会散架，所以还要给swiper设置实高，非要用百分比的话就在swiper标签外套一个div，在div里给个实际高度就好，具体看下面代码：

<template><swiper:direction="'vertical'":modules="modules":pagination="{ clickable: true }"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide></swiper>
</template>
<script>
// import Swiper core and required modules
import { Pagination } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
// Import Swiper styles
export default {components: {Swiper,SwiperSlide,},setup() {return {modules: [Pagination]};},
};
</script>
<style scoped>
.swiper {height: 100vh;
}
.swiper-slide {height: 100%;line-height: 100vh;font-size: 30px;text-align: center;background-color: skyblue;
}
</style>

效果：

关于自动播放：

自动播放引入一下Autoplay 模块就好，没什么大问题。

<template><swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" :autoplay="{delay: 2500,disableOnInteraction: false}"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide></swiper>
</template>
<script>
// import Swiper core and required modules
import { Pagination, Autoplay } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/autoplay/autoplay.min.css";// Import Swiper styles
export default {components: {Swiper,SwiperSlide,},setup() {return {modules: [Pagination, Autoplay],};},
};
</script>
<style scoped>
.swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: violet;
}
</style>

效果：

关于无限循环：

需要开启无限循环的话在swiper标签上加入:loop="true"参数就可以了，但是你会发现swiper为了衔接多生成的两个swiper-slide并没有引用上我们自己设置的样式：

所以我们用deep处理一下就好:

<template><swiper :modules="modules" navigation :loop="true"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide></swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
// Import Swiper styles
export default {components: {Swiper,SwiperSlide,},setup() {return {modules: [Navigation]};},
};
</script>
<style scoped>
.swiper::v-deep .swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: lightgreen;
}
</style>

关于获取swiper实例：

获取swiper实例的官方地址：传送门，官方描述是可以直接useSwiper来使用swiper实例，但是我翻了一遍源码也没有看到哪里有抛出useSwiper挂钩，我感觉被耍了(╯°Д°)╯︵┻━┻，不过还好swiper组件初始化绑定的onSwiper里可以拿到swiper实例，并且Composition API 是直接在setup中定义方法，所以间接赋一下值就好，具体效果：

具体代码：

<template><swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide></swiper><view class="btn-view"><button @click="slidePrev">slidePrev</button><button @click="slideNext">slideNext</button></view>
</template>
<script>
// import Swiper core and required modules
import { Pagination } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";// Import Swiper styles
export default {components: {Swiper,SwiperSlide,},setup() {let useSwiper = undefined;const onSwiper = (swiper) => {console.log(swiper);useSwiper = swiper};const slidePrev = () => {console.log(useSwiper)useSwiper.slidePrev()}const slideNext = () => {console.log(useSwiper)useSwiper.slideNext()}return {onSwiper,modules: [Pagination],slidePrev,slideNext};}
};
</script>
<style scoped>
.swiper-slide {height: 300px;line-height: 300px;font-size: 30px;text-align: center;background-color: beige;
}
.btn-view {display: flex;justify-content: center;
}
.btn-view button {margin: 20px;
}
</style>

over~~

vue3中使用swiper7轮播图插件相关推荐

react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
vue3学习（引入轮播图插件）
Vue引入第三方以轮播图为例 Swiper开源.免费.强大的触摸滑动插件 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端 Swiper能实现触屏焦点图.触屏ta ...
自已动手写的轮播图插件，功能不断增加中，可以下载
前,平时总是使用别人的轮播图插件,这次决定自已写一个,功能越多越好.实际现起来,发现并不容易.先实现基本的功能,下两周要丰富起来. 图是别人的图,心是自已的心.直接上代码: 一:结构 <!-- ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
一个功能较全的轮播图插件（含详细介绍）
今天给大家分享一个功能较全的轮播图插件,废话不多说,直接上插件 ;(function($){"use strict";$.fn.extend({banner:function(op ...

vue3中使用swiper7轮播图插件