Twitter Bootstrap Custom Carousel Indicators

customize the carousel indicators in Bootstrap 4

.carousel-indicators{
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 25px;
    padding: 8px;
    align-items: center;
}
.carousel-indicators li{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: black;
    opacity: 1;
    border: 0;
}
.carousel-indicators li.active {
    background-color: red;
}

twitter bootstrap custom carousel indicators

You could use media query -

@media screen and (max-width:480px) {
     .carousel-indicators li{
        background: url(images/triangle.png) no-repeat;
        background-size:120px 60px;
        width:120px;
        height:60px;
        cursor: pointer;
        text-align:center;
    }

How can I change Bootstrap carousel indicators into dots?

Yes, I think you need to write custom CSS for doing lines into dots.

You just need to override two properties (width and height) and add a new one, border-radius, to .carousel-indicators li.

Make width and height values equal eg: 10px each and give a border-radius of 100%.

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

Twitter-Bootstrap 5 carousel indicators and controls not working. Why?

You are getting an Uncaught TypeError: $(...).carousel is not a function because you called that function before you loading the boostrap.js.

Give this a try, first load the boostrap.js (you can load it from your local)

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

then add your custom script

<script type="text/javascript">
   $(function(){
       $('#product-carousel').carousel();
   });
</script>

Styling bootstrap carousel indicators

Something like this? Note that the width is not totally accurate because I just made it 33%.

.item img {  width: 100%;  height: auto}
.carousel {  position: relative;  width: 200px;  height: 100px;}
ol.carousel-indicators {  position: absolute;  bottom: 0;  margin: 0;  left: 0;  right: 0;  width: auto;}
ol.carousel-indicators li,ol.carousel-indicators li.active {  float: left;  width: 33%;  height: 10px;  margin: 0;  border-radius: 0;  border: 0;  background: transparent;}
ol.carousel-indicators li.active {  background: yellow;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators">    <li data-target="#carousel" data-slide-to="0" class="active"></li>    <li data-target="#carousel" data-slide-to="1"></li>    <li data-target="#carousel" data-slide-to="2"></li>  </ol>  <div class="carousel-inner" role="listbox">    <div class="item active">      <img src="http://placehold.it/200x100" alt="Slide 1">      <div class="carousel-caption">        Slide 1      </div>    </div>    <div class="item">      <img src="http://placehold.it/200x100" alt="Slide 2">      <div class="carousel-caption">        Slide 2      </div>    </div>    <div class="item">      <img src="http://placehold.it/200x100" alt="Slide 3">      <div class="carousel-caption">        Slide 3      </div>    </div>  </div>  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>    <span class="sr-only">Previous</span>  </a>  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Twitter Bootstrap carousel indicators triggered animation doesn't work properly

Your Code is Correct..
In my system this code working fine..

There is no definition for class "slide" in Bootstrap 3..But without "Slide" class ,carousel images will change with out any animation effect..

Add this script in you code

<script>
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

Check the Bootstrap CSS & JS Reference in you code..
and also check the order of the Reference files

You can follow this order:-

1. bootstrap.css
2. bootstrap-theme.css
3. jquery-1.9.1.js
4. bootstrap.js

The script block will not work with out JQ Library..So add JQ Library file correctly ..

And Ensure that the JQ file loaded before the script working..For that you can add the reference at the top of your page

Carousel

how to customize bootstrap carousel indicators ' - ' color

.carousel-indicators li
{
      background-color: #000 !important;
       /*more custom style*/
}

.carousel-indicators .active {
    background-color: grey !important;
}

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

---

Related Topics