Slider Indicator
Inside the div with the class name .carousel
take an ordered list ol with the class name .carousel-indicators
and inside that tale list item li with data-target="#myCarousel"
here myCarousel
is the id of the slider container div and then take data-slide-to="0"
here the 0 is the indicator of the slider no here will be 0, 1, 2 and so on according to the slider no and give the class name .active
which one you want to make the first slide and in the slide also you have to use the class name .active
Example:
-
-
-
Slider body:
Take a div with the class name .carousel-inner
and inside that take many dive for the slider item with the class name .item
and which one you want to make the first slider have to use .active
on the item and inside that you have to use image item
Example:
Left slider indicator button:
Now inside the div with the class name .carousel
take an anchor tag with the class name .left
and .carousel-control
and inside href give the slider id. and inside that you can use glyphicon or text of any icon.
Example:
Previous
Right slider indicator button:
Now inside the div with the class name .carousel
take an anchor tag with the class name .right
and .carousel-control
and inside href give the slider id. and inside that you can use glyphicon or text of any icon.
Example:
Next
Bootstrap 3 Slider with Captions
Inside the div with the class name .item
take a div with the class name .carousel-caption
and inside that, you can take heading pr paragraph, etc
Example:
Chicago
Thank you, Chicago!
Now the full code Example:
-
-
-
Chicago
Thank you, Chicago!
Chicago
Thank you, Chicago!
Chicago
Thank you, Chicago!
Previous
Next
Now some script used in Bootstrap 3 Slider
Activate Carousel
To make the slider active use script with the slider class name (here I have used myCarousel)
Example:
// Activate Carousel
$("#myCarousel").carousel();
Enable Carousel Indicators
To make the slider indicator enable through the script you can use the script described below with the id of the slider (here I have used myCarousel)
Example:
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
Enable The Slider Control
to make the slider controls enable through script use the below script with the id of the slider (here I have used myCarousel)
Example:
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("next");
});
Sliders Options Through script
Now the below script is for some options for the Bootstrap 3 Carousel slider
.carousel("cycle");
.carousel("pause");
.carousel(number);
.carousel("prev");
.carousel("next");
In this post Bootstrap 3 Carousel slider, we have made the bootstrap slider, I hope the post helped you please provide your comment to make the website better and more useful,
Thanks for Reading