Bootstrap模态轮播显示当前的轮播项目，而不是第一个项目 [英] Bootstrap modal carousel displays current carousel item rather than the first item
本文介绍了Bootstrap模态轮播显示当前的轮播项目，而不是第一个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
-
当我单击以打开该引导模态轮播时，我总是希望看到第一项.
如果我打开幻灯片的模态和转盘，下次打开模态时它将保留在幻灯片上.
If I open the modal and carousel to a slide, it will remain on that slide the next time I open the modal.
示例场景:
- 开放模式
- 轮播到第三项
- 关闭模式
- 再次打开模式 显示
- 第3个项目
- Open modal
- Carousel to 3rd item
- Close modal
- Open modal again
- 3rd item is shown
如何确保打开模式时始终显示第一项?
我尝试了各种使用JQuery分配class="active"的方法，但是没有成功.
I've tried various ways of assigning class="active" with JQuery but haven't had any success.
您将在演示中找到的代码:
The code you'll find in the demo:
<body>
<div class="container">
<div class="wrapper">
<a class="btn btn-primary btn-lg" id="open-modal-button" data-target=".mymodal" data-toggle="modal">Open Me</a>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade mymodal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="carousel slide" data-interval="false" data-ride="carousel" id="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-12">
<h3>1st item</h3>
<button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window</button>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>2nd item</h3>
<button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window</button>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>3rd item</h3>
<button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window</button>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>4th item</h3>
<button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window</button>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" data-slide="next" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
</div>
</body>
感谢您的帮助！
推荐答案
1.您可以使用show.bs.modal事件在显示模式之前执行某些操作，旋转木马中查找特定的幻灯片编号.
1.You can use show.bs.modal event to do something before modal is shown, Docs.
2.And use .carousel(number) to go particular slide number in bootstrap Carousel.
使用此JS
$('.mymodal').on('show.bs.modal',function(){
$('.carousel').carousel(0)
})
这篇关于Bootstrap模态轮播显示当前的轮播项目，而不是第一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
