Как приостановить бесконечный горизонтальный скроллер контента при зависании

Question

Мне удалось создать бесконечный скроллер контента, используя jQuery. Однако я хочу добавить функцию, в которой пользователь может нависнуть над скроллером, чтобы приостановить его и просмотреть элементы.

Ниже приведен код, у меня до сих пор:

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); 
    }); 

Я пытался несколько различных реализаций, чтобы остановить анима с такими типами, как «clearInterval» и «.stop()», но, похоже, это не работает.

Я также пытаюсь реализовать ручной способ для пользователей прокручивать контент после приостановки анимации. Я предполагаю, что я мог бы использовать дополнительные обработчики hover для левой и правой прокрутки divs с похожим кодом с тем, что уже используется, хотя я не уверен, как я могу заставить его прокручивать в противоположном направлении, когда они наводили на divScroll.

Любые советы будут замечательными.

Благодаря

Answer 1

Я приложил обработчик парения к изображениям следующим образом, и она работала. Вы также должны сохранить объект таймера в переменной.

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