Как применить плагин ко всей диве

Question

Я в настоящее время использую http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/ как плагин, и я хочу сделать следующее:

$('#carousel-demo1').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'left', 
       } 
      ); 

      $('#carousel-demo2').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'right', 
       } 
      ); 

      $('#carousel-demo3').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'left', 
       } 
      ); 
      $('#carousel-demo4').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'right', 
       } 
      ); 

Это код, я использую, чтобы инициировать плагин и он работает. Тем не менее, я хочу, чтобы один из списков зависел, все они начали двигаться, а не только тот, который я вишу. Что я пытался сделать:

$(document).ready(function() 
    {  
     $('ul').mouseover(function() 
     { 
      $('#carousel-demo1').scrollingCarousel 
      (
       { 
        autoScroll: true, 
        autoScrollDirection: 'left', 
       } 
      ); 

      $('#carousel-demo2').scrollingCarousel 
      (
       { 
        autoScroll: true, 
        autoScrollDirection: 'right', 
       } 
      ); 

      $('#carousel-demo3').scrollingCarousel 
      (
       { 
        autoScroll: true, 
        autoScrollDirection: 'left', 
       } 
      ); 
      $('#carousel-demo4').scrollingCarousel 
      (
       { 
        autoScroll: true, 
        autoScrollDirection: 'right', 
       } 
      ); 
     }); 

     $('ul').mouseleave(function() 
     { 
      $('#carousel-demo1').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'left', 
       } 
      ); 

      $('#carousel-demo2').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'right', 
       } 
      ); 

      $('#carousel-demo3').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'left', 
       } 
      ); 
      $('#carousel-demo4').scrollingCarousel 
      (
       { 
        autoScroll: false, 
        autoScrollDirection: 'right', 
       } 
      ); 
     }); 

Но это не работает. Итак, как я могу это сделать?

Answer 1

Как насчет использования функции .hover()?

$("ul").hover(function() { 
// add functions here 
}); 

Answer 2

Дайте все ваши li класс, например:

HTML:

<ul> 
    <li class="demo"></li> 
    <li class="demo"></li> 
    <li class="demo"></li> 
</ul> 

Jquery:

$('.demo').on('mouseover', function(){ 
    $('.demo').scrollingCarousel 
    (
     { 
      autoScroll: true, 
      autoScrollDirection: 'left', 
     } 
    ); 
});