微信小程序====＞swiper轮播自定义指示点的style

最新推荐文章于 2025-05-19 14:53:27 发布

原创最新推荐文章于 2025-05-19 14:53:27 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css3 #html

微信小程序专栏收录该内容

32 篇文章

订阅专栏

这篇博客介绍了如何使用 CSS 配置 Swiper 滑动组件的默认和选中状态下的指示点样式。内容包括指示点的尺寸、背景颜色、边框等细节，并展示了选中时的增强视觉效果，如增大尺寸、添加边框及使用不同的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

/* 默认指示点的样式 */
.swiper .wx-swiper-dot {
  width: 15rpx;
  height: 15rpx;
  background: rgb(119, 119, 119);
  border-radius: 15rpx;
}
 
/* 选中指示点的样式 */
.swiper .wx-swiper-dot.wx-swiper-dot-active {
    width: 30rpx;
    height: 15rpx;
    background: rgb(0, 0, 0);
    border-radius: 15rpx;
    border: 1px solid teal;
}