자동으로 움직이는 무한 반복 슬라이드

맨땅에 헤딩식으로 독학을 하고 있다보니

한장씩 이동하는 슬라이드는 무리없이 하는데.

여러개가 동시에 보이면서 한칸씩 이동하고 양쪽으로 다 무한 반복이 되는  이 슬라이드는

제한된 이미지로 양쪽으로 복사와 삭제가 되면서 자연스럽게 흘러가야하는거라 꽤 고생을 했다.

하지만 막상 하고보면 그리 어려운 것이 아닌 것이 었다는 것을 뒤늦게야 알게된다.

10장의 이미지가 한 view에 5장씩 보이면서 1장씩 이동하고 무한 반복 된다.

• HTML

  <div class="sliding-box">
    <img class="left" src="" alt="이전" />
    <div class="sliding-view">
        <ul class="container">
            <li>
                <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="" />
             </li>
            <li>
                <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="" />
            </li>
            <li>
              <img src="" alt="" />
            </li>
            <li>
                <img src="" alt="">
             </li>
        </ul>
    </div>
    <img class="right" src="" alt="다음" />
</div>

• CSS

.sliding-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;
    width: 1020px;
    height: auto;
    justify-content: space-between;
}

.sliding-box .left,
.sliding-box .right {
    width: 30px;
    height: 30px;
    margin-top: 60px;
    cursor: pointer;
}

.sliding-box .right {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.sliding-viwe {
    overflow: hidden;
    position: relative;
    flex-basis: 900px;
    width: 900px;
    height: 180px;
}

.sliding-viwe .containner {
    position: absolute;
    left: 0;
    margin: 0px;
    width: 1800px;
    background-color: #fff;
}

.sliding-viwe .containner li {
    float: left;
    margin: 0px;
    width: 180px;
    height: 180px;
    text-align: center;
}

.sliding-viwe .containner li img {
    margin: 15px auto;
    width: 150px;
}

 

• jS

   $(document).ready(function(){
// 무한 반복 슬라이딩 //

let current= 0;
let show = 5;
let container = $('.sliding-view .container');
let length = container.find('>li').length;
let view =  $('.sliding-view').width();
let tt = view/show; //이동거리 -한칸씩 움직이기//
let next = $('.sliding-box .right');
let prev = $('.sliding-box .left');

container.css('width','length*tt');//컨테이너 길이 초기화//

next.on({
click:function(){

if(current == length) {//마지막 엘리먼트에 다다르면 current 초기화//
current = 0;
}

if(current == 0){
//먼저 복사된 엘리먼트 삭제하고 위치 초기화//
container.find('>li').eq(length-1).nextAll().remove();
container.css({left:0}).stop();

//이동//
current++;
container.stop().animate({left:tt*current*-1},{duration:900});	

//엘리먼트 복사 - 컨네이너의 자식 모두 복사//
let cloneEl = container.children().clone();
//복사된 엘리먼트 수 만큼 길이 늘리고 붙이기//
container.css({width:container.innerWidth()+(tt*length)});
cloneEl.appendTo(container);
}
else if(current >= 1){

current++;
container.stop().animate({left:tt*current*-1},{duration:900});	
}			

},
mouseenter:function(){
clearInterval(Sliding);
},
mouseleave:function(){
slidingTimer();
}
});

prev.on({
click:function(){
if(current == 0){
//먼저 복사된 엘리먼트 삭제하고 위치 초기화//
container.find('>li').eq(length-1).nextAll().remove();
container.css({left:0}).stop();
    
//인덱스 순서를 length로 치환해줌//
current=length;

//앞쪽으로 엘리먼트 복사해서 붙이기//
//길이 & 위치 초기화 -앞쪽으로 붙었기 떄문에 늘어난 길이 만큼 left시작 위치가 -가 되어야함//
let cloneEl = container.children().clone();

container.css({left:tt*length*-1,width:container.innerWidth()+(tt*length)}).stop();
cloneEl.prependTo(container);

//붙이고 나서 바로 이동 되도록//
current--;
container.stop().animate({left:tt*current*-1},{duration:900});
}
else if(current > 0 ){
current--;
container.stop().animate({left:tt*current*-1},{duration:900});
}

},
mouseenter:function(){
clearInterval(Sliding);
},
mouseleave:function(){
slidingTimer();
}
});


//컨테이너에 hover 되면 타이머 일시정지//
container.on({
mouseenter:function(){
clearInterval(Sliding);
},
mouseleave:function(){
slidingTimer();
}
});

slidingTimer();

//자동 슬라이딩 타미머 함수 정의//
function slidingTimer(){
Sliding = setInterval(function(){

next.trigger('click');

},3000);
}
});