코딩 공부/JAVASCRIPT

슬라이드 이펙트 : 버튼, 닷메뉴

천서리 2023. 4. 13. 20:26
QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)
반응형

슬라이드이펙트란?

웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다.

 

슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다.

 

주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나 프레임워크를 사용하여 더욱 쉽고 간편하게 구현할 수도 있습니다.

 

 

 

 

슬라이드 이펙트(6) 코드

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06. 슬라이드 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slider.css">
    <style>
        /* slider__wrap */
        .slider__wrap {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .slider__img {  /* 이미지가 보이는 영역 */
            position: relative;
            width: 800px;
            height: 450px;
            overflow: hidden;
        }
        .slider__inner {    /* 이미지 움직이는 영역 */
            display: flex;
            flex-wrap: wrap;
            width: 4800px;  /* 총 이미지 영역 */
            height: 450px;
        }
        .slider {   /* 개별적인 이미지 */
            position: relative;
            width: 800px;
            height: 450px;
        }
        .slider__btn a {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #ffffffbd;
            transition: all 0.3s ease;
        }
        .slider__btn a:hover {
            border-radius: 50%;
            background-color: rgb(245, 242, 67);
            color: #000;
        }
        .slider__btn a.prev {
            left: 0;
        }
        .slider__btn a.next {
            right: 0;
        }
        .slider__dot {
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
        }
        .slider__dot .dot {
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, 0.3);
            display: inline-block;
            border-radius: 50%;
            text-indent: -9999px;
            transition: all 0.3s;
            margin: 2px;
        }
        .slider__dot .dot.active {
            background-color: rgba(255, 255, 255, 1);
        }
    </style>
</head>
<body class="img09 bg10 font11">
    <header id="header">
        <h1>Javascript Slider Effect06</h1>
        <p>슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴)</p>
        <ul>
            <li><a href="sliderEffect01.html">1</a></li>
            <li><a href="sliderEffect02.html">2</a></li>
            <li><a href="sliderEffect03.html">3</a></li>
            <li><a href="sliderEffect04.html">4</a></li>
            <li><a href="sliderEffect05.html">5</a></li>
            <li class="active"><a href="sliderEffect06.html">6</a></li>
            <li><a href="sliderEffect07.html">7</a></li>
        </ul>
    </header> 
    <!-- //header -->

    <main id="main">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
                    <div class="slider s2"><img src="./img/sliderEffect10-min.jpg" alt="이미지10"></div>
                    <div class="slider s3"><img src="./img/sliderEffect09-min.jpg" alt="이미지9"></div>
                    <div class="slider s4"><img src="./img/sliderEffect07-min.jpg" alt="이미지7"></div>
                    <div class="slider s5"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
                </div>
            </div>
            <div class="slider__btn">
                <a href="#" class="prev" title="왼쪽이미지">prev</a>
                <a href="#" class="next" title="다음이미지">next</a>
            </div>
            <div class="slider__dot">
                <!-- <a href="#" class="active dot" >이미지1</a>
                <a href="#" class="dot">이미지2</a>
                <a href="#" class="dot">이미지3</a>
                <a href="#" class="dot">이미지4</a>
                <a href="#" class="dot">이미지5</a> -->
            </div>
        </div>
    </main>
    <!-- //main -->

 

 

script 코드

<script>
    //선택자
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");         //보여지는 영역
    const sliderInner = sliderWrap.querySelector(".slider__inner");     //움직이는 영역
    const slider = sliderWrap.querySelectorAll(".slider");              //개별 이미지
    const sliderDot = sliderWrap.querySelector(".slider__dot");         //닷 메뉴
    const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a");    //버튼

    let currentIndex = 0;                                               //현재 보이는 이미지
    let sliderCount = slider.length;                                    //이미지 갯수
    let sliderInterval = 2000;                                          //이미지 변경 간격 시간
    let sliderWidth = slider[0].offsetWidth;                            //이미지 가로 값
    let dotIndex = "";

    function init(){
        //이미지 갯수만큼 닷 메뉴 생성
        slider.forEach(() => dotIndex += "<a href ='#' class='dot'>이미지</a>");
            sliderDot.innerHTML = dotIndex;

            //첫 번째 닷 메뉴한테 활성화 표시하기
            sliderDot.firstChild.classList.add("active");

    }
    init();


    //이미지 이동시키기
    function gotoSlider(num){
        sliderInner.style.transition = "all 400ms";
        sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
        currentIndex = num;

        //닷 메뉴 활성화하기
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach((active) => active.classList.remove("active"));
        dotActive[num].classList.add("active");
    }

    //버튼을 클릭했을 때
    sliderBtn.forEach((btn, index) => {
        btn.addEventListener("click", () => {
            let prevIndex = (currentIndex+(sliderCount-1)) % sliderCount;
            let nextIndex = (currentIndex+1) % sliderCount;   //1 2 3 4 0 1 2 3 4

            if(btn.classList.contains("prev")){
                gotoSlider(prevIndex);
            } else {
                gotoSlider(nextIndex);
            }
        });
    });

    //dot 클릭
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
        dot.addEventListener("click", () => {
            gotoSlider(index);
        });
    });

</script>

 

 

이미지 슬라이드 쇼를 구성하는 HTML 요소들 중에서 클래스 이름이 .slider__wrap, .slider__img, .slider__inner, .slider, .slider__dot, .slider__btn a인 요소들을 각각 querySelector 또는 querySelectorAll 메소드를 사용하여 찾아 변수에 할당합니다.

 

 

let currentIndex = 0;                                               //현재 보이는 이미지
let sliderCount = slider.length;                                    //이미지 갯수
let sliderInterval = 2000;                                          //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth;                            //이미지 가로 값
let dotIndex = "";

 

  • currentIndex : 현재 보이는 이미지의 인덱스를 저장하는 변수입니다. 초기값은 0으로 설정됩니다.
  • sliderCount : 슬라이더에 포함된 이미지의 개수를 저장하는 변수입니다.
  • sliderInterval : 이미지 변경 간격 시간을 설정하는 변수입니다. 이 값은 2초로 초기화됩니다.
  • sliderWidth : 슬라이더 이미지 하나의 가로 폭을 저장하는 변수입니다. 이 값은 slider 변수를 사용하여 첫 번째 이미지 요소를 선택한 후, offsetWidth 프로퍼티를 사용하여 구합니다.
  • dotIndex : 닷 메뉴 요소들을 생성하기 위해 사용되는 문자열 변수입니다. 이 변수는 초기값으로 빈 문자열을 가집니다.

 

 

function init(){
    //이미지 갯수만큼 닷 메뉴 생성
    slider.forEach(() => dotIndex += "<a href ='#' class='dot'>이미지</a>");
        sliderDot.innerHTML = dotIndex;

        //첫 번째 닷 메뉴한테 활성화 표시하기
        sliderDot.firstChild.classList.add("active");

}
init();

 

init() 함수에서는 이미지의 갯수만큼 닷 메뉴를 생성합니다.

이를 위해 forEach() 메소드를 사용하여 dotIndex 변수에 닷 메뉴의 HTML 코드를 추가하고, 이를 innerHTML 속성을 통해 .slider__dot 요소에 할당합니다.

그리고 첫 번째 닷 메뉴를 활성화 상태로 표시하기 위해 classList 속성을 사용하여 active 클래스를 추가합니다.

 

//이미지 이동시키기
function gotoSlider(num){
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
    currentIndex = num;

    //닷 메뉴 활성화하기
    let dotActive = document.querySelectorAll(".slider__dot .dot");
    dotActive.forEach((active) => active.classList.remove("active"));
    dotActive[num].classList.add("active");
}

함수 내부에서는 sliderInner 요소의 transition 속성과 transform 속성을 수정하여 이미지 이동 애니메이션을 적용합니다. translateX() 함수를 사용하여 현재 이미지의 인덱스(num)에 따라 sliderWidth 값의 배수만큼 이미지를 이동시킵니다.

 

함수 내부에서는 currentIndex 변수를 업데이트하여 현재 보여지는 이미지의 인덱스를 저장합니다.

 

마지막으로, 닷 메뉴를 업데이트하기 위해 querySelectorAll() 메소드를 사용하여 모든 닷 메뉴 요소를 선택하고, 현재 보여지는 이미지에 해당하는 닷 메뉴에 active 클래스를 추가합니다.

이를 위해 forEach() 메소드를 사용하여 모든 닷 메뉴 요소에서 active 클래스를 삭제한 후, 현재 보여지는 이미지에 해당하는 닷 메뉴 요소에만 active 클래스를 추가합니다.

 

 

/버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
    btn.addEventListener("click", () => {
        let prevIndex = (currentIndex+(sliderCount-1)) % sliderCount;
        let nextIndex = (currentIndex+1) % sliderCount;   //1 2 3 4 0 1 2 3 4

        if(btn.classList.contains("prev")){
            gotoSlider(prevIndex);
        } else {
            gotoSlider(nextIndex);
        }
    });
});

 

liderBtn 변수에 할당된 버튼 요소들을 forEach() 메소드를 사용하여 하나씩 선택하고, 각각의 버튼 요소에 클릭 이벤트를 추가합니다.

 

클릭 이벤트가 발생했을 때, 이전 이미지의 인덱스와 다음 이미지의 인덱스를 계산합니다.

이전 이미지의 인덱스는 currentIndex에서 -1을 한 값으로 sliderCount로 나눈 나머지를 구하면 됩니다.

다음 이미지의 인덱스는 currentIndex에서 +1을 한 값으로 sliderCount로 나눈 나머지를 구하면 됩니다.

이 때, % 연산자를 사용하여 인덱스가 0 또는 sliderCount-1일 경우, 인덱스를 조정해줍니다.

 

btn.classList.contains() 메소드를 사용하여 이전 버튼인지, 다음 버튼인지 판별하고, gotoSlider() 함수를 호출하여 해당하는 이미지로 이동시킵니다. 이 때, 이전 버튼을 클릭한 경우에는 이전 이미지의 인덱스를, 다음 버튼을 클릭한 경우에는 다음 이미지의 인덱스를 인자로 전달합니다.

 

 

//dot 클릭
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index);
    });
});

.slider__dot .dot 선택자를 사용하여 닷 메뉴 요소들을 모두 선택한 후, forEach() 메소드를 사용하여 하나씩 선택합니다. 각각의 닷 메뉴 요소에 클릭 이벤트를 추가합니다.

 

클릭 이벤트가 발생했을 때, 해당하는 닷 메뉴의 인덱스를 gotoSlider() 함수의 인자로 전달하여 해당하는 이미지로 이동시킵니다. 이 때, index 변수에는 클릭한 닷 메뉴 요소의 인덱스 값이 할당됩니다.

 

버튼 클릭

 

 

dot 클릭

반응형

'코딩 공부/JAVASCRIPT'의 다른글

  • 현재글슬라이드 이펙트 : 버튼, 닷메뉴

관련글

댓글
Adventure Time - BMO

티스토리툴바