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

问题

I would like to always see the 1st item when I click to open this bootstrap modal carousel.
If I open the modal and carousel to a slide, it will remain on that slide the next time I open the modal.

Example scenario:

Open modal
Carousel to 3rd item
Close modal
Open modal again
3rd item is shown

How can I make sure that the 1st item is always shown upon opening the modal?

I've tried various ways of assigning class="active" with JQuery but haven't had any success.

Here is a Demo

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>

Thanks for your help!

回答1:

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.

use this JS

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

来源：https://stackoverflow.com/questions/32556326/bootstrap-modal-carousel-displays-current-carousel-item-rather-than-the-first-it

标签

jquery

twitter-bootstrap

carousel

bootstrap-modal