Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Get total and Current Slide Number of Carousel

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?

Image showing current page and total number of pages

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

like image 249
Mona Coder Avatar asked Jul 24 '13 01:07

Mona Coder


People also ask

Which class is used to determine the current slide in bootstrap?

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” ).

How do you set a data-interval in Carousel?

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.

How do I put multiple carousel on one page?

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.

What is the default carousel interval in milliseconds?

The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.


1 Answers

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

like image 175
Khawer Zeshan Avatar answered Nov 13 '22 03:11

Khawer Zeshan