본문 바로가기
JavaScript

Carousel 구현하기

by 왜안돼요 2024. 1. 10.
728x90

이제야 쓰는 캐러셀 구현하기,,,

 

🛠️HTML

<div class="wrap">
      <div class="carousel_wrap">
        <div class="carousel">
          <img src="../images/gosimperson 2023-06-21T215108.JPEG" alt="" />
          <img src="../images/gosimperson 2023-09-14T095906.JPEG" alt="" />
          <img src="../images/gosimperson 2024.JPEG" alt="" />
        </div>
        <div class="btnwrap">
          <button class="bgColor">🖤</button>
          <button class="first">화</button>
          <button class="second">이</button>
          <button class="third">팅</button>
          <button class="prev">이전</button>
          <button class="next">다음</button>
        </div>
      </div>
    </div>

 

html은 대단한건 없고

이미지 세장이랑

🖤버튼을 누르면 배경이 검정색으로 바뀌는 용도 다시 누르면 흰 배경

화 - 첫번째 사진

이 - 두번째 사진

팅 - 세번째 사진

이전 다음 버튼은 한장씩 넘어간다

 

💅🏻CSS

* {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .carousel_wrap{
        width: 700px;
        overflow: hidden;
      }
      .carousel {
        width: 100%;
        display: flex;
        transition: transform .5s ease;
        
      }
      img {
        width: 100%;
      }
      .btnwrap {
        margin-top: 10px;
      }

      button {
        padding: 8px 18px;
        font-size: 14px;
        background-color: #fa5a5a;
        color: white;
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.21);
        border-bottom-color: rgba(0, 0, 0, 0.34);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset,
          0 2px 0 -1px rgba(0, 0, 0, 0.13), 0 3px 0 -1px rgba(0, 0, 0, 0.08),
          0 3px 13px -1px rgba(0, 0, 0, 0.21);
      }
      button:active {
        top: 1px;
        border-color: rgba(0, 0, 0, 0.34) rgba(0, 0, 0, 0.21)
          rgba(0, 0, 0, 0.21);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.89),
          0 1px rgba(0, 0, 0, 0.05) inset;
        position: relative;
      }

 

버튼 스타일은 남이 만들어놓은거 스윽 가져왓다

 

적용하면 이렇게 생김

‼️ JS

const bgColorBtn = document.querySelector(".bgColor");
      const firstBtn = document.querySelector(".first");
      const secondBtn = document.querySelector(".second");
      const thirdBtn = document.querySelector(".third");
      const prevBtn = document.querySelector(".prev");
      const next = document.querySelector(".next");
      const carousel = document.querySelector(".carousel");

먼저 엘리먼트들을 선택해줍니딘

 

그리고 사진 순번 인덱스 변수 하나 만들기

let index = 0;

 

🖤버튼 누르면 뒷배경 검정색으로 바꾸기

bgColorBtn.addEventListener("click", (e) => {
        if (document.body.style.backgroundColor == "black") {
          document.body.style.backgroundColor = "";
        } else {
          document.body.style.backgroundColor = "black";
        }
      });

버튼 클릭했을때 뒷배경 스타일이 블랙이면 스타일 없애주시고요 아니면 블랙으로 바꿔달라

 

'화' 버튼 누르면 첫번째 사진으로 이동

firstBtn.addEventListener("click", () => {
        index = 0;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });

버튼 클릭하면여 인덱스는 0이고 캐러셀로묶어둔 이미지가 가로로 이동하게 해주십셔  이미지 크기만큼 이동

 

'이' 버튼 누르면 두번째 사진으로 이동

secondBtn.addEventListener("click", () => {
        index = 1;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });

얘는 버튼 클릭하면 인덱스는 1입니더

나머지는 동일

 

'팅' 버튼 누르면 세번째 사진으로 이동

thirdBtn.addEventListener("click", () => {
        index = 2;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });

동일

 

이전,다음 버튼 

next.addEventListener("click", () => {
        if (index === 2) return;
        index +=1;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });

      prevBtn.addEventListener("click",()=>{
        if(index === 0) return;
        index -= 1;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      })

next 버튼 클릭하면 클릭할때마다 인덱스를 1씩 증가 인덱스가 2와 같다면 더 이상 오른쪽으로 넘어가지 않음

prev버튼 클릭하면 클릭할때마다 인덱스를 1씩 감소 인덱스가 0과 같다면 더 이상 왼쪽으로 넘어가지 않는다.

 

전체코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .carousel_wrap{
        width: 700px;
        overflow: hidden;
      }
      .carousel {
        width: 100%;
        display: flex;
        transition: transform .5s ease;
        
      }
      img {
        width: 100%;
      }
      .btnwrap {
        margin-top: 10px;
      }

      button {
        padding: 8px 18px;
        font-size: 14px;
        background-color: #fa5a5a;
        color: white;
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.21);
        border-bottom-color: rgba(0, 0, 0, 0.34);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset,
          0 2px 0 -1px rgba(0, 0, 0, 0.13), 0 3px 0 -1px rgba(0, 0, 0, 0.08),
          0 3px 13px -1px rgba(0, 0, 0, 0.21);
      }
      button:active {
        top: 1px;
        border-color: rgba(0, 0, 0, 0.34) rgba(0, 0, 0, 0.21)
          rgba(0, 0, 0, 0.21);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.89),
          0 1px rgba(0, 0, 0, 0.05) inset;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="carousel_wrap">
        <div class="carousel">
          <img src="../images/gosimperson 2023-06-21T215108.JPEG" alt="" />
          <img src="../images/gosimperson 2023-09-14T095906.JPEG" alt="" />
          <img src="../images/gosimperson 2024.JPEG" alt="" />
        </div>
        <div class="btnwrap">
          <button class="bgColor">🖤</button>
          <button class="first">화</button>
          <button class="second">이</button>
          <button class="third">팅</button>
          <button class="prev">이전</button>
          <button class="next">다음</button>
        </div>
      </div>
    </div>

    <script>
      const bgColorBtn = document.querySelector(".bgColor");
      const firstBtn = document.querySelector(".first");
      const secondBtn = document.querySelector(".second");
      const thirdBtn = document.querySelector(".third");
      const prevBtn = document.querySelector(".prev");
      const next = document.querySelector(".next");
      const carousel = document.querySelector(".carousel");

      let index = 0;
      //  배경 색
      bgColorBtn.addEventListener("click", (e) => {
        if (document.body.style.backgroundColor == "black") {
          document.body.style.backgroundColor = "";
        } else {
          document.body.style.backgroundColor = "black";
        }
      });

      firstBtn.addEventListener("click", () => {
        index = 0;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });
      secondBtn.addEventListener("click", () => {
        index = 1;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });
      thirdBtn.addEventListener("click", () => {
        index = 2;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });

      next.addEventListener("click", () => {
        if (index === 2) return;
        index +=1;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      });

      prevBtn.addEventListener("click",()=>{
        if(index === 0) return;
        index -= 1;
        carousel.style.transform = `translateX(-${700 * index}px)`;
      })
    </script>
  </body>
</html>

 

결과

 

 

 

참고

 

완전 초 단순하게 캐러셀(Carousel) 구현해보기

캐러셀(Carousel) 캐러셀이라는 용어가 조금 생소하실 수도 있는데요 캐러셀은 여러개의 이미지 혹은 영상을 슬라이더 형태로 만들어 표현해주는 것을 말합니다. 바로 위 움짤처럼 말이죠! 정말

junjangsee.tistory.com

 

'JavaScript' 카테고리의 다른 글

미니 프로젝트 - 아이스크림 퀴즈 만들기  (1) 2024.01.22
카운트 다운 타이머 만들기  (0) 2024.01.10

관련글

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바