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

JavaScript
,
1

  • 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:

  1. Open modal
  2. Carousel to 3rd item
  3. Close modal
  4. Open modal again
  5. 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!

2

This does not sound like an HTML/CSS issue. I have moved this topic into the JS category.

3

Hi Dan,

You need a little bit of JavaScript for that. Add this just before the closing </body> tag on your page:

<script>
  $('.mymodal').on('hidden.bs.modal', function (e) {
    $('.carousel').carousel(0);
  });
</script>

What this does is to listen for the ‘hidden’ event from the modal, which indicates that it’s been closed. It then calls the carousel() method with the index of the first slide, which resets it to the beginning.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.