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

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>

我想给一个特定号码的数据载玻片到标记为链接,然后,它应该指向到幻灯片编号(数据编号)目前进入数据载玻片到.

使用我开发的解决方案,它不起作用,链接指向carousel数组元素,而不指向它的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); 
});