vue3 设置轮播图，每页显示3个图，鼠标hover可以放大

组件代码如下：(可以自行调整css）

实现的效果是，每页显示3个图片，点击可以切换位置，hover可以放大，如果觉得放大效果不明显，可以修改注释部分的css参数,

还有一个效果是鼠标拖动也可以切换图片的位置。

<template>
<div class="carousel">
<div class="">
<div class="caroursel-title">
<span class="text_2">轮播图demo</span><br/>
</div>
<div class="caroursel-text">
<span class="text_1">每页显示3个图片</span >
</div>
</div>
<div class="carousel__container">
<Carousel :items-to-show="3" :wrap-around="true">
<Slide v-for="image in images" :key="image.id" style="width: 29%; margin: 0 20px;">
<img :src="image.src" :alt="image.alt" class="carousel__item" />
</Slide>
<template #addons>
<Navigation />
</template>
</Carousel>
</div>
</div>
</template>
<script>
import '@/assets/CarouselContainer.css'
import { defineComponent } from 'vue'
import { Carousel, Navigation, Slide } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
export default defineComponent({
name: 'WrapAround',
components: {
Carousel,
Slide,
Navigation,
},
data() {
return {
images: [
{ id: 1, src: require("@/assets/image1.png"), alt: 'Image 1' },
{ id: 2, src: require("@/assets/image2.png"), alt: 'Image 2' },
{ id: 3, src: require("@/assets/image3.png"), alt: 'Image 3' },
{ id: 4, src: require("@/assets/image4.png"), alt: 'Image 4' },
{ id: 5, src: require("@/assets/iamge5.png"), alt: 'Image 5' },
...
]
};
},
})
</script>
<style>
.test_div {
display: flex;
align-items: center;
width: 80%;
}
.carousel__container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10%;
}
.carousel__item {
width: 300px;
height: 200px;
background-color: #642afb;
color: white;
font-size: 20px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s; /* 添加过渡效果 */
}
.carousel__item:hover {
transform: scale(1.2); /* 鼠标悬停时放大图片 */
}
.carousel__item--center {
width: 400px;
height: 300px;
}
.carousel__slide {
padding: 10px;
}
.carousel__viewport {
overflow: hidden;
margin: 0 67px;
}
.carousel__prev,
.carousel__next {
box-sizing: content-box;
border: 5px solid transparent;
color: white;
}
.carousel__prev:hover,
.carousel__next:hover {
color: var(--vc-nav-color-hover);
color: white;
}
</style>