Bootstrap carousel with thumbnail

Question

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 first content box instead of respective id.

here is the script used

$('#myCarousel').carousel({
              pause: true,
              interval: false
            });

            // handles the carousel thumbnails
            $('[id^=carousel-selector-]').click( function(){
              var id_selector = $(this).attr("id");
              var id = id_selector.substr(id_selector.length -1);
              id = parseInt(id);
              $('#myCarousel').carousel(id);
              $('[id^=carousel-selector-]').removeClass('selected');
              $(this).addClass('selected');
            });

            $('#myCarousel').bind('slide.bs.carousel', function (e) {
              var slideFrom = $(this).find('.active').index();
              var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive');
              videoContent.html( videoContent.html() );
            });

            // when the carousel slides, auto update
            $('#myCarousel').on('slid.bs.carousel', function (e) {
              var id = $('.item.active').data('slide-number');
              id = parseInt(id);
              $('[id^=carousel-selector-]').removeClass('selected');
              $('[id=carousel-selector-'+id+']').addClass('selected');
            });

Any help is appreciated!

DEMO

Answer 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

Answer 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_10 you 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

Answer 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.