vue3封装轮播图组件

本文详细介绍了如何在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部分

  • 轮播图切换通过类名fade的opacity实现
  • 加上transition使变化更加顺滑
  • 给span设置border-radius变成小圆点
<style scoped lang="less">
.home-banner 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值