Bootstrap 模态轮播显示当前轮播项目而不是第一个项目

Question

我希望在单击打开此 bootstrap 模式轮播时始终看到 第一项 。
如果我打开模式和轮播到幻灯片，下次我打开模式时它会保留在该幻灯片上。

示例场景：

打开模式
轮播到 第 3 个项目
关闭模态
再次打开模式
显示第 3 项

如何确保 第一项 在打开模式时始终显示？

我已经尝试了各种方法将 class="active" 分配给 JQuery 但没有成功。

这是一个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>

感谢您的帮助！

Answer 1

1.You 可以使用 show.bs.modal 事件在模态显示之前做一些事情，Docs.
2.And 使用 .carousel(number) 转到 bootstrap Carousel 中的特定幻灯片编号。

使用这个 JS

$('.mymodal').on('show.bs.modal',function(){
    $('.carousel').carousel(0)
})

Bootstrap 模态轮播显示当前轮播项目而不是第一个项目

Bootstrap modal carousel displays current carousel item rather than the first item

jquery

carousel

twitter-bootstrap

bootstrap-modal

这是一个Demo