swiper 去掉轮播图上的小点点小圆圈（完美解决方案）

最新推荐文章于 2024-06-30 15:38:24 发布

夏小花花

最新推荐文章于 2024-06-30 15:38:24 发布

阅读量703

点赞数 6

分类专栏：微信小程序 Vue javascript 文章标签：微信小程序 uni-app vue javascript

本文链接：https://blog.csdn.net/xiaohua616/article/details/138078891

版权

javascript 同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

微信小程序

14 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

本文讲述了如何在使用Swiper插件的轮播图中移除默认的小圆圈标记，通过修改indicator-dots属性设置为false来实现这一效果，提供了详细的代码示例。

摘要由CSDN通过智能技术生成

问题描述

大家好！我是夏小花，今天是2024年4月22日|农历三月十四，今天这篇博文主要解决swiper 去掉轮播图上的小点点小圆圈，具体解决方案如下所示

解决方案

问题复现

现在现在可以看到轮播图上是有小小圆圈的，但是觉得有点不好看，向把他去掉
在这里插入图片描述
这是源代码

<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
	:duration="duration">
	<swiper-item v-for="(lunbo,indexl) in lunboList">
		<image style="width: 100%" :src="lunbo"></image>
	</swiper-item>
</swiper>

处理方案

我们需要修改一下indicator-dots的属性值为false，如下所示：
indicator-dots：表示显示标签的样式，比如说小圈圈

:indicator-dots="false"

详细代码如下：

<swiper class="swiper" :indicator-dots="false" :autoplay="autoplay" :interval="interval" :duration="duration">
	<swiper-item v-for="(lunbo,indexl) in lunboList">
		<image style="width: 100%" :src="lunbo"></image>
	</swiper-item>
</swiper>