vue3封装轮播图组件

需求:

封装一个轮播图组件

功能:

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