Slider hover out

Question

У меня есть слайдер, который работает, однако я пытаюсь заставить ползунок продолжать, когда мышь покидает изображение <li>.

Он останавливается, когда мышь вводит метод .hover(), но он не продолжается, как только мышь перемещается с изображения.

Любая помощь была бы принята с благодарностью.

jQuery(function ($) { 
     // settings 
     var $slider = $('.home-slider'); // class or id of carousel slider 
     var $slide = 'li'; // could also use 'img' if you're not using a ul 
     var $transition_time = 1000; // 1 second 
     var $time_between_slides = 5000; // 5 seconds 

     function slides() { 
      return $slider.find($slide); 
     } 

     slides().fadeOut(); 

     // set active classes 
     slides().first().addClass('active'); 
     slides().first().fadeIn(100); 

     // auto scroll 
     $interval = setInterval(function() { 
      var $i = $slider.find($slide + '.active').index(); 

      slides().eq($i).removeClass('active'); 
      slides().eq($i).fadeOut($transition_time); 

      if (slides().length == $i + 1) $i = -1; // loop to start 

      slides().eq($i + 1).fadeIn($transition_time); 
      slides().eq($i + 1).addClass('active'); 
     }, $transition_time + $time_between_slides); 

     $('.home-slider').hover(function() { 
      $interval = clearInterval($interval); 
     }, function() { 
      interval = setInterval($transition_time, $time_between_slides); 
     }); 

     $('home-slider').mouseout(function() { 
      slides().fadeOut(); 
     }); 
    }); 

Answer 1

Я изменил ваш код для правильной работы.

Что я сделал, это переместить настройки и отдельные функции за пределы jQuery(function($) { ... });. Я изменил первый setInterval, чтобы использовать функцию sliderInterval, а также событие hover, чтобы использовать эту же функцию.

Я также удалил обработчик события mouseout, поскольку я не думаю, что это было необходимо.

Теперь код должен работать следующим образом:

1. Автоматически скользит по элементам на странице загрузки
2. Раздвижная останавливается, когда один из слайдов парил над
3. Раздвижная продолжается, как только мышь покинула слайд ,

Example JSFiddle

Код:

// settings 
    var $slider = $('.home-slider'); // class or id of carousel slider 
    var $slide = 'li'; // could also use 'img' if you're not using a ul 
    var $transition_time = 1000; // 1 second 
    var $time_between_slides = 5000; // 5 seconds 

    jQuery(function ($) { 
     slides().fadeOut(); 

     // set active classes 
     slides().first().addClass('active'); 
     slides().first().fadeIn(100); 

     // auto scroll 
     $interval = setInterval(sliderInterval, $transition_time + $time_between_slides); 

     $('.home-slider').hover(function() { 
      $interval = clearInterval($interval); 
     }, function() { 
      $interval = setInterval(sliderInterval, $time_between_slides); 
     }); 
    }); 

    function slides() { 
     return $slider.find($slide); 
    } 

    function sliderInterval() { 
     var $i = $slider.find($slide + '.active').index(); 

     slides().eq($i).removeClass('active'); 
     slides().eq($i).fadeOut($transition_time); 

     if (slides().length == $i + 1) $i = -1; // loop to start 

     slides().eq($i + 1).fadeIn($transition_time); 
     slides().eq($i + 1).addClass('active'); 
    }