Bootstrap modal carousel 显示当前轮播项目而不是第一个项目答案

【问题标题】：Bootstrap modal carousel displays current carousel item rather than the first itemBootstrap modal carousel 显示当前轮播项目而不是第一个项目
【发布时间】：2015-09-14 01:55:47
【问题描述】：

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

示例场景：

打开模式
轮播到第三项
关闭模态
再次打开模态
第三项已显示

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

我尝试了各种使用 JQuery 分配 class="active" 的方法，但都没有成功。

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

感谢您的帮助！

【问题讨论】：

标签： jquery twitter-bootstrap carousel bootstrap-modal

【解决方案1】：

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

使用这个 JS

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

【讨论】：