Changing the slide to auto?

Since we already have a function to advance the carousel, (the arrow-next click event handler) all we need is a timed event to trigger that event at intervals.

var int = self.setInterval(function(){
    $('.arrow-next').trigger('click');
},5000);

That should start the carousel, in theory. But now we need a way to stop it. It cannot under the current circumstances be part of the click event handler because the timer is triggering it so we need another event, such as a click on the '.active-slide', for instance.

$('.active-slide').click(function(){
    window.clearInterval(int);
    return false;
});

Again, in theory. I can sense that this won't work. Rather than wait until I have a working solution, I'll post this so we can all dig in to it. Keep us posted!

This selector rule was added to the style sheet to make things more transparent:

.dot {
    cursor: pointer;
}

Now we get a hand that suggests we can click this and get some form of response. Because of the five second delay it's not immediately obvious, but we do get something when we click. No more carousel, or more carousel. We just have to wait the five seconds to see it happen. More than five seconds with nothing happening means, it's stopped.

This is my exercise 12 submission, which exceeds the lesson requirements, but spells out what we are working toward:

var int;
function rotate(){
    function next(){
        $('.arrow-next').trigger('click');
    }
    int = self.setInterval(next,5000);
}
function freeze(){
    window.clearInterval(int);
    return false;
}
function arrowNext() {
    var currentSlide = $('.active-slide');
    var nextSlide, nextDot;
    var currentDot = $('.active-dot');
    if ($('.slide').last().hasClass('active-slide')){
        nextSlide = $('.slide').first(); 
        nextDot = $('.dot').first();
    } else { 
        nextSlide = currentSlide.next();
        nextDot = currentDot.next();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    nextSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
}
function arrowPrev() {
    var currentSlide = $('.active-slide');
    var prevSlide, prevDot;
    var currentDot = $('.active-dot');
    if ($('.slide').first().hasClass('active-slide')){
        prevSlide = $('.slide').last();
        prevDot = $('.dot').last();
    } else { 
        prevSlide = currentSlide.prev();
        prevDot = currentDot.prev();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    prevSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
}
function dropDown(){
    var currMen = $(this).siblings('.dropdown-menu');
    $('.dropdown-menu').not(currMen).hide();
    currMen.toggle();
}
var main = function(){
  $(document)
    .on('click','.dropdown-toggle',dropDown)
    .on('click','.arrow-next',arrowNext)
    .on('click','.arrow-prev',arrowPrev);
  $('.slider-dots')
    .on('click','.dot',freeze)
    .on('click','.active-dot',rotate);
  rotate();
};
$(document).ready(main);

So far this seems like a nice working solution. The code below is from the bottom of the existing code inside the main function. The closing RBRACE for main() is indicated.

  $('.slider-dots')
    .on('click','.dot',freeze)
    .on('click','.active-dot',rotate);
  rotate();
} // end of main()
var int;
function rotate(){
    function next(){
        $('.arrow-next').trigger('click');
    }
    int = self.setInterval(next,5000);
}
function freeze(){
    window.clearInterval(int);
    return false;
}
$(document).ready(main);

The carousel is triggered when main() has been read in and all the event listeners are registered. Note the rotate() at the last line of the function.

The two functions we use for this are both in window scope, outside of the function. The .on() listeners for '.slider-dots' delegate two ways. Click a grayed out dot and it stops the carousel. Click on the dark (active) dot and the carousel resumes.

It turned out to be something not that difficult, at all. Always love when a plan comes together.

Help me, please, to understand! Why $('.active-slide') is written with ".", but ...removeClass('active-slide'); - without "."

Thanks!)