CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3carousel
Asme Just
Asme Just

Reputation: 1337

How to remove or customize the pagination button in Bootstrap carousel

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

enter image description here

Upvotes: 9

Views: 31208

Answers (6)

ravindra
ravindra

Reputation: 47

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

Upvotes: 0

valex
valex

Reputation: 5769

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>

Upvotes: 1

Dimitri Schultheis
Dimitri Schultheis

Reputation: 168

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

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

Upvotes: 4

user3526416
user3526416

Reputation: 21

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.

Upvotes: 2

Gavin Ching
Gavin Ching

Reputation: 328

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.

Upvotes: 31

Seth McClaine
Seth McClaine

Reputation: 10030

1) prevent from switching

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

2) remove the active class..

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

Upvotes: 0

Related Questions