html

             <div class="slider">
                    <ul class="panel">
                        <li>1번슬라이드</li>
                        <li>2번슬라이드</li>
                        <li>3번슬라이드</li>
                    </ul>
                   
                </div>

css

.slider{
    width:100%;
    height:300px;
    border:1px solid red;

    overflow:hidden;
    position:relative;
}

.panel{
    width:300%;
    height:100%;
    position:relative;
    left:0;
    list-style:none;
    margin:0;
    padding:0;
}
.panel:after{
    content:"";
    display:block;
    clear:both;
}
.panel>li{
    width:33.3%;
    height:100%;
    float:left;
    position:relative;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    
}
.panel>li:first-child{
    background-image:url(../images/back1.jpg);
    
}
.panel>li:nth-child(2){
    background-image:url(../images/back2.jpg);
}
.panel>li:nth-child(3){
    background-image:url(../images/back3.jpg);
}

js

var now_num;

function nextPlay(){
            if(now_num==slide_length-1){
                now_num=0;
            }else{
                now_num++; 
            }
           $(".panel").stop().animate({
                left:-1200*now_num
            });
        }

function autoPlay(){
            auto=setInterval(function(){
                nextPlay();
            },3000)
        }
        autoPlay();