<style>

.slider-wrap{
    width:80%;
    height:auto;
    position:relative; 
    left:10%;
    top:100px;
}
.slider{
    position:absolute;
    top:0; left:0;
    transition:1s;
    opacity:1
    
}
.slider0{z-index:10}
.slider1{z-index:8}
.slider2{z-index:6}
.slider img{ width:100%; height:auto;}

</style>
<script>
$(function(){

    setInterval(function(){
        $(".slider0").delay(1000).animate({opacity:0},1000);
        $(".slider1").delay(2000).animate({opacity:0},1000);
        $(".slider1").delay(4000).animate({opacity:1},1000);
        $(".slider0").delay(6000).animate({opacity:1},1000);
    });

/*
    $(".slider0").each(function loop(){
        $(".slider0").delay(1000).animate({opacity:0},1000);
        $(".slider1").delay(2000).animate({opacity:0},1000);
        $(".slider1").delay(4000).animate({opacity:1},1000);
        $(".slider0").delay(6000).animate({opacity:1},1000);
        setTimeout(function(){loop()},10000)
    });
    
*/    
});
</script>

좌우 애니메이션

html

<div class="slide-ani">
            <div class="sani s-ani1">
                 <img src="images/food2_slide.jpg" width="100%">
            </div>
            <div class="sani s-ani2">
                <img src="images/food3_slide.jpg" width="100%">
            </div>
        </div>

css

.slide-ani{
    width:50%; margin:auto; position:relative;
    overflow-x:hidden;
    height:500px; /* 높이를 고정했을 때 */
    /* 높이를 이미지의 높이에 맞추어야 할 때는 jQuery를 이용하여야 합니다. */
}
.sani{width:100%; position:absolute; top:0; left:0;}
.s-ani1{left:-100%;}

js

두가지로 작성했습니다.

하나는 setInterval을 이용한 방법이고

또 하나는 setTimeout을 이용한 방법입니다.

/*    setInterval(function(){
        $(".s-ani2").stop().delay(1000).animate({
            left:"-100%"
        });
        $(".s-ani2").stop().delay(2000).animate({
            left:"0"
        });
        $(".s-ani1").stop().delay(1000).animate({
            left:"0"
        });
        $(".s-ani1").stop().delay(2000).animate({
            left:"-100%"
        });
        
    },4000); 
*/    
    $(".sani").each(function loop(){
        $(".s-ani2").stop().delay(1000).animate({
            left:"-100%"
        });
        $(".s-ani2").stop().delay(2000).animate({
            left:"0"
        });
        $(".s-ani1").stop().delay(1000).animate({
            left:"0"
        });
        $(".s-ani1").stop().delay(2000).animate({
            left:"-100%"
        });
        setTimeout(function(){loop();},3000);
        
    });