vue3 + swiper

app.vue文件代码

<!--属性navigation：方向箭头（切换上一张，下一张图） -->
<!--属性:slides-per-view：每个轮播模版上放几张图 -->
<!--属性:pagination：轮播小圆点  
      值：clickable: true/false
        若是true:点击小圆点可切到对应图；
        若false: 把点击事件关了，点击小圆点会没反应
-->
<!-- 属性:autoplay：【默认】自动轮播，一旦手动轮播了，自动轮播就失效 -->
<template>

<swiper

:modules="modules"

:slides-per-view="1"

:space-between="50"

navigation

:pagination="{ clickable: true }"

:scrollbar="{ draggable: true }"

@swiper="onSwiper"

@slideChange="onSlideChange"

:autoplay="{

delay:1000

}"

>

<swiper-slide><img src="@/assets/mao1.png" style="width:350px" /></swiper-slide>
<swiper-slide><img src="@/assets/mao2.jpg" style="width:350px" /></swiper-slide>
<swiper-slide><img src="@/assets/mao3.jpg" style="width:350px" /></swiper-slide>

</swiper>

</template>

<script>

// import Swiper core and required modules

import { Navigation, Pagination, Scrollbar, A11y,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/navigation/navigation.min.css";

import "swiper/modules/pagination/pagination.min.css";

import "swiper/modules/scrollbar/scrollbar.min.css";

import "swiper/modules/autoplay/autoplay.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,Autoplay],

};

},

};

</script>

<style scoped>

.swiper-slide {

height: 300px;

line-height: 300px;

font-size: 30px;

text-align: center;

background-color: pink;

}

</style>

 

main.js

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App);

app.mount('#app')

package.json文件

{

"name": "phone-project",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

"dependencies": {

"animate.css": "^4.1.1",

"better-scroll": "^2.4.2",

"cnpm": "^7.1.1",

"core-js": "^3.6.5",

"swiper": "^8.0.7",

"vant": "^3.4.6",

"vue": "^3.0.0",

"vue-awesome-swiper": "^3.1.3",

"vue-lazyload": "^1.3.3",

"vue-swiper-component": "^2.1.3"

},

"devDependencies": {

"@vue/cli-plugin-babel": "~4.5.12",

"@vue/cli-plugin-eslint": "~4.5.12",

"@vue/cli-service": "~4.5.12",

"@vue/compiler-sfc": "^3.0.0",

"babel-eslint": "^10.1.0",

"eslint": "^6.7.2",

"eslint-plugin-vue": "^7.0.0"

},

"eslintConfig": {

"root": true,

"env": {

"node": true

},

"extends": [

"plugin:vue/vue3-essential",

"eslint:recommended"

],

"parserOptions": {

"parser": "babel-eslint"

},

"rules": {}

},

"browserslist": [

"> 1%",

"last 2 versions",

"not dead"

]

}

最终效果：

默认自动轮播，可前后箭头点击/小圆点点击切换,一旦手动轮播，自动轮播就停止

 

依赖：swiper@^8.0.7"

参考：vue3中使用swiper7_爱唱歌的前端的博客-CSDN博客_vue使用swiper7