vue3 + swiper
vue3+swiper可copy版
·
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"
更多推荐
所有评论(0)