vue3封装轮播图组件

最新推荐文章于 2025-05-16 22:07:57 发布

梅花十三儿

最新推荐文章于 2025-05-16 22:07:57 发布

阅读量463

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/128715807

版权

本文详细介绍了如何在Vue3中封装一个轮播图组件，包括上下切换图标的功能，底部小圆点的点击切换，以及实现无限滚动和高亮切换效果。通过组件传值，利用CSS实现过渡动画，使轮播图功能完整且交互流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:

封装一个轮播图组件

功能:

1.有上下切换的点击图标,可以实现点击切换上下张

2.底部有小圆点,对应每一张图片,图片切换,小圆点对应切换

3.小圆点可以点击切换,对应的图片也会切换

功能实现

父组件通过自定义属性传值传递包含图片的数组变量,

子组件通过prorps接收数组,循环渲染数组中的图片

新建公共组件src/components/carousel/index.vue

html部分:

轮播图图片部分由ul套li套img构成
上一张下一张图片由
底部小圆点

<template><div class="home-banner"><div class="carousel"><!--轮播图图片部分 --><ul class="carousel-body"><li class="carousel-item fade"><img src="" alt="" /></li></ul><!-- 上一张下一张箭头图标 --><a href=" javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a><a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a><!-- 底部小圆点 --><div class="carousel-indicator"><span class="active"></span><span></span><span></span><span></span><span></span></div></div></div>
</template>

css部分