Jquery Image Slider - left

Jquery Image Slider - left

by WebnMall Korea

HTML

<div id="sliderWrap">
  <ul id="slider">
    <li>
      <img src="https://via.placeholder.com/800x300.png/0000ff?text=Slide1-Virtual_Image" alt="슬라이드1">
    </li>
    <li>
      <img src="https://via.placeholder.com/800x300.png/00ff00?text=Slide2-Virtual_Image" alt="슬라이드2">
    </li>
    <li>
      <img src="https://via.placeholder.com/800x300.png/ff0000?text=Slide3-Virtual_Image" alt="슬라이드3">
    </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

setInterval(slide,3000);

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

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