비전공자 개발일기

Javascript - Vertical Slider 본문

Javascript

Javascript - Vertical Slider

HiroDaegu 2021. 9. 24. 00:20
728x90
SMALL

<!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>Vertical Slider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="slider-container">
    <div class="left-slide">
      <div style="background-color: #FD3555;">
        <h1>SPRING</h1>
        <p>warm</p>
      </div>
      <div style="background-color: #2A86BA;">
        <h1>SUMMER</h1>
        <p>hot</p>
      </div>
      <div style="background-color: #252E33;">
        <h1>AUTUMN</h1>
        <p>cool</p>
      </div>
      <div style="background-color: #FFB866;">
        <h1>WINTER</h1>
        <p>cold</p>
      </div>
    </div>
    <div class="right-slide">
      <div style="background-image: url('./images/winter.jpg');"></div>
      <div style="background-image: url('./images/autumn.jpg');"></div>
      <div style="background-image: url('./images/summer.jpg');"></div>
      <div style="background-image: url('./images/spring.jpg');"></div>
    </div>
    <div class="action-buttons">
      <button class="down-button">
        <i class="fas fa-arrow-down"></i>
      </button>
      <button class="up-button">
        <i class="fas fa-arrow-up"></i>
      </button>
    </div>
  </div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  height: 100vh;
}

.slider-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.left-slide {
  height: 100%;
  width: 35%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .5s ease-in-out;
}

.left-slide > div {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.left-slide h1 {
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: -30px;
}

.right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 35%;
  width: 65%;
  transition: transform .5s ease-in-out;
}

.right-slide > div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
}

button {
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

button:hover {
  color: #222;
}

button:focus {
  outline: none;
}

.slider-container .action-buttons button {
  position: absolute;
  left: 35%;
  top: 50%;
  z-index: 100;
}

.slider-container .action-buttons .down-button {
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
const slidesLength = slideRight.querySelectorAll("div").length;

let activeSlideIndex = 0;

slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

upButton.addEventListener("click", () => {
  changeSlide("up")
});
downButton.addEventListener("click", () => {
  changeSlide("down")
});

const changeSlide = (direction) => {
  const sliderHeight = sliderContainer.clientHeight;
  if(direction === "up") {
    activeSlideIndex++;
    if(activeSlideIndex > slidesLength - 1) {
      activeSlideIndex = 0;
    }
  } else if(direction === "down") {
    activeSlideIndex--;
    if(activeSlideIndex < 0) {
      activeSlideIndex = slidesLength - 1;
    }
  }

  slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
  slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - Progress Steps  (0) 2021.09.26
Javascript - Expanding Cards  (0) 2021.09.25
Javascript - Blurry Loading  (0) 2021.09.23
Javascript - Dynamic Banner  (0) 2021.09.22
Javascript - 3D Page  (0) 2021.09.21
'Javascript' Related Articles more