[ jQuery ] 슬라이드 - pagination 만들기

HTML

<div id="wrap">
        <h1>슬라이드 배너 만들기</h1>

        <div id="slides">
            <ul class="slides-container">
                <li><img src="./images/nature1.jpg" alt="#"></li>
                <li><img src="./images/nature1.jpg" alt="#"></li>
                <li><img src="./images/nature1.jpg" alt="#"></li>
                <li><img src="./images/nature1.jpg" alt="#"></li>
            </ul>

            <ol class="slides-pagination">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ol>
        </div>

        <address>&copy; Designed by Roong</address>
    </div>

CSS

기능구현을 위한 css 큰 그림을 보자면~!
슬라이드 이미지를 옆으로 쭉 나열해서 pagination을 클릭할때마다 이미지 컨테이너가 옆으로 이동하도록 할 것이다. 이 때 컨테이너 밖은 overflow:hidden 해준다.(옆으로 나열된 이미지들) 또, 이미지마다 크기가 다르기 때문에 img의 부모인 li에 크기를 지정해주고 overflow:hidden을 해준다.

pagination 이미지(13 * 39)

<style>
        h1{
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        #slides{
            overflow: hidden; /*flex된 슬라이드 이미지 안보이게*/
            position: relative;
            margin: 0 auto;
            width: 700px;
            height: 380px; /*이미지와 pagination 합친 총 길이*/
        }

        #slides>.slides-container{
            display: flex;
            position: absolute; /*slides-container 위치시킴*/
            left: 0;
            top: 0;
            width: calc(700px * 4); /*이미지 가로사이즈 4개*/
        }

        #slides>.slides-container>li{
            overflow: hidden; /*각각 다른 이미지 크기때문에 li 사이즈보다 over된 것 안보이게*/
            width: 700px;
            height: 360px;
        }

        #slides>.slides-container>li>img{
            display: block;
            width: 100%;
        }

        #slides>.slides-pagination{
            display: flex;
            justify-content: space-between;
            position: absolute; /*pagination 위치시키기*/
            left: 50%; /*좌측 기준으로 50%*/
            bottom: 5px; /*하단 기준으로 5px*/
            width: 67px; /*총 너비= 13px * 4 + 15px(사이값)*/
            margin-left: -34px; /*총 너비 67px의 반 = 중앙정렬*/
        }

        #slides>.slides-pagination>li{
            width: 13px;
            background-image: url(./../images/pagination.png);
        }

        #slides>.slides-pagination>li:hover{
            background-position: 0 -13px; /*hover시 y축으로 -13px 이동*/
        }

        #slides>.slides-pagination>li.on{
            background-position: 0 -26px; /*on클래스는 y축으로 -26px 이동(현재 클릭된 것)*/
        }

        #slides>.slides-pagination>li>a{
            display: block;
            height: 13px;
            text-indent: -9999px;
        }

        address{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

</style>

JavaScript (jQuery)

로직

1. DOM을 선택하는 변수선언 (이동할 container와 a태그, 인덱스)
2. a에 대한 클릭 이벤트 구문 작성
3. a태그로 인한 페이지 넘어감 또는 새로고침 기능 방지를 위한 초기값 막는 메서드 작성
4. 클릭한 a태그에 대한 인덱스번호 추출
5. 클래스 on을 이용한 활성화
   • 클릭된 인덱스번호에 해당하는 a의 부모태그인 li에 클래스'on' 추가
   • 클릭된 인덱스번호에 해당하는 a의 부모의 형제들에 클래스'on' 제거
6. 인덱스번호에 해당하는 a 클릭 시 슬라이드 컨테이너 이동
   • 이미지의 가로크기인 -700에 $nowIdx를 곱하는 이유는,
     컨테이너가 이동할 좌측 좌표값이 이미지 크기에 인덱스번호를 곱한 값과 같기 때문

참고이미지

<script>
    $(function(){

        const $container = $('#slides>.slides-container')
        const $indicators = $('#slides>.slides-pagination>li>a');
        let $nowIdx = 0; 

        $indicators.on('click',function(evt){
            evt.preventDefault();

            $nowIdx = $indicators.index(this);

            $indicators.eq($nowIdx).parent().addClass('on');
            $indicators.eq($nowIdx).parent().siblings().removeClass('on');

            $container.animate({left:-700*$nowIdx});
        });
    });
</script>