Vue3.2中使用swiper实现层叠式轮播图

最新推荐文章于 2024-03-21 11:03:35 发布

发呆的薇薇°

最新推荐文章于 2024-03-21 11:03:35 发布

阅读量3.3k

点赞数 1

分类专栏： Vue3.2 Swiper 文章标签： vue3 swiper

本文链接：https://blog.csdn.net/Shivy_/article/details/132427032

版权

Vue3.2 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

Swiper

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中使用Swiper库创建带有自动播放和动画效果的轮播图，展示了HTML模板、Scriptsetup部分的代码以及CSS样式。

摘要由CSDN通过智能技术生成

介绍

在 vue3 中使用 swiper 实现缩略图的轮播图效果，具体如下图所示：
在这里插入图片描述

代码

<template>
	<div class='index'>
		 <div class="banner-box">
	        <swiper
	        :autoplay="state.autoplay"
	        :loop="state.loop"
	        :speed="state.speed"
	        :slidesPerView="state.slidesPerView"
	        :loopedSlides="state.loopedSlides"
	        :centeredSlides="state.centeredSlides"
	        :watchSlidesProgress="state.watchSlidesProgress"
	        @setTransition="setTransition"
	        @progress="progress"
	      >
	        <swiper-slide style="width: 520px;" v-for="(item,index) in state.imgList" :key="index">
	          <img :src="item" alt="" style="width: 520px;">
	        </swiper-slide>
	      </swiper>
      </div>
	</div>
</template>
<script setup>
	const state = reactive({
	  autoplay: false,
	  watchSlidesProgress: true,   //计算每个slide的progress(进度、进程)
	  loop: true,
	  slidesPerView: "auto",
	  loopedSlides: 5,   //在loop模式下使用 slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
	  centeredSlides: true,   //活动块会居中，而不是默认状态下的居左。
	  imgList: [
	    './img1.png',
	    './img2.png',
	    './img3.png',
	    './img4.png',
	    './img5.png',
	  ]
	})
	const setTransition = (swiper, transition) => {
      // 每当设置Swiper开始过渡动画时执行。
      // transtion获取到的是Swiper的speed值。
      for (var i = 0; i < swiper.slides.length; i++) {
        var slide = swiper.slides.eq(i);
        slide.transition(transition);
      }
    };
    const progress = (progress) => {
      for (var i = 0; i < progress.slides.length; i++) {
        var slide = progress.slides.eq(i);
        var slideProgress = progress.slides[i].progress;
        var modify = 1;
        if (Math.abs(slideProgress) > 1) {
          modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
        }
        var translate = slideProgress * modify * 240 + "px";
        var scale = 1 - Math.abs(slideProgress) / 5;
        var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        slide.transform("translateX(" + translate + ") scale(" + scale + ")");
        slide.css("zIndex", zIndex);
        slide.css("opacity", 1);
        if (Math.abs(slideProgress) > 3) {
          slide.css("opacity", 0);
        }
      }
    };
</script>
<style lang="less" scoped>
.banner-box {
	width: 900px;
	margin: 0 auto;
	.swiper-slide {
		width: 520px;
		img {
			width: 520px;
		}
	}
}
</style>