How to pause an infinite horizontal content scroller on hover

Question

I've managed to create an infinite content scroller using jQuery. However, I want to add in a feature where the user can hover over the scroller to pause it and view the items.

Below is the code I have so far:

HTML

<div id="sliderContainer">
                <div id="scrollLeft">L</div>
                    <div id="scrollerInner">
                    <div id="scroller">
                        <div id="egypt" class="scrollImg"><img src="img/egypt1.jpg"><h3>Egypt </h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  dolore magna aliqua. </p></div>
                        <div id="turkey" class="scrollImg"><img src="img/turkey1.jpg"><h3>Turkey</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  dolore magna aliqua. </p></div>
                        <div id="dominican" class="scrollImg"><img src="img/dominicanrepublic1.jpg"><h3>Dominican Republic</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  dolore magna aliqua. </p></div>
                        <div id="thailand" class="scrollImg"><img src="img/thailand1.jpg"><h3>Thailand</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  dolore magna aliqua. </p></div>
                        <div id="vietnam" class="scrollImg"><img src="img/egypt1.jpg"><h3>Vietnam</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  dolore magna aliqua. </p></div>
                        <div id="emirates" class="scrollImg"><img src="img/uae1.jpg"><h3>UAE</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  dolore magna aliqua. </p></div>

                    </div><!-- end scroller -->
                    </div><!-- end scroller inner -->
                <div id="scrollRight">R</div>
</div><!--end scroller container -->

CSS

#sliderContainer {
height: 280px;
width: 780px;
position: relative;
margin: 0 auto;

}

#scrollerInner {
float:left; 
width:780px; /* important (this width = width of list item(including margin) * items shown */ 
height: 280px;
overflow: hidden; 
}

#scroller {
position:relative;
left:-260px; /* important (this should be negative number of list items width(including margin) */
margin: 0px;
padding: 0px;
width:9999px; /* important */

padding-bottom:10px;

}

.scrollImg {
float: left;                                    
width:250px;  /* fixed width, important */
padding:0px;
height:110px;
margin-top:10px;
margin-bottom:10px; 
margin-left:5px; 
margin-right:5px; 
}

.scrollImg img {
width: 180px;
height: 180px;
margin-left: 35px;


}

.scrollImg h3 {
color: #000;
position: relative;
text-align: center;
}

.scrollImg p {
width: 220px;
margin: 0 auto;
}

#scrollLeft {
position: absolute;
line-height: 280px;
width: 20px;
z-index: 5;
background-color: white;
text-align: center;
}

#scrollRight {
position: absolute;
line-height: 280px;
right: 0;
width: 20px;
background-color: white;
text-align: center;
}

JS

function scroller() {

        //get the width of the items 
        var item_width = $('#scroller div').outerWidth() + 10;

        //calculae the new left indent of the scroller
        var left_indent = parseInt($('#scroller').css('left')) - item_width;

        // sliding effect
        $('#scroller:not(:animated)').animate({'left' : left_indent},3000,function(){    

            // create infinite effect
            $('#scroller div:last').after($('#scroller div:first')); 

            //and set the left indent to the default -260px
            $('#scroller').css({'left' : '-260px'});
        }); 
    }
  $(document).ready(function() {
  setInterval(scroller, 0);
  });

I've tried some different implementations to stop the animation with hovers like 'clearInterval' and '.stop()' but it doesn't seem to work.

I'm also trying to implement a manual way for users to scroll through the content once they have paused the animation. I imagine I could use extra hover handlers for the left and right scroll divs with similar code to what is already used, although, I'm unsure as to how I can make it scroll in the opposite direction when they hover the leftScroll div.

Any tips would be great.

Thanks

Answer 1

I attached a hover handler to the images as follows and it worked. You also have to save the timer object into a variable.

var timer = setInterval(scroller, 0);
$('.scrollImg').hover(
    function() {
        clearInterval(timer);
    },
    function() {
        timer = setInterval(scroller, 0);
    }
);