Наведите указатель мыши на непрерывную прокрутку по горизонтали div

Question

Я разрабатываю карусель с горизонтальным изображением, и я бы хотел, чтобы она постоянно прокручивалась при наведении курсора на нее и останавливалась, вытаскивая из нее мышь. Код JS использует событие hover, чтобы определить, где находится мышь, и соответственно прокручивать влево или вправо. Я не могу заставить его работать, поэтому любая помощь будет оценена по достоинству.

Заранее спасибо

JS:

$('.carousel-frame ul').on('hover', function(e) { 
    var container = $(this).parent(); 
    if ((e.pageX - this.offsetLeft) < container.width()/2) { 
    var direction = function() { 
     container.stop().animate({ 
     scrollLeft: '-=600' 
     }, 1000, 'linear', direction); 
    } 
    container.stop().animate({ 
     scrollLeft: '-=600' 
    }, 1000, 'linear', direction); 
    } else { 
    var direction = function() { 
     container.stop().animate({ 
     scrollLeft: '+=600' 
     }, 1000, 'linear', direction); 
    } 
    container.stop().animate({ 
     scrollLeft: '+=600' 
    }, 1000, 'linear', direction); 
    } 
}, function() { 
    var container = $(this).parent(); 
    container.stop(); 
}); 

CSS:

.carousel-frame { 
    width: 100%; 
    margin-bottom: 0.5em; 
    padding-bottom: 1em; 
    position: relative; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 
.carousel-frame ul { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    list-style: none; 
} 
.carousel-frame li.carousel-item { 
    cursor: pointer; 
    display: inline-block; 
    margin: 0 5px 0 0; 
    padding: 0; 
} 

HTML:

<div class="carousel-frame"> 
    <ul> 
    <li class="carousel-item"> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li class="carousel-item"> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li class="carousel-item"> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li class="carousel-item"> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li class="carousel-item"> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    </ul> 
</div> 

FIDDLE:

https://jsfiddle.net/btLoenzf/1/

Answer 1

Привет попробовать это https://jsfiddle.net/sharmi1308/btLoenzf/2/

Я использовал как этот

$('.carousel-frame ul').hover(function(e) {...