el-carousel选中小圆点
时间: 2023-08-17 15:16:22 浏览: 117
要在el-carousel中选中小圆点,你可以使用自定义指示器样式来实现。根据引用\[2\]中的代码,你可以添加以下样式来自定义指示器的外观:
```css
.el-carousel__indicator--horizontal .el-carousel__button {
width: 10px;
height: 10px;
background: transparent;
border: 1px solid #ffffff;
border-radius: 50%;
opacity: 0.5;
}
.el-carousel__indicator--horizontal.is-active .el-carousel__button {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
opacity: 1;
}
```
将这些样式添加到你的CSS文件中,或者直接在你的Vue组件中的`<style>`标签中添加。这样,当你使用el-carousel时,选中的小圆点将会显示为白色,并且具有不同的样式以区分选中和未选中状态。
#### 引用[.reference_title]
- *1* [教程6 Vue3+Element Plus el-carousel制作轮播图](https://blog.csdn.net/boxuestudio/article/details/129099623)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue+elementUI 走马灯自定义(指示器设为圆点,设置手动滑动切换)](https://blog.csdn.net/Thea12138/article/details/123082968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文