UP

JQuery Slider - UP

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:20px auto;    overflow: hidden;}
#sliderV{	display:block;	margin:0;	padding:0;     height:900px; }
#sliderV>li{	list-style:none;     width: 800px;    float: left;}

JavaScript

setInterval(slide,3000); 

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

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