Bootstrap Carousel With Thumbnail

I have a bootstrap carousel which has html content display sliding. The issue here is, it works fine till 9th thumbnail, but when 11th and 12th is clicked it is sliding back to fir

Solution 1:

Use:

var parts = id_selector.split("-");
var id = parts[parts.length - 1]

Instead of

var id = id_selector.substr(id_selector.length -1);

Because your are getting only last character of the id which is 0 if you select 10.

Instead i have taken last word/value after -.

Working Fiddle

Solution 2:

At this line

var id = id_selector.substr(id_selector.length -1);

You are saying id_selector.length-1 which will always gives the last character of id_selector, so in case of id_selector_10you get id as 0 and same goes for id_selector_11.

If you replace it with below code it will work fine.

var idIndex = id_selector.lastIndexOf('-') + 1;// Get the index of character where digit starts
var id = id_selector.substr(idIndex); //Get id from that index

Updated Demo

Solution 3:

Change the below line from

var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);

To this: (id_selector.length-2)

var id = id_selector.substr(id_selector.length -2);
id = parseInt(id);

The only thing you will have to do is, to re-number the whole set of Carousel IDs like this

<li> <a id="carousel-selector-00" class="selected">
<li> <a id="carousel-selector-01">
<li> <a id="carousel-selector-02">
<li> <a id="carousel-selector-03">
<li> <a id="carousel-selector-04">............

This should be able to solve your problem! The length was being taken and subtracted by 1. But now, since you are subtracting 2 characters to find the ID, you will get 00 and 01 and then goes till 11 and 12.