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

Question

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

Answer 1

在隐藏方面，您可以使用 CSS 将其隐藏。 例如，

.carousel-indicators li { visibility: hidden; }

会使所有的点都被隐藏起来。

Answer 2

我认为最好的方法是编写自己的模板并通过 template-url 参数添加它。 例如：

 <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>

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 代码来隐藏引导程序 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;
}