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

Question

I'd like to remove the default button (or white dot) in Bootstrap carousel. Is it possible to customize them?

Answer 1

In terms of hiding, you can use CSS to make it hidden. For example,

.carousel-indicators li { visibility: hidden; }

would make all the dots be hidden.

Answer 2

I think the best way to write your own template and add it by template-url param. Eg:

 <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

The following worked for me

1. search for .carousel-indicators li in the css file bootstrap.min.css

2. change the display setting for the carousel-indicators li to none

example:

from this .carousel-indicators li{display:inline-block;}

to this .carousel-indicators li{display:none;}

The dots will no longer be displayed.

Answer 4

Just remove indicators part from carousel declaration:

<!-- 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) prevent from switching

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

2) remove the active class..

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

Answer 6

Write below mentioned CSS code to hide prev/next indicator for bootstrap 4.5

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

or

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

Below is the CSS code to hide indicator

 .carousel-indicators li
{
  display: none;
}