이미지 슬리이드 JS (좌,우)

이미지 슬리이드 JS (좌,우)

안녕하세요 TriplexLab입니다 :)
오늘은 이미지 슬리이드 JS (좌,우)기능에 대해서 알아보도록 하겠습니다.

// html

<div id="wrap">
        <section id="banner">
            <h2>이미지가 3초에 한번씩 좌우로 전환되는 효과</h2>
            <div class="slideList">
                <div class="slideImg"><img src="0.jpg" alt="이미지 설명"></div>
                <div class="slideImg"><img src="1.jpg" alt="이미지 설명"></div>
                <div class="slideImg"><img src="2.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>

 

// css

/* 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: 360px; }
#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: 360px;}
.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"));
});

 

결과)