[JavaScript / jQuery] 이미지 슬라이더(캐러셀) 구현하기

 

이런 느낌의 이미지 슬라이더를 만들어보았다

 

HTML

<div class="section" id="project">

        <div class="title">

            Projec<span class="title-end">t</span>

        </div>

        <div class="slider">

            <span class="slider-arrow left-arrow">

                &lt;

            </span>

            <div class="slider-wrapper">

                <div class="slider-slide">

                    <div class="slider-page">

                        <img src="img/proj_1.png" alt="">

                    </div>

                    <div class="slider-page">

                        <img src="img/proj_2.png" alt="">

                    </div>

                    <div class="slider-page">

                        <img src="img/proj_3.png" alt="">

                    </div>

                </div>

            </div>

            <span class="slider-arrow right-arrow">

                &gt;

            </span>

        </div>

        <div class="slider-dots">

            <button class="dot-btn dot-page1"></button>

            <button class="dot-btn dot-page2"></button>

            <button class="dot-btn dot-page3"></button>

        </div>

    </div>

 

CSS

#project .title {

    display: inline-block;

}

.slider {

    width: 800px;

    height: 400px;

    margin: 0 auto;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

}

.slider-wrapper {

    width: 600px;

    height: 400px;

    overflow: hidden;

}

.slider-slide {

    width: 1800px;

    display: flex;

    flex-direction: row;

    transition: all 0.5s;

}

.slider-page {

    width: 600px;

    height: 400px;

}

.slider-page>img {

    width: 600px;

    height: 400px;

}

.slider-arrow {

    margin: 0 20px;

    display: inline-block;

    font-size: 40px;

    cursor: pointer;

}

.slider-dots {

    margin-top: 15px;

}

.dot-btn {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    margin: 0 10px;

    background-color: transparent;

    border: 2px solid black;

    cursor: pointer;

}

.dot-btn.current-page {

    background-color: black;

}

 

JavaSctipt & jQuery

    let page = 1;

    const max_page = 3;

    $('.dot-page1').addClass('current-page');

    function sliding()

    {

        switch(page){

            case 1:

                $('.slider-slide').css('transform', 'translateX(0)');

                $('.dot-page1').addClass('current-page');

                break;

            case 2:

                $('.slider-slide').css('transform', 'translateX(-600px)');

                $('.dot-page2').addClass('current-page');

                break;

            case 3:

                $('.slider-slide').css('transform', 'translateX(-1200px)');

                $('.dot-page3').addClass('current-page');

                break;

        }

    }

    function clearDot(){

        switch(page){

            case 1:

                $('.dot-page1').removeClass('current-page');

                break;

            case 2:

                $('.dot-page2').removeClass('current-page');

                break;

            case 3:

                $('.dot-page3').removeClass('current-page');

                break;

        }

    }

    $('.right-arrow').on('click', () => {

        clearDot();

        if(page == max_page){page = 1;}

        else{page++;}

        sliding();

    })

    $('.left-arrow').on('click', () => {

        clearDot();

        if (page == 1) {page = max_page;}

        else {page--;}

        sliding();

    })

 

    $('.dot-page1').on('click', () => {

        clearDot();

        page = 1;

        sliding();

    })

    $('.dot-page2').on('click', () => {

        clearDot();

        page = 2;

        sliding();

    })

    $('.dot-page3').on('click', () => {

        clearDot();

        page = 3;

        sliding();

    })

페이지를 추가할 경우

스크립트에서 sliding, clearDot 함수에 페이지 추가, max_page 변수 변경, 새로운 dot click 이벤트 추가해주고

css에서 slider-slide 클래스 전체 길이를 600px * 페이지 개수로 설정해 주면 된다

 

좌우 끝 페이지에서 화살표 버튼을 클릭하면 촤르륵 하면서 이동하는 대신 기존처럼 한 페이지씩 넘어가는 모션을 줘보고도 싶은데... 우선은 여기까지만

 

구현하는 데는 몇 시간이 걸렸는데 막상 정리하면서 코드를 보니 그렇게까지 오래 걸릴 일은 아니었던 것 같다 ㅋㅋ ㅠ