jquery - Bootstrap轮播数据幻灯片链接问题

Question

我放置了 Bootstrap 轮播。 下一张和上一张幻灯片工作正常，但幻灯片的链接不一样。

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

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

但是， Bootstrap 轮播设计为按顺序显示图像，并且显示相应链接的图像将设置为事件状态。因此，您可以单击第三个链接来打开第二个链接，但第二个链接将设置为事件状态。您也可以覆盖此功能。但是我不确定您为什么要这样做，因为在使用下一个和上一个按钮时可能会造成一些困惑。

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