Can you please let me know how I can get the total and current number of the carousel slides in bootstrap like the image below?
I have an standard Bootstrap carousel and a <div>
with the .num
class to display the total and current number and I used this code to retrieve the numbers but it didn't go through
$('.num').html(){ $('#myCarousel').carousel({number}) }
Thanks
Update:
Please find a sample at this jsfiddle LINK
Which class is used to determine the current slide in bootstrap? Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties: direction : The direction in which the carousel is sliding (either “left” or “right” ).
You can simply use the data-interval attribute of the carousel class. It's default value is set to data-interval="3000" i.e 3seconds. All you need to do is set it to your desired requirements. Save this answer.
To insert multiple jQuery carousels to the same webpage, you need to create each carousel with a unique ID. In Amazing Carousel, Publish dialog, select the option Publish to Folder, then click Browse to select a folder to save the generated files. You need to set up a unique Carousel ID for each carousel.
The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.
Each slide
has a .item
class to it, you can get the total number of slides like this
var totalItems = $('.item').length;
Active slide
has a class named as active
, you can get the index of active slide
like this
var currentIndex = $('div.active').index() + 1;
You can update these values by binding the bootstrap carousel slid
event like this
$('#myCarousel').bind('slid', function() { currentIndex = $('div.active').index() + 1; $('.num').html(''+currentIndex+'/'+totalItems+''); });
EXAMPLE
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With