Vue项目,使用vue-awesome-swiper插件(可一次切换多张)
一、准备工作1、下载插件(最近版本的swiper可能会出现未知bug,所以我用的是5.4.5版本)npm install swiper@5.4.5 vue-awesome-swiper --save二、页面使用1、引入import 'swiper/css/swiper.css'import { Swiper, SwiperSlide } from 'vue-awesome-swiper'2、注册组
·
一、准备工作
1、下载插件(最新版本的swiper可能会出现未知bug,所以我用的是5.4.5版本)
npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save
二、页面使用
1、引入
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
2、注册组件
components:{ Swiper, SwiperSlide }
3、在data中设置options
data() {
return {
options: {
pagination: {
el: ".case-swiper-pagination"
//区分不同Swiper的组件
},
//显示分页
loop: true,
//开启循环
loopedSlides: 6,
//设置平滑
slidesPerView: 3,
//设置能够同时显示的数量(可设置 auto)
speed: 1000,
//切换速度
navigation: {
prevEl: ".swiper-button-prev2",
nextEl: ".swiper-button-next2"
},
//左右箭头按钮(可自定义)
// autoplay: false,
//是否开启自动轮播
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 开启自动轮播后,设置自动轮播的延迟时间
loopAdditionalSlides: 1,
//复制若干个slide
// slidesPerGroup: 3,
// 定义slides的数量多少为一组,即每次切换slides的数量,默认每次切换一张
on: {
slideChangeTransitionEnd: function() {
console.log(this.activeIndex);
//获取当前下标,切换结束时,告诉我现在是第几个slide
}
}
}
};
4、完整代码
<template>
<div class="box"
@mouseenter="swiper_enter"
@mouseleave="swiper_leave">
<div class="swiper-button-prev swiper-button-prev2"></div>
<swiper ref="swiper"
:options="options">
<swiper-slide v-for="(item,index) in 6"
:key="index">
<div class="card">
</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next swiper-button-next2"></div>
</div>
</template>
<script>
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
components: { Swiper, SwiperSlide },
data() {
return {
options: {
pagination: {
el: ".case-swiper-pagination"
//区分不同Swiper的组件
},
//显示分页
loop: true,
//开启循环
loopedSlides: 6,
//设置平滑
slidesPerView: 3,
//设置能够同时显示的数量(可设置 auto)
speed: 1000,
//切换速度
navigation: {
prevEl: ".swiper-button-prev2",
nextEl: ".swiper-button-next2"
},
//左右箭头按钮(可自定义)
// autoplay: false,
//是否开启自动轮播
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 开启自动轮播后,设置自动轮播的延迟时间
loopAdditionalSlides: 1,
//复制若干个slide
// slidesPerGroup: 3,
// 定义slides的数量多少为一组,即每次切换slides的数量,默认每次切换一张
on: {
slideChangeTransitionEnd: function() {
console.log(this.activeIndex);
//获取当前下标,切换结束时,告诉我现在是第几个slide
}
}
}
};
},
/* 引入组件 */
computed: {
swiper() {
return this.$refs.swiper.$swiper;
}
},
methods: {
swiper_enter() {
this.swiper.autoplay.stop();
},
//鼠标悬停停止swiper自动轮播
swiper_leave() {
this.swiper.autoplay.start();
}
//鼠标移出开启swiper自动轮播
}
};
</script>
<style lang="less" scoped>
.box {
width: 1050px;
margin: 0 auto;
position: relative;
.swiper-slide {
.card {
width: 340px;
height: 320px;
background: url("https://img2.baidu.com/it/u=1473738496,3480051138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
no-repeat;
background-size: 340px 320px;
position: relative;
cursor: pointer;
}
}
}
</style>
三、效果图
更多推荐
已为社区贡献1条内容
所有评论(0)