实现:
<template>
<div class="center-top-swiper"
@mouseenter="on_bot_enter"
@mouseleave="on_bot_leave">
<swiper :options="swiperOption"
ref="mySwiper">
<swiper-slide v-for="i in 4"
:key="i">
<!-- {{ i }} -->
<img :src="require('@/assets/images/echarts/dataBoard016/swiper' + (i) + '.jpg')">
</swiper-slide>
<!-- 左右箭头 -->
<div class="swiper-button-prev swiper-button-white"
slot="button-prev"></div>
<div class="swiper-button-next swiper-button-white"
slot="button-next"></div>
<!-- 标记页数 -->
<div class="swiper-pagination"
slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
components: {
},
data () {
return {
swiperOption: {
// loop: false, // 因为swiper的loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。所以复制出来的slide导致原本设置的echarts的id不在是唯一的,echarts绘制的图也就显示不出来了。
// autoplay: false, // 完全关闭自动轮播
// 循环播放
loop: true,
// 循环方向
direction: "horizontal",
// 设置slider容器能够同时显示的slides数量(carousel模式)
slidesPerView: 1,
// slidesPerView: "auto",
// 设定为true时,active slide会居中,而不是默认状态下的居左(false)
centeredSlides: true,
// 滑动速度
speed: 2000,
// 在slide之间设置距离(单位px)
spaceBetween: 10,
// 设定初始化时slide的索引,Swiper默认初始化时显示第一个slide
initialSlide: 0,
grabCursor: true, // 设置为true 时,鼠标覆盖Swiper 时指针会变成手掌形状,拖动时指针会变成抓手形状。
// 自动播放
autoplay: {
// 隔×秒自动滑动一次
delay: 5000,
stopOnLastSlide: false,
// 设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。默认为true
disableOnInteraction: false
},
// loopedSlides: 1,// 指定要循环(重复)的幻灯片数量
// 左右箭头
navigation: {
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
},
// 标记页数
pagination: {
el: ".swiper-pagination",
renderBullet: function (index, className) {
// console.log(className, index + 1)
// return '<span class="' + className + '"><image src="upload/swiper' + (index + 1) + '.jpg"></span>'
return `<span class="${className}"><image src="${require('@/assets/images/echarts/dataBoard016/swiper' + (index + 1) + '.jpg')}"></span>`
},
bulletClass: 'my-bullet',//需设置.my-bullet样式 // pagination分页器内元素的类名。
bulletActiveClass: 'my-bullet-active',// 定义pagination 分页器内当前活动块的指示小点的类名。
clickable: true, // 设置为true时,点击分页器的指示点分页器会控制Swiper切换
},
},
}
},
mounted () {
},
watch: {
},
computed: {
},
methods: {
on_bot_enter () {
// swiper@4.5.1 vue-awesome-swiper@3.1.3
// this.$refs.mySwiper.swiper.autoplay.stop()
// swiper@5.2.0 vue-awesome-swiper@4.1.1
this.$refs.mySwiper.$swiper.autoplay.stop()
this.$refs.mySwiper.$swiper.navigation.$nextEl.removeClass('hide')
this.$refs.mySwiper.$swiper.navigation.$prevEl.removeClass('hide')
},
on_bot_leave () {
// swiper@4.5.1 vue-awesome-swiper@3.1.3
// this.$refs.mySwiper.swiper.autoplay.start()
// swiper@5.2.0 vue-awesome-swiper@4.1.1
this.$refs.mySwiper.$swiper.autoplay.start()
this.$refs.mySwiper.$swiper.navigation.$nextEl.addClass('hide')
this.$refs.mySwiper.$swiper.navigation.$prevEl.addClass('hide')
},
},
beforeDestroy () {
}
}
</script>
<style lang="less" scoped>
.center-top-swiper {
width: 800px;
height: 524px;
overflow: auto;
position: relative;
.swiper-container {
width: 100%;
height: 100%;
position: absolute;
// --swiper-theme-color: #ff6600;
// /* 设置Swiper风格 */
// --swiper-navigation-color: #00ff33;
// // /* 单独设置按钮颜色 */
--swiper-navigation-size: 24px;
/* 设置按钮大小 */
.swiper-slide {
// height: 80%;
// background-color: #bcc;
// height: 300px;
img {
height: 416px;
vertical-align: top;
}
}
}
}
</style>
<style lang="less">
/* 鼠标移入显示左右前进后退按钮 */
.swiper-container .hide {
opacity: 0;
}
/* 按钮显示的动画 */
.swiper-button-next,
.swiper-button-prev {
transition: opacity 0.5s;
}
// 指示器-分页器为图片
.swiper-container-horizontal {
.swiper-pagination-bullets {
// height: 100px;
width: 100%;
height: auto;
background: none;
bottom: 0;
display: flex;
.my-bullet {
height: auto;
background: none;
width: 100%;
// height: 100px;
background-color: #eee;
// 未选择的图片分页器 图片透明
>img {
width: 100%;
height: 100px;
vertical-align: middle;
display: inline-block;
// opacity 属性用于调整元素的透明度。它允许您控制图像的透明度或不透明度。s 透明度值可以在 0.0(完全透明)到 1.0(完全不透明)之间。
opacity: 0.5;
}
}
.my-bullet-active {
// 选中的图片不需要 图片透明
>img {
opacity: 1;
}
}
}
}
</style>
参考swiper对应的API:
renderBullet(index, className)_Swiper参数选项