如何删除或自定义Bootstrap轮播中的分页按钮

Question

我想删除Bootstrap轮播中的默认按钮（或白点）。 是否可以自定义它们？

Answer 1

就隐藏而言，您可以使用CSS将其隐藏起来。例如，

.carousel-indicators li { visibility: hidden; }

会隐藏所有的点。

Answer 2

我认为编写自己的模板并通过template-url param添加它的最佳方法。 E.g：

＆＃13;

＆＃13;

<div class="carousel-inner" ng-transclude></div>
<a role="button" 
   href 
   class="left carousel-control" 
   ng-click="prev()" 
   ng-class="{ disabled: isPrevDisabled() }" 
   ng-show="slides.length > 1">
    <span aria-hidden="true" 
          class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">previous</span>
</a>
<a role="button" 
   href 
   class="right carousel-control" 
   ng-click="next()" 
   ng-class="{ disabled: isNextDisabled() }" 
   ng-show="slides.length > 1">
    <span aria-hidden="true" 
          class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">next</span>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下为我工作

1. 在css文件bootstrap.min.css中搜索 .carousel-indicators li

2. 将 carousel-indicators li 的显示设置更改为 none

示例：

来自此.carousel-indicators li{display:inline-block;}

到此.carousel-indicators li{display:none;}

将不再显示点。

Answer 4

只需从轮播声明中删除indicators部分：

<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

Answer 5

1）防止切换

$('.carousel-indicators li').each(function(){
    $(this).carousel('pause');
});

2）删除活动类..

$('.carousel-indicators .active').removeClass('active')

Answer 6

写下面提到的CSS代码以隐藏bootstrap 4.5的上一个/下一个指示符

.carousel-control-next-icon, .carousel-control-prev-icon{
  display:none;
}

或

.carousel-control-next-icon, .carousel-control-prev-icon{
  visibility:hidden;
}

下面是隐藏指示器的CSS代码

 .carousel-indicators li
{
  display: none;
}