<div id="wrap">
        <section id="banner">
            <h2>이미지가 3초에 한번씩 좌우로 전환되는 효과</h2>
            <div class="slideList">
                <div class="slideImg"><img src="https://triplelab.synology.me/Assets/imgs/test-1.jpg" alt="이미지 설명"></div>
                <div class="slideImg"><img src="https://triplelab.synology.me/Assets/imgs/test-2.jpg" alt="이미지 설명"></div>
                <div class="slideImg"><img src="https://triplelab.synology.me/Assets/imgs/test-3.jpg" alt="이미지 설명"></div>
            </div>
        </section>
        <!-- //banner -->

        <div class="arrow">
            <a href="#0" class="left">Left</a>
            <a href="#0" class="right">Right</a>
        </div>
    </div>
/* reset */
* {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
a {color: #333; text-decoration: none;}
li {list-style: none;}
table {border-spacing: 0;}
.clearfix::before, .clearfix::after {display: block; content:''; clear:both;}

#wrap {width: 1200px; margin: 0px auto;}


/* banner */
#banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 660px; }
#banner img {width: 100%; display: block;}
#banner h2 {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255,255,255,0.5);
    border-radius: 25px;
    padding: 10px 30px;
}

/* slider */
.slider {position: relative;}
.slider > div {position: absolute; left: 0; top: 0;}
.slider > div img {width: 100%;}
.slideList {position: relative; width: 3600px; height: 660px;}
.slideList .slideImg {float: left; height: auto;}

$(function(){
            var slideListEle = $('.slideList');
            var slideCount = $(".slideImg").length - 1;
            var currentIndex = 0;   //활성화된 인덱스값 자기자신을 저장해놓는다. 
            var slidePosition;  // 활성화된 아이템 자기자신을 저장해놓는다.

            var slideElement = function(el) {
                slidePosition = currentIndex * (-1200)+"px";
                el.animate({ left: slidePosition},400);
            }

            setInterval(function(){
                if(currentIndex < slideCount){
                    currentIndex++;
                } else {
                    currentIndex = 0;
                }
                slideElement(slideListEle);
            },5000);


            $('.left').on('click',function(e){
                currentIndex = currentIndex - 1;
                if(currentIndex < 0) currentIndex = slideCount;

                if($(e.target).hasClass('left')){               
                slideElement(slideListEle);
                }     
            });

        $('.right').on('click',function(e){
                currentIndex = currentIndex + 1;
                if(currentIndex > slideCount) currentIndex = 0;
                
                if($(e.target).hasClass('right')){
                    slideElement(slideListEle);
                }
            });

            slideElement($(".slideList"));
        });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js