[J Query] 슬라이드 애니메이션 구현하기

목표

J Query 를 이용하여 간단하게 좌우 슬라이드 만들어보겠습니다.

워낙 예전에 배웠던 거라서 기억이 나지 않아 복습 겸, 기록 겸 남깁니다.

---

마크업

/* part1.html */
    <div class="wrap">
        <div class="slider_wrap">
            <!-- 슬라이더 -->
            <ul>
                <li><a href="javascript:void(0)">slide1</a></li>
                <li><a href="javascript:void(0)">slide2</a></li>
                <li><a href="javascript:void(0)">slide3</a></li>
                <li><a href="javascript:void(0)">slide4</a></li>
            </ul>
        </div>
        <!-- 페이지네이션 -->
        <ol class="pagination">
            <li><a href="javascript:void(0)">1</a></li>
            <li><a href="javascript:void(0)">2</a></li>
            <li><a href="javascript:void(0)">3</a></li>
            <li><a href="javascript:void(0)"></a></li>
        </ol>
    </div>

저는 2개의 리스트를 만들었습니다.

ul : 슬라이더 (이미지 영역)

ol : 페이지네이션 (버튼 영역)

---

이미지 구하기

이제 실습에 재미를 더하기 위해 본인이 원하는 사진 4장을 가져오도록 합시다.

---

CSS

그리고 가지고 온 이미지들을 slide 1, 2, 3, 4 영역에 각 자 넣어주고,

css를 사용하여 보기 좋게 정리 해 줍니다.

/* part1.css */
@charset 'UTF-8';

*{
    margin:0; padding:0;
}

ol, ul, li {
    list-style:none;
}

a{
    text-decoration: none;
}

img{
    width:500px;
}
.wrap {
    width:800px;
    margin:0 auto;

}
.slider_wrap {
    position:relative;
    overflow: hidden;
    width:500px;
    margin:20px 0;
}
.slider_wrap > ul {
    position:relative;
    display:flex;
    flex-flow:row nowrap;
}

.pagination {
    display:flex;
}

.pagination > li {
    margin:0 5px 0 0;
}

.pagination > li.watch > a {
    color:#fff;
    background:#000;
}
.pagination > li > a {
    display:block;
    width:20px;
    height:20px;
    color:#000;
    text-align:center;
    line-height:20px;
    border:1px solid #000;

}

html 파일에 직접적으로 작성해도 되지만 저는 css 파일을 따로 작성하여 저장합니다.

ul 을 div로 한 번 더 감싸는 이유 :
ul을 flex 시키면 

이런 식으로 li들이 길게 늘어지게 됩니다.
이걸 div로 감싼 후 div의 width 값을 이 사진 한장의 width 값으로 설정 후
overflow:hidden 시 1장의 사진만 보여지게 됩니다.

이렇게요.

이렇게 보이게 하기 위해 한 번 더 div를 씌워주는 것 입니다.

---

과정

 

꾸며주고 나서 이제 javascript 를 이용하여 제일 쉬운 click이벤트를 먼저 구현 해 보겠습니다.

먼저, pagination을 활성화 시키는 방법부터 진행합니다.

 

1. pagination 에서 선택하는 index에게 'watch' 라는 클래스를 부여하도록 하겠습니다.

/* part1.js */

$(function(){
    //console.log('connect')

    $('.pagination > li').on('click', function(){
        $(this).addClass('watch').siblings().removeClass('watch');
    })

})

 $(this) 는 $('.pagination > li') 중 '클릭' 한 것에 대한 값 입니다.

 

즉, 1번을 누르면 1번, 2번은 2번 이렇게 watch가 class로 부여 될 것입니다.

그리고 지금 보여지는것을 제외한 나머지 li는 숨김처리가 되어야 하기 때문에 

.siblings() 를 이용하여 선택자를 제외한 나머지 형제 요소들에게서 removeClass('watch')를 해줍니다.

 

ㅡ리

빨간 색 표시처럼 누르는 li에 watch 클래스가 붙었다면 성공입니다.

 

그렇다면 이제 li를 눌렀을 때 이미지도 해당 이미지로 옮겨지도록 설정하여야 합니다.

$(function(){
    //console.log('connect')

    $('.pagination > li').on('click', function(){
        $(this).addClass('watch').siblings().removeClass('watch');
        let index = $(this).index();
        console.log(index)
    })
})

콘솔창에 본인이 누른 li의 index 번호가 뜨면 성공 입니다.

이후 index 번호만큼 이미지의 positon-left 값을 움직여 슬라이딩 시키겠습니다.

 

$(function(){
    //console.log('connect')

    $('.pagination > li').on('click', function(){
        $(this).addClass('watch').siblings().removeClass('watch');
        let index = $(this).index();
        //console.log(index)
		
        if(index > 0) {
            $('.slider_wrap > ul').stop().animate({left:-500*index})
        }else{
            $('.slider_wrap > ul').stop().animate({left:0})
        }
    })
})

갑자기 복잡해 졌지만, 설명 하자면

if문을 사용해서 index가 0 초과일때 조건을 걸었습니다.

li:nth-child(1) = index 값이 0 (처음이미지)

li:nth-child(2) = index 값이 1

li:nth-child(3) = index 값이 2

li:nth-child(4) = index 값이 3

 

그럼 2,3,4 번째 li가 조건에 해당이 되기 때문에,

이 li가 차례대로 앞으로 올 수 있도록

animate를 주어 left 값을 이미지 width값 * index 값 만큼 이동시킵니다.

---

결과

 

jquery를 이용한 간단한 슬라이드 만드는 방법입니다.

 

---

주의할 점

javascript 에서 ul을 이동시키기 위해서는 css에 무조건 position:relative를 설정 해 주어야 한다.

왜냐하면.animate는 설정값을 활용하는 것 이기 때문에, position이 설정되어있지 않다면 당연히 left 도 먹히지 않는것이다.

이후에도 애니메이션에 설정값이 먹히지 않는다면 CSS에서 먼저 선언이 되어있는지 확인하자.