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

Question

1. Как приостановить/остановить/продолжить анимацию, когда мышь перевернула изображение?

Когда моя мышка нависает над моим изображением, я хотел бы, чтобы изображение приостанавливалось, когда мышь витает над ним. Затем я хотел бы, чтобы он продолжал прокручивать изображения, когда мышь отсутствует.

jQuery(function ($){ 
    // settings 
    var $slider = $('.slider'); // class or id of carousel slider 
    var $slide = 'li'; // could also use 'img' if you're not using a ul 
    var $transition_time = 4000; //millseconds 
    var $time_between_slides = 1000; //millseconds 
    var $stopAnimating = true; 
    var timeout; 
    function slides() { 
     return $slider.find($slide); 
    } 

    slides().fadeOut(); 
    // set active classes 
    slides().first().addClass('active'); 
    slides().first().fadeIn($transition_time); 
    $interval = ''; 


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

    slides().mouseover(function() { 
     slides().stop; 
     setInterval = 0; 
     alert('mousein'); 
    }); 

    slides().mouseout(function() { 

     alert('mouseout'); 
    }); 



}); 

Это непростая задача. но его очевидный им новый парень в этой области спасибо

Answer 1

Вы в удаче @ user2512393, потому что я уже понял это. Это link поможет вам.

Оберните интервал в функции, объявите переменную интервала, верните функцию наружу и установите зависание на вновь созданную функцию.

jQuery(function ($) { 

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

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

    slides().fadeOut(); 

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

    // auto scroll 
    function startloop(){ 
    $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); 
} 
    function pauseLoop() { 
     window.clearInterval($interval); 
    } 

    $(".slider").hover(

    function() { 
     //alert("pause"); 
     pauseLoop(); // pause the loop 
    }, 

    function() { 
     //alert("unpause"); 
      startloop(); //scroll() 
    }); 
    return startloop(); 
}); 

Этот код расположен на github.

Теперь я пытаюсь реализовать сенсорное обнаружение, чтобы приостановить его на мобильных устройствах.