반응형

🚀 허접한 슬라이더

결과 보기 Click

 

> 허접한 슬라이더(1)

 

🌵 추가사항

  • 이미지 아래 원 추가
  • 3초 후 이미지 자동 변경

🌵 앞으로.. 

  • 타인이 구현한 방식 알아보기

  • 다른 형식의 슬라이더 만들기

slider.js

//Current DIV
let current = 1;

//Call by btn class
const btnPre = document.querySelector(".pre"),
btnNext = document.querySelector(".next");

//button Next
function handleNextEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    let circle = document.querySelector(`.circle__0${current}`);
    target.classList.remove("showing");
    circle.classList.remove("showing__circle");

    current = current + 1 < 6 ? current + 1 : 1;
    
    target = document.querySelector(`.slider__0${current}`);
    circle = document.querySelector(`.circle__0${current}`);
    target.classList.add("showing");
    circle.classList.add("showing__circle");
}
btnNext.addEventListener("click", handleNextEvent);

//button Pre
function handlePreEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    let circle = document.querySelector(`.circle__0${current}`);
    target.classList.remove("showing");
    circle.classList.remove("showing__circle");
    
    current = current - 1 > 0 ? current - 1 : 5;
    
    target = document.querySelector(`.slider__0${current}`);
    circle = document.querySelector(`.circle__0${current}`);
    target.classList.add("showing");
    circle.classList.add("showing__circle");
}
btnPre.addEventListener("click", handlePreEvent);

function init(){
    setInterval(handleNextEvent, 5000);
}

init();

 

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Slider</title>
    <body>
        <div class="slider">
            <div class="slider__01 showing"><img src="images/1.jpg"></div>
            <div class="slider__02"><img src="images/2.jpg"></div>
            <div class="slider__03"><img src="images/3.jpg"></div>
            <div class="slider__04"><img src="images/4.jpg"></div>
            <div class="slider__05"><img src="images/5.jpg"></div>
            <div class="slider__bg"></div>
        </div>

        <div class="circles">
            <div class="circle circle__01 showing__circle"></div>
            <div class="circle circle__02"></div>
            <div class="circle circle__03"></div>
            <div class="circle circle__04"></div>
            <div class="circle circle__05"></div>
        </div>

        <div class="btn__div">
            <span><button class="pre">👈</button></span>
            <span><button class="next">👉</button></span>
        </div>

        <script src="slider.js"></script>
    </body>
  </head>

 

style.css

/*slider item*/

img {
    width: 400px; height:200px;
}

.slider{width: 400px; height:200px; position: relative; margin-bottom: 10px;}
.slider__01{ position: absolute; }
.slider__02{ position: absolute; }
.slider__03{ position: absolute; }
.slider__04{ position: absolute; }
.slider__05{ position: absolute; }
.slider__bg{ position: absolute; width: 400px; height:200px; background-color: black; z-index: 0; }

/*btn*/
.btn__div{text-align:center; width: 400px;}

/*function*/
.showing{ z-index: 1; animation: fadeIn 0.5s linear; }

/*circle*/
.circles{width: 400px; position: relative; margin-bottom: 50px;}

.circle{
  position: absolute;
  width: 10px; 
  height: 10px; 
  background-color: gray;
  border-radius: 50%;
}

.circle__01{ left:10%; }
.circle__02{ left:30%; }
.circle__03{ left:50%; }
.circle__04{ left:70%; }
.circle__05{ left:90%; }

.showing__circle{width:13px; height:13px;}

/*animation*/
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
반응형
저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까?  (0) 2020.08.29
바닐라 자바스크립트 계산기 만들기  (0) 2020.08.13
바닐라 자바스크립트 슬라이더 만들기(1)  (4) 2020.08.08

+ Recent posts

티스토리툴바