分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap轮播数据 – 幻灯片链接问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_607_4@ 我搭起了自举旋转木马.
幻灯片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).

使用我开发的解决方案它不起作用,链接指向carousel数组元素,而不指向它的data-id标记.
例如,如果我有一个data-slide-id数字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); 
});