Roberto Rizzi Roberto Rizzi - 4 months ago 35
Javascript Question

Bootstrap carousel data-slide link issue

I put up the bootstrap carousel.
The slides next and prev works correctly but it isn't the same for the slides' link.

Below there is the carousel example with slides' link:

<!-- Carousel -->
<div id="seriesCarousel" class="carousel slide">
<div class="container">
<div class="carousel-inner">
<div class="item" data-id="2">
<article>
</article>
</div>
<div class="item" data-id="5">
<article>
</article>
</div>
</div>
</div>
</div>

<!-- Slides' links -->
<div class="accordion-inner">
<ul>
<li data-target="#seriesCarousel" data-slide-to="2">
<a href="javascript: void(0);"> name 1</a>
</li>
<li data-target="#seriesCarousel" data-slide-to="5">
<a href="javascript: void(0);"> name 2</a>
</li>
</ul>
</div>


I would like to give a specific number to the data-slide-to tag into the links and then, it should point up to the slide number (data-id) present into the data-slide-to .

With the solution that i've developed it doesn't work and the links point up to the carousel array element and not to the data-id tag of it.
For example, if i have a data-slide-id number 1, it point up to the element number one of the carousel's array.

There's a way to do that the links point up to a specific slide?

Answer

I guess I don't understand what your trying to do. You could do something in jQuery that overides the default functionality using your data-slide-to to get the correct image..

$('.carousel-indicators li').click(function(e){
    e.stopPropagation();
    $('#myCarousel').carousel($(this).data('slide-to')-1); 
});

With the links in order

http://www.bootply.com/94396

With the links not in order..

http://www.bootply.com/94397

However The bootstrap carousel is designed to show images in order and which ever image is showing the corresponding link is set to active.. So you can click on the third link to open up the second link but the second link is going to be set to active.. You could override this functionality too. However I'm not sure why you would do it because it could cause some confusion when using the next and previous buttons.

Update 2

$('.carousel-indicators li').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide-to');
  $('.carousel-inner .item').each(function(index){
    if($(this).data('id') == goTo){
      goTo = index;
      return false;
    }
  });

    $('#myCarousel').carousel(goTo); 
});

Example

http://www.bootply.com/97089

For you it would be something like:

$('.menu-right-club .accordion-inner li').click(function(e){
     e.stopPropagation();
     var goTo = $(this).data('slide-to');
     $('#seriesCarousel .carousel-inner .item').each(function(index){
         if($(this).data('id') == goTo){
             goTo = index;
             return false;
         } 
     });            
    $('#seriesCarousel').carousel(goTo); 
});
Comments