在Bootstrap Carousel中跳过隐藏的幻灯片

时间:2016-08-01 15:44:07

标签: javascript twitter-bootstrap carousel

我想知道是否有办法使用bootstrap轮播跳过隐藏的幻灯片。我能够使用ng-show()显示和隐藏幻灯片,但旋转木马仍然会转到空白幻灯片。只是想知道我是否可以为prev或next做一个功能,进入下一张幻灯片,其中ng-show()= true?

<div class="carousel-inner" role="listbox">
  <div class="item active" ng-show="solution.check">
    <img src="img_chania.jpg" alt="Chania" width="460" height="345">
  </div>

  <div class="item" ng-show="solution.check">
    <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

1 个答案:

答案 0 :(得分:1)

也许这可以帮到你:

查看bootstrap carousel文档here

$("selector").on("slide.bs.carousel", function(){
    if($(nextslide).attr("ng-show") == false){
        // go to next element
    }
});

选中link

  

您可以查看链接并查看单击下一个或上一个按钮时发生的情况。该链接是w3schools的源,您可以“尝试”。