Left / Link / Hover

Jquery Slider - left / link / hover

by WebnMall Korea

HTML

<div id="sliderWrap">
  <ul id="slider">
    <li>
      <a href="https://jjum.com"><img src="https://via.placeholder.com/800x300.png/0000ff?text=Slide1-Virtual_Image" alt="슬라이드1"></a>
    </li>
    <li>
      <a href="http://webnmall.com"><img src="https://via.placeholder.com/800x300.png/00ff00?text=Slide2-Virtual_Image" alt="슬라이드2"></a>
    </li>
    <li>
      <a href="http://ggoggam.com"><img src="https://via.placeholder.com/800x300.png/ff0000?text=Slide3-Virtual_Image" alt="슬라이드3"></a>
    </li>
  </ul>
</div>

CSS

#sliderWrap {
  width: 800px;
  height: 300px;
  margin: 20px auto;
  overflow: hidden;
}

#slider {
  display: block;
  margin: 0;
  padding: 0;
  width: 2400px;
}

#slider li {
  float: left;
  list-style: none;
  width: 800px;
}

JavaScript

var timer = setInterval(slide, 1200);

	function slide() {
	  $('#slider').animate({
	    marginLeft: -800
	  }, 400, slideNext);
	}

	function slideNext() {
	  $('#slider li').eq(0).appendTo('#slider');
	  $('#slider').animate({
	    marginLeft: 0
	  }, 0);
	}

	$("#slider li").hover(function() {
	  clearInterval(timer);
	}, function() {
	  timer = setInterval(slide, 1200);
	});