当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Bootstrap carousel with captions and thumbnails

问题描述:

I am using a bootstrap snippet to make a carousel slider which has thumbnails and captions.

That is from http://bootsnipp.com/snippets/featured/carousel-extended-320-compatible

I tried to make another carousel on the same page with changing the javascript. [http://jsfiddle.net/djotpxgb/][2]

The first one works, but second one does not work properly.

If some one have the solution, please let me know.

Thank you,

网友答案:

It is a simple problem caused by placing two carousels on the same page with somewhat incorrect values for both to work correctly.

On every slide change, the text below the carousel is changed like this:

var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-' + id).html());

So, it takes the number from slide data attribute, and looks for appropriate slide-content element.

Please take a look what happens for the second carousel:

  • First, in $('#myCarousel2').on('slid.bs.carousel'... it tries to take slide data like this:

    var id = $('.item.active').data('slide-number');

    which ends up with getting data from the first carousel; you can work around this easily changing the selector, like this for example:

    var id = $('#myCarousel2').find('.item.active').data('slide-number');

  • Now, it will take the data-slide-number from these divs:

    <div class="item" data-slide-number="6"> <div class="item" data-slide-number="7"> ...

  • Eventually, it will try to set the slide text to whatever is stored under the #slide-content2-<id> element, so it will look for #slide-content2-6 and so on

  • But there are only slide-content2-0 up to slide-content2-3 elements, so it will try to set undefined as the carousel-text2 html, which will simply fail

So concluding, you need to change the jQuery selector, and then make sure your data-slide-number in the second carousel slides will match anything in slide-content2 elements.

Here's an example how to solve this

网友答案:

Your thumbnail links have duplicate ID's, as an example, each carousel has a link with an ID of "carousel-selector-1", etc.:

 <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
分享给朋友:
您可能感兴趣的文章:
随机阅读: