Question

I have a modal containing a carousel with 2 slides with login and signup forms.

I want to achieve the following:

• When user clicks a “Login” link in site header, the modal should open
  and carousel should slide to the “login” slide (it’s at the index of
  0).
• When user clicks a “Signup” link in site header, the modal should
  open and carousel should slide to the “signup” slide (it’s at the
  index of 1)
• Whenever a slide transition occures, the modal title text
  is changed (binding to the “slid” event of the carousel)

However, I cannot seemt to get this to work. I think the problem is with the order of how all these events happen.

Here’s the basic code:

// Initialize modal
$('.modal').modal()

// Initialize carousel
$('.carousel').carousel()
$('.carousel').carousel('pause') // Pause the carousel so it doesn't auto-rotate

$('.signuplink').on('click', function() {
    $('.carousel').carousel(1).on('slid', function() {
        $('.modal .modal-title').html('Sign Up');
        $('.modal').modal('show');
    });
});

But it does not work. The “slid” event never occures when the modal is not shown beforehand. So I tried to show the modal and then slide the carousel, binding to the “shown” event of the modal, but while it does slide to the next slide, the “slid” event does not occur.
What is even more weird, is that the close button on the modal does not work anymore, like all event handling is messed up…

EDIT: It seems that the “shown” event is not fired when the modal is being shown the first time. It fires only when I hide the modal. When I open it again, “shown” seems to be fired on the correct moment.

Answer 1

First of all, there is too much nesting.

You should almost never nest event binding inside a click event – or any event – because you will add another listener each time you click.

This is a solution.

var $myModal = $('#myModal').modal({show: false});
var $myCarousel = $('#myCarousel').carousel({'interval': false});

$('.btn').each(function() {
    var $this = $(this);
    var index = $(this).date('slide-index');
    $this.click(function() {
        $myModal.modal('show');
        $myCarousel.carousel(index);
    });
});

<button class="btn" data-slide-index="0">0</button>
<button class="btn" data-slide-index="1">1</button>

<div id="myModal" class="modal fade">
    <div id="myCarousel" class="carousel">
        <div class="carousel-inner">
            <div class="active item">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h3>Title 0</h3>
                </div>
                <div class="modal-body">
                    <p>0</p>
                </div>
            </div>
            <div class="item">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h3>Title 1</h3>
                </div>
                <div class="modal-body">
                    <p>1</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Live Demo (jsfiddle)

But there is still a bug if you activate the sliding effect : the Carousel object keep sliding: true after a few slidings – thus blocking future slidings ; improvement welcome.