I need to have this counter pause {stay on current div) while mouseover or hover and resume counter when mouseout. I have tried many ways but still new to jQuery API.

<div id="slide_holder">
<div id="slide1" class="hidden">
<img src="images/crane2.jpg" class="fill">
</div>
<div id="slide2" class="hidden">
<img src="images/extend_boom.png" class="fill">
</div>
<div id="slide3" class="hidden">
<img src="images/Transformers-Bumblebee.jpg" class="fill">
</div>

    <script>
        $(function () {

            var counter = 0,
                divs = $('#slide1, #slide2, #slide3');

            function showDiv () {
                divs.hide() // hide all divs
                    .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
                    .fadeIn('slow'); // and show it

                counter++;
            }; // function to loop through divs and show correct div


            showDiv(); // show first div    

            setInterval(function () {
                showDiv(); // show next div
            }, 3 * 1000); // do this every 10 seconds    

        });
        </script>