Down

JQuery Slider - Down

by WebnMall Korea

HTML

<div id="sliderWrapV">
            <ul id="sliderV">
                <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

#sliderWrapV{    width: 800px;    height: 300px;	margin:0px auto;  overflow: hidden; }
#sliderV{	display:block;	  height:900px;  position:relative; top:-600px; margin:0; padding:0;  }
#sliderV>li{ 	list-style:none;     width: 800px; height:300px;   }

JavaScript

setInterval(slide,3000); 
		
		function slide() {
				$('#sliderV').stop().animate({
				marginTop : 300
				},1000,slideNext);
		}

		function slideNext(){	
				$('#sliderV>li').eq(2).prependTo('#sliderV');
				$('#sliderV').stop().animate({
				marginTop:0
				},0);				
		}