How to pause on hover in slider

Question

Js

var $slider = $('.slider'); 
var $slide = 'li'; 
var $transition_time = 1000;
var $time_between_slides = 4000; 
function slides(){
  return $slider.find($slide);

}

slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$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 
);

CSS

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } 
.slider li { display: none; position: absolute; top: 0; left: 0; }

Markup

<section id="">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul class="slider">
              <li>
                <img src="images/highlights/foundation_transparent.png" alt="First slide">
              </li>
              <li>
                <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide">
              </li>
              <li>
                <img src="images/highlights/nps_score_transparent.png" alt="Third slide">
              </li>
              <li>
                <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide">
              </li>
            </ul>
        </div>
    </div>
</section>

Answer 1

Use mouseover and mouseout event on image to achieve this.

var $slider = $('.slider'); 
var $slide = 'li'; 
var $transition_time = 1000; 
var $time_between_slides = 4000; 
function slides(){ 
  return $slider.find($slide);
}

slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

$function = 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');
    }

$interval = setInterval($function, $transition_time +  $time_between_slides );

$("img").on("mouseover",function(){
 clearInterval($interval);
});

$("img").on("mouseout",function(){
  $interval = setInterval($function, $transition_time +  $time_between_slides );
});

 

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } .slider li { display: none; position: absolute; top: 0; left: 0; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<section id="">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul class="slider">
              <li>
                <img src="images/highlights/foundation_transparent.png" alt="First slide">
              </li>
              <li>
                <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide">
              </li>
              <li>
                <img src="images/highlights/nps_score_transparent.png" alt="Third slide">
              </li>
              <li>
                <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide">
              </li>
            </ul>
        </div>
    </div>
</section>