Question

当我点击打开此引导模式轮播时，我想总是看到第一项。
如果我将模态和轮播打开到幻灯片，下次打开模态时它将保留在幻灯片上。

示例方案：

打开模态
旋转木马到第3项
关闭模式
再次打开模式
显示第3项

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

我尝试过各种方法将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.您可以在显示模态Docs之前使用show.bs.modal事件执行某些操作。
2.并使用.carousel(number)在bootstrap Carousel中输入特定的幻灯片编号。

使用这个JS

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

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

这是Demo

1 个答案: