NZMAI NZMAI - 4 months ago 27
jQuery Question

jQuery:Pause image sliding on hover

I want image slider pause on hover.
This my code

$(".col-md-8").hover(function() {
clearTimeout(timer);
});


It seems to me correct, but something goes wrong. What is an issue? Thanks in advance.

Link to my project in Codepen

Answer

Check out this Pen

var nextimage = 0;
var timer = 0;
doSlideshow();

function doSlideshow() {
  if (nextimage >= images.length) {
    nextimage = 0;
  }
  $('.col-md-8').css('background-image', 'url("' + images[nextimage++] + '")').fadeIn(3000, function() {
    timer = setTimeout(doSlideshow, 3000);
  });
}
$(".col-md-8").hover(function() {
  clearTimeout(timer);
});

$(".col-md-8").mouseout(function() {
  setTimeout(doSlideshow, 3000);
});

var elems = document.getElementsByClassName("col-md-8");
for (var i = 0; i < elems.length; i++) {
 elems[i].style.backgroundRepeat = "no-repeat";
 elems[i].style.backgroundSize = "100%";
}