자바스크립트 캐러셀 슬라이더(Carousel slider) 만들기

자바스크립트

자바스크립트 캐러셀 슬라이더(Carousel slider) 만들기

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 7. 12. 16:46

HTML

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/5951a7bf3c.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="slider">
        <div class="slider-item">1</div>
        <div class="slider-item">2</div>
        <div class="slider-item">3</div>
        <div class="slider-item">4</div>
        <div class="slider-item">5</div>
    </div>
    <div class="arrow">
        <button class="left">

            <i class="fas fa-arrow-left"></i>
        </button>
        <button class="right">

            <i class="fas fa-arrow-right"></i>
        </button>
    </div>
    
</body>
<script src="index.js"></script>
</html>

HTML 에서는 슬라이더를 보여줄 5가지의 개체들과 화살표를 추가했습니다

CSS

body{
    border:0px;
    padding:0px;
    margin: 0px;
    
}
.slider{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.slider-item{
    height: 400px;
    width: 100%;
    text-align: center;
    font: 800;
    font-size: 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    top: 0;
    position: absolute;
    z-index: 0;
    opacity: 0;
    transition:all 0.5s ease-in-out;
    transform: scale(0.9);
}

.showing{
    z-index: 1;
    opacity: 1;
    transform: none;
}

.slider-item:nth-child(1){
    background-color: #30A9DE;
    justify-self: center;
}
.slider-item:nth-child(2){
    background-color: #EFDC05;
}
.slider-item:nth-child(3){
    background-color: #E53A40;
}
.slider-item:nth-child(4){
    background-color: #2EC4B6;
}
.slider-item:nth-child(5){
    background-color: #EFFFE9;
    color:black;
}

.fas{
    font-size: 28px;
    z-index: 1;
    position: relative;
}

.arrow{
    width: 95%;
    margin: auto;
    height: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

CSS에서는 슬라이더에 표현될 화면을 position absolute 와 top 0px 로 겹치게 하였고 z-index 변경을 통해서 showing 클래스를 가지게 되는 화면만 맨 위에 올라가도록 하였습니다.

Javascript

const SHOWING_CLASS = "showing";
const firstSlide = document.querySelector(".slider-item:first-child");
const lastSlide = document.querySelector(".slider-item:last-child");
function slide() {
    const currentSlide = document.querySelector(`.${SHOWING_CLASS}`);
    if (currentSlide){
        currentSlide.classList.remove(SHOWING_CLASS);
        const nextSlide = currentSlide.nextElementSibling;
        if(nextSlide) {
            nextSlide.classList.add(SHOWING_CLASS);
        }else{
            firstSlide.classList.add(SHOWING_CLASS);
        }
    }else{
        firstSlide.classList.add(SHOWING_CLASS);
    }

}

// function slideButton() {
//     const currentSlide = document.querySelector(`.${SHOWING_CLASS}`);
//     const leftButton = document.querySelector(".left") 
//     const rightButton = document.querySelector(".right") 
//     const nextSlide = currentSlide.nextElementSibling;
//     const backSlide = currentSlide.previousElementSibling;
    
//     const handlePrevious =() =>{
//         if(currentSlide){

//             currentSlide.classList.remove(SHOWING_CLASS);
//         }
//             if(backSlide){
//                 backSlide.classList.add(SHOWING_CLASS);
//             }else{
//                 lastSlide.classList.add(SHOWING_CLASS);
//             }
//     }
    
//     const handleNext =()=>{
//         if(currentSlide){

//             currentSlide.classList.remove(SHOWING_CLASS);
//         }
//             if(nextSlide) {
//                 nextSlide.classList.add(SHOWING_CLASS);
//             }else{
//                 firstSlide.classList.add(SHOWING_CLASS);
//             }
//     }
    

//     let noneOnce = {
//         once : false
//     };
    
//     leftButton.addEventListener("click",handlePrevious,noneOnce);
//     rightButton.addEventListener("click",handleNext,noneOnce);
// }

slide();
setInterval(slide,2000);

Showing 클래스를

nextElementSibling; 기능을 사용하여서 다음슬라이더가 있을 경우 추가하도록 하였습니다

화살표를 눌렀을 때 화면이 변경되도록 하려고 해보았으나 한번만 작동이 되고 그 다음에는 함수가 작동하지 않아서 내용에서 빼버렸습니다.

데모 사이트입니다

https://gilpop8663.github.io/slider/

Document

1 2 3 4 5

gilpop8663.github.io