Jquery 무한 슬라이드 - Jquery muhan seullaideu

[JAVASCRIPT/JQUERY]플러그인 쓰지않고 이미지 슬라이드 만들기 본문

알찬 퍼블리셔 2019. 4. 11. 11:27

ul li를 이용해 이미지 리스트를 만들고,

g_item으로 이미지 슬라이드의 이미지의 현재위치를 알려주고 이미지간의 이동이 가능한 컨트롤러를 만듭니다. 

float : left 를 써서 리스트를 가로로 정렬합니다. 

.gallery ul li {float: left; width: 300px;}

ul는 li의 갯수만큼 width값이 커지지만 ,

.gallery ul{width: 300%;}

ul을 감싸고 있는 .gallery는 이미지를 3개만 보여줄 크기로 제한합니다. 

.gallery{width: 900px}

이미지의 흐름이 자연스러워 보이기 위해서는 양쪽 끝에 

처음시작에는 마지막 이미지를 추가하고, 맨 마지막에는 첫번째 이미지를 추가해야합니다. 

양쪽에 이미지가 없을경우

현재 다음이미지가 왼쪽에서 오른쪽으로 이동하는 듯한 효과로 보이지만

마지막에서 처음이미지로갈때 맨마지막이미지에서 반대로 움직여 0으로 돌아가는 애니메이션 효과가 구현됩니다. 

//현재 마지막 이미지일 경우 마지막 이미지 뒤에있는 첫번째 이미지를 보여준뒤,

바로 첫번째 이미지로 돌아가면 무한 슬라이드처럼 보여집니다. 

if(idx> $(".gallery ul li").length-3){
  $(".gallery ul").animate({
  "left":0
},0);

.gallery ul{ position: relative; left: -300px;}

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

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

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

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

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

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

.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;
}

   $(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);
}
});