How to pause and resume carousel slider

Question

I'm trying to get the slider to pause when the user hovers over and then resume the rotation when the user hovers out. But for some reason when I hover out the animation goes wacky and when I hover back over the clearTimeout doesn't work anymore. I'm trying to do this with no plugins please.

mycode.carousel = function() {
//hide all slides except first slide
$('#slides_container > div:gt(0)').hide();
$('#controls a').first().addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');

//auto rotate start
var timer = setTimeout(function() {
    mycode.rotateCarousel();
}, 1000);

$('#controls a').on('click',function(){
    //remove active from all thumbnails
    $('#controls a').removeClass('active');

    //remove current instance of current slide indicator 
    $('#active_slide').remove();

    //add current slide indicator to new tmb
    $(this).addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');

    //stop slide rotation
    //clearTimeout(timer);

    //select slide that corresponds to 
    var slideto_num = $(this).data('slide-to');
    $('#slides_container').children('div:visible').fadeOut();
    $('#slides_container > div:eq('+ slideto_num +')').fadeIn();
});


}


mycode.rotateCarousel = function() {



var $slides = $('#slides_container');

var $current = $slides.children('div:visible'); 
var $next = $current.next();

var data = $next.data('slide');

var element = [];
var $tmbs = $('#controls a');
$tmbs.each(function(i,item){
    element[i] = $(item);
});

$('#controls a').removeClass('active');
$('#active_slide').remove();


//assign first slide as $next when reaches end of list
if ($next.length == 0) {
    $next = $slides.children('div:eq(0)');
    element[0].addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
} else {
    element[data].addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
}

$current.fadeOut();
$next.fadeIn();

var timer = setTimeout(function() {
    mycode.rotateCarousel();
}, 1000);


$('#carosuel').hover(function(){
    clearTimeout(timer);
}, function() {
    mycode.rotateCarousel();
});

}

This is the html

<section id="carosuel" class="col-7">

            <div id="slides_container">

                <!-- slide 1 -->
                <div data-slide="0">
                    <div class="position-relative">
                        <img src="img/slide1.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>Downtown Baltimore</h2>
                            Check out the USS Torsk at Baltimore's historic Maritime Museum.
                        </blockquote>
                    </div>
                </div>

                <!-- slide 2 -->
                <div data-slide="1">
                    <div class="position-relative">
                        <img src="img/slide2.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>Exploring the Venetian</h2>
                            Enjoy the best gondola ride on this side of the Atlantic Ocean.
                        </blockquote>
                    </div>
                </div>

                <!-- slide 3 -->
                <div data-slide="2">
                    <div class="position-relative">
                        <img src="img/slide3.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>London after dark</h2>
                            Enjoy the pubs along the river Thames &amp; get spectacular view from the London Eye.
                        </blockquote>
                    </div>
                </div>

                <!-- slide 4 -->
                <div data-slide="3">
                    <div class="position-relative">
                        <img src="img/slide4.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>Mount Rushmore</h2>
                            Marvel at the majestic beauty of the Black Hills and come face to face with American history.
                        </blockquote>
                    </div>
                </div>
            </div>

            <div id="controls">
                <a data-slide-to="0"><img src="img/tmb1.jpg" alt="" /></a>
                <a data-slide-to="1"><img src="img/tmb2.jpg" alt="" /></a>
                <a data-slide-to="2"><img src="img/tmb3.jpg" alt="" /></a>
                <a data-slide-to="3" class="last"><img src="img/tmb4.jpg" alt="" /></a>
            </div>

        </section>

Answer 1

Updated FIDDLE

$('#carosuel').hover(function()
{
    clearTimeout(timer);

},function() 
  {
      timer = setTimeout(function() 
      {
         mycode.rotateCarousel();

       }, 5000);

   });