James Ives February 2016

Problems with Bootstrap Carousel

I'm having problems with a Bootstrap carousel that I'm using. I'm using an example I found on Bootply that uses thumbnail navigation to select which image is visible. The problem I'm having is that once the item id increases into double digits the substring line in the jQuery prevents it from displaying correctly. I assume because it's cutting off one of the digits.

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

// when the carousel slides, auto update
$('#myCarousel').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');
});

I'm not quite sure where I'm going wrong, any help would be appreciated.

Here is the entire Bootply link: http://www.bootply.com/5Ndty8EZZ2

Answers


WayNe February 2016

The problem is your html div <div class="carousel-inner"> is closing to early. You should close it after your last <div class="item" data-slide-number="12"> div.

Edit:

There is also a problem in how you reed the slide-number after clicking on one thumb. Just add the data-slide-number attribute to every li like this:

<li> 
   <a id="carousel-selector-1"  data-slide-number="1">
       <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
   </a>
</li>

And then use var id = $(this).attr('data-slide-number'); inside your click function:

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){

  var id = $(this).attr('data-slide-number');

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

Link: http://www.bootply.com/dqUl7lt89B

Post Status

Asked in February 2016
Viewed 2,547 times
Voted 10
Answered 1 times

Search




Leave an answer