Bootstrap carousel data-slide link issue

Question

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 1

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); 
});

Answer 2

You can put your links ( carousel indicators ) just outside the div with class "carousel-inner" like below and it will work pretty fine for you.

** Here the carousel indicators are in a ordered list.

  <div class="carousel slide" id="theCarousel" data-interval="3000">
        <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">Resting In Style</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">The Dude Look</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">How z It??</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
            </div> 
            <a href="#theCarousel" class="carousel-control left" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
            <a href="#theCarousel" class="carousel-control right" data-slide="next">
                    <span class="icon-next"></span>
                </a>            
    </div>

But if you put the indicators outside the carousel element then you will be able to navigate through it by clicking on it, but the default indication of which slide is active will not work.

Here is a piece of work on carousel image slider you can take a look