跳过Bootstrap Carousel中的隐藏幻灯片 [英] Skip hidden slides in Bootstrap Carousel
问题描述
我想知道是否有一种方法可以使用引导轮播来跳过隐藏的幻灯片。我可以使用ng-show()显示和隐藏幻灯片,但轮播仍然会转到空白幻灯片。只是想知道我是否可以为上一个或下一个功能做下一张幻灯片,其中ng-show()= true?
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>
推荐答案
也许可以帮助您:
看看引导程序轮播文档此处
Take a look at bootstrap carousel documentation here
$("selector").on("slide.bs.carousel", function(){
if($(nextslide).attr("ng-show") == false){
// go to next element
}
});
选中此链接。
您可以看看链接,并检查单击下一步或上一页按钮时发生了什么。该链接是w3schools的源代码,您可以在这里尝试。
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".
这篇关于跳过Bootstrap Carousel中的隐藏幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!