CODEWITHSUNDEEP
jquerytwitter-bootstrap
James Ives
James Ives

Reputation: 3355

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

Upvotes: 2

Views: 313

Answers (1)

om1
om1

Reputation: 166

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

Upvotes: 1

Related Questions