需求:
封装一个轮播图组件
功能:
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">
.hom