引导轮播数据幻灯片链接问题

Question

我设置了引导轮播。 幻灯片 next 和 prev 工作正常，但幻灯片的链接不一样。

下面是带有幻灯片链接的轮播示例：

<!-- 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>

我想给链接中的 data-slide-to 标签指定一个特定的编号，然后它应该指向幻灯片编号（data-id) 呈现在 data-slide-to 中。

使用我开发的解决方案，它不起作用，并且链接指向轮播数组元素，而不是指向它的 data-id 标记。 例如，如果我有一个 data-slide-id 数字 1，它指向轮播数组的第一个元素。

有办法让链接指向特定幻灯片吗？

Answer 1

我想我不明白你想做什么。您可以在 jQuery 中使用 data-slide-to 覆盖默认功能来获取正确的图像。

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

按顺序排列链接

http://www.bootply.com/94396

链接不按顺序..

http://www.bootply.com/94397

但是，引导轮播旨在按顺序显示图像，并且显示相应链接的图像被设置为活动。因此您可以单击第三个链接打开第二个链接，但第二个链接将设置为活动..您也可以覆盖此功能。但是我不确定您为什么要这样做，因为在使用下一个和上一个按钮时可能会造成一些混乱。

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

例子

http://www.bootply.com/97089

对你来说，它会是这样的：

$('.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

您可以将您的链接（轮播指示器）放在 div 的外面，使用类 "carousel-inner"，如下所示，它对您来说非常有用。

** 这里轮播指示器在有序列表中。

  <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>

但是，如果您将指示器放在轮播元素之外，那么您将能够通过单击它来浏览它，但默认指示哪个幻灯片处于活动状态将不起作用。

这是carousel image slider 上的一个作品，你可以看看