How to remove or customize the pagination button in a Bootstrap carousel

Question

I want to remove the default button (or white dot) in the Bootstrap carousel. Can I customize them?

Answer 1

In terms of hiding, you can use CSS to hide it. For instance,

.carousel-indicators li { visibility: hidden; } 

make all dots be hidden.

Answer 2

I think the best way is to write your own template and add it using the param url template. For instance:.

 <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

• find . li carousel indicators in css file bootstrap.min.css

• change the display setting of carousel indicators li to none

Example:

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

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

Points will no longer be displayed.

Answer 4

Just remove the indicators part from the 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 switching

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

2) delete the active class.

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