Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

Leeyanggoo

[JS] CSS와 JS로 간단한 슬라이드 효과 만들기!! 본문

2023/JavaScript

[JS] CSS와 JS로 간단한 슬라이드 효과 만들기!!

Leeyanggoo 2023. 3. 27. 04:47

 

 

지난 레이아웃 만들기에서 슬라이드 유형을 만들었습니다.

근데 디자인만 하고 기능을 못 넣었던 게 아쉬워서 어떻게 슬라이드 기능을 구현하는지 알아보고 예제를 만들어봤습니다!

원래 예제는 CSS와 HTML이 적용된 박스들이 커서 바로 적용하지 못했습니다ㅠㅠ..

그래도 원리를 알아보는 시간이라 생각하면 되겠습니다!

 

CSS를 이용해서 div 쌓기!

 

<style>
    * {
        margin: 0;
    }
    section {
        overflow: hidden;
    }
    .container {
        transition: transform 0.5s;
    }
    .inner {
        width: 100vw;
        float: left;
    }
    .inner img {
        width: 100%;   
    }
    button {
        width: 100px;
        margin: 10px;
        padding: 10px;
    }
    .slider__btn {
        text-align: center;
        display: block;
    }
    .slider__btn .btn.active {
        background-color: #000;
        color: #fff;
    }
</style>
</head>
<body>
    <section>
        <div class="container">
            <div class="inner">
                <img src="../assets/img/sliderType01_01.jpg" alt="">
            </div>
            <div class="inner">
                <img src="../assets/img/sliderType01_02.jpg" alt="">
            </div>
            <div class="inner">
                <img src="../assets/img/sliderType01_03.jpg" alt="">
            </div>
        </div>
    </section>

    <div class="slider__btn">
        <button class="btn active">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
    </div>

 

먼저 만들 슬라이드 개수만큼 div를 만들고 이미지를 추가했습니다.

그리고 몇 번째 슬라이드인지 확인하는 버튼도 그에 맞게 만들었습니다.

그리고 innerwidth100vw를 줘서 한 화면에 하나의 슬라이드만 보이게 하고 float: left로 가로로 나열된 모양을 만들었습니다.

section에는 overflow: hidden을 줘서 넘치는 슬라이드가 보이지 않게 만들었습니다.

또한 container에 애니메이션 효과를 만들기 위해서 "transition: transform 0.5s"을 줬습니다. 

 

 

이런 구성이 됩니다.

저는 슬라이드 하나하나에 vw를 100만큼 빼서 다음 슬라이드로 넘어가게 만들었습니다.

따라서 이 슬라이드를 자바스크립트를 통해 class와 style을 부여해서 넘겨보도록 하겠습니다!!

 

Javascript를 이용해 효과 부여하기!

 

<script>
    const container = document.querySelector(".container")
    const btn = document.querySelectorAll(".slider__btn .btn")

    //btn 개수에 따라 vw 변경
    container.style.width = `${btn.length}00vw`

    //몇 번째 btn인지에 따라 옮기는 vw 변경
    btn.forEach((button, index) => {
        button.addEventListener("click", function(event){
            container.style.transform = `translate(-${index}00vw)`
            //사용자가 클릭한 버튼에 active class 추가하기
            btn.forEach((button) => {
                if(button == event.target) {
                    button.classList.add("active");
                } else {
                    button.classList.remove("active");
                }
            });
        })

    })

</script>

 

먼저 선택자로 container와 btn을 선택했습니다.

btn은 여러 개가 있으니 querySelectorAll()을 이용해서 모두 선택해줬습니다.

앞서 inner의 width를 100vw를 준만큼 container는 inner의 개수만큼 vw가 늘어나야 하기에 "container.style.width = `${btn.length}00vw`"를 이용해 vw를 늘려줬습니다!

 

다음은 제일 중요한 슬라이드를 넘어가게 만드는 효과를 주는 부분입니다.

각각 버튼마다 translate(-${index}00vw)를 줘서 다음 화면으로 넘어가게 만들었습니다.

이때 다음 버튼이 될수록 빼는 vw의 값이 높아야 하기 때문에 100vw당 하나의 슬라이드이므로, 앞의 숫자를 버튼의 개수인 "index"로 처리했습니다.

"style.transform"을 주게 되면 해당 요소의 CSS 속성에 transform을 추가하게 되고, transform의 속성으로 translate를 그뒤에 정할 값만큼 추가하면 됩니다.

 

다음은 화면의 슬라이드가 몇 번째인지 나타내기 위해서 버튼에 "active" class를 추가해서 표현했습니다.

button의 색상을 반전시켜서 사용자가 클릭한 버튼이 무엇인지 알아보게 했습니다.

function의 event는 이벤트로 생성된 이벤트 객체로 addEventListener("click"의 정보를 담고 있습니다.

여기서 뒤에 event.target이라고 쓰게 되면 사용자가 클릭한 버튼 요소만을 가리키게 됩니다.

이 점을 이용해서 사용자가 버튼을 클릭했을 때(첫 번째 forEach), 버튼이 클릭한 요소가 맞는 경우(if(button == event.target)에 "active" class를 추가한다(두 번째 forEach)는 스크립트를 완성할 수 있습니다.


이번엔 슬라이드 효과를 어떻게 만들고 자바스크립트로 어떤 식으로 선택자를 활용하고 변수에 담는지 알아보기 위해 공부해봤습니다.

다음엔 이전의 슬라이드 유형 레이아웃 예제를 이용해서 제대로 된 슬라이드 페이지를 구현해보겠습니다!!


 

이번에 참고한 코딩애플 님의 영상입니다. :)

딱 자바스크립트 3줄로 만드는 DIY 이미지 슬라이더(Carousel)