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

Question

I was wondering if there was a way to skip through hidden slides using a bootstrap carousel. I am able to show and hide the slides using ng-show() however the carousel still goes to the blank slides. Just wondering if i could make a function for prev or next that goes to next slide where 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>

Answer 1

Maybe this can help you:

Take a look at bootstrap carousel documentation here

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

Check this link .

You can take a look at the link and check what is going on when you click on the next or prev buttons. The link is a source to w3schools where you can "try it".