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:-
- bootstrap.css
- bootstrap-theme.css
- jquery-1.9.1.js
- 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
How to Have Slanted Box-Shadows Using Only CSS
Mozilla 3.0.8 and Chrome Height in Em Bug Workaround
Remove Borders of Input Jquery Mobile
How to Manage My CSS as Modx Resources
How to Make Padding:Auto Work in CSS
How to Render Bootstrap Dropdown Above the Object
How to Write A:Visited in Inline CSS
Stop Link's :Before Content from Being Underlined by Rule Applied to the Link
Centering a Single Column Using Bootstrap 4 Grid System
Which Border Radius Property Will Work in IE9
Angular 6 Material - Hues and How to Change the Color of Mat Radio Button
Css3 Grid Layouts: New Row After Specific Element - Possible
Transform Scale Property Not Working in Chrome & Safari
CSS Modules - Exclude Class from Being Transformed