swiper分页器自定义
实现:
<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默认初始化时显示第一个slideinitialSlide: 0,grabCursor: true, // 设置为true 时,鼠标覆盖Swiper 时指针会变成手掌形状,拖动时指针会变成抓手形状。// 自动播放autoplay: {// 隔×秒自动滑动一次delay: 5000,stopOnLastSlide: false,// 设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。默认为truedisableOnInteraction: 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.1this.$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.1this.$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参数选项