配置文档:https://www.swiper.com.cn/api/effects/298.html
方法一:
一、在vue项目中安装swiper npm install swiper@5.4.5 -S
npm install vue-awesome-swiper@3.1.3 -S
二、在main.js中引入swiper.css import 'swiper/css/swiper.css'
三、在组件中使用
1、引入必要的组件 import { swiper, swiperSlide } from "vue-awesome-swiper";
2、注册子组件 components: { swiper, swiperSlide }
3、结构添加
data(){
return{
swiperOptions: {
loop: true,
speed: 1000,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
effect : 'flip',
flipEffect: {
slideShadows : true,
limitRotation : true,
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 修改默认点击左右箭头样式
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
}
}
3.html代码
<div class="wrapper">
<swiper ref="mySwiper" v-bind:options="swiperOptions">
<swiper-slide v-for="(item, index) in 5" v-bind:key="index"> {{item}} </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
方法二:
一、在vue项目中安装swiper npm install swiper@5.4.5 -S
<template>
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in sceneList" :key="index">
<img :src="item.cover" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css' //如果没有引入css就在swiper官网文档找见自己用的那个轮播图把他的css文件拷贝下来引入
var swiper;
export default {
data(){
return{
sceneList:[]
}
},
created(){
},
methods:{
// 轮播图启动
swiperFn(){
let that = this
swiper = new Swiper(".mySwiper", {
spaceBetween: 10,
slidesPerView: 3, //显示轮播图的个数 不写默认一张图片
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
freeMode: true,
watchSlidesProgress: true,
on: {
slideChangeTransitionEnd: function(){
// alert(this.activeIndex);//切换结束时,告诉我现在是第几个slide
},
},
});
//swiper;
},
}
}
</script>