CODEWITHSUNDEEP
twitter-bootstrapthumbnailscarousel
TheVic
TheVic

Reputation: 313

Bootstrap 3, thumbnailed navigation carousel. Selected thumnail

I have used this example: http://www.bootply.com/79859 I copied it, and renamed #MyCarousel in #MyCarousele, also I deleted uneccesary slides. But it do not work corectly.

When it slides automatically or I slide it thumbnails do not updates. I think problem is somewhere here:

<script>
     $('#myCarousele').carousel({
     interval: 4000
     });

     // 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);
     $('#myCarousele').carousel(id);
     $('[id^=carousel-selector-]').removeClass('selected');
     $(this).addClass('selected');
     });

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

Look my bootply code: http://www.bootply.com/0cDXKzY1ez Thanks.

Upvotes: 1

Views: 4325

Answers (1)

Sam
Sam

Reputation: 687

In Bootstrap 3.2, you need to change 'slid' to 'slid.bs.carousel'

Here would be your new code for that function: 

$('#myCarousele').on('slid.bs.carousel', function () {   

     var id = $('.item.active').data('slide-number');
     id = parseInt(id);
     $('[id^=carousel-selector-]').removeClass('selected');
     $('[id^=carousel-selector-'+id+']').addClass('selected'); 

});

Note that the example you linked is using Bootstrap 3.0 and you are using Bootstrap 3.2, you can find the commit that caused the change here i believe.

Update

Based on your update in the comments, try this:

$('#myCarousele').on('slid.bs.carousel', function (e) {
    var id = $(this).find('.item.active').data('slide-number');

    id = parseInt(id);
    $('[id^=carousel-selector-]').removeClass('selected');
    $('[id^=carousel-selector-'+id+']').addClass('selected');
    });

Upvotes: 3

Related Questions