자바스크립트로 좌우 슬라이드 만들기

자바스크립트 또는 제이쿼리를 이용하여 간단한 좌우 슬라이드를 만드는 두가지 방법에 대해 작성한다.

 

1. 자바스크립트로 좌우 슬라이드 만들기

See the Pen js slide left-right by ssoa1111 (@ssoa1111) on CodePen.

 

처음에 이렇게 작성했는데 안되었음.

slideImg.style.marginLeft -= slideImgWidth[num].offsetWidth + 'px';

이 부분에서 slideImgWidth[num].offsetWidth가 number속성이고 'px'가 string속성이어서 더하기가 제대로 먹히지 않는게 문제...  offsetWidth를 변수에 담아 숫자 계산을 마친 뒤 그 후에 'px'을 붙이는 걸로 해결

slideImg.style.marginLeft = 0;
setInterval(()=>{
    if(num > slideImgWidth.length-1){
        num = 0;
        slideImg.style.marginLeft = 0;
    }else{
        slideImg.style.marginLeft -= slideImgWidth[num].offsetWidth + 'px';
    }
    console.log(slideImg.style.marginLeft);
    num++;
},5000)

 

 

 

 

2. 제이쿼리로 좌우 슬라이드 만들기

저번과 마찬가지로 제이쿼리 CDN을 HTML에 첨부하고 js파일에 작성하면 된다.

제이쿼리의 슬라이드가 자연스럽게 넘어가는 효과를 위해 맨 첫번째 이미지를 복사하여 맨 마지막에 붙여 넣는다.

$(function(){
    let num = 1;
    // 첫번째 이미지 복사
    let img = $('#slide ul li:first').clone();
    // 이미지 덩어리 맨 마지막에 붙여넣기
    img.appendTo($('#slide ul'));

	// 3초마다 반복
    setInterval(function(){
        if(num > 3){
            num = 1;
            $('#slide ul').css('margin-left',0)
        }
        num++;
        $('#slide ul').animate({marginLeft : '-=1200px'},600);
    },3000);
})