[Javascript] Carousel 구현

마릴린벅시

2023. 2. 13. 08:35ㆍ프론트엔드

Javascript : Carousel 구현

carousel을 구현하는 다양한 방법이 있지만, 내가 신경쓴 부분은 3가지였다 :

터치패드로 슬라이딩이 될 것
무한 슬라이딩이 될 것
이미지가 좌/우로 넘어갈 때 슬라이딩 애니메이션으로 넘어갈 것

swiperJS를 사용했고, 이 라이브러리는 리액트전용 버전도 존재한다. 오늘은 자바스크립트로만 구현해보았다.

먼저 세 가지 파일을 생성한다 : index.html, main.js, style.css

index.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" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.4/swiper-bundle.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div class="card">
      <h1>Carousel</h1>
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./illust-1.svg" width="300px" height="300px" />
            <h3>여러분의 스타일을 찾아보세요!</h3>
          </div>
          <div class="swiper-slide">
            <img src="./avatar1.png" width="300px" height="300px" />
          </div>
          <div class="swiper-slide">
            <img src="./avatar2.png" width="300px" height="300px" />
          </div>
          <div class="swiper-slide">
            <img src="./avatar3.png" width="300px" height="300px" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.4/swiper-bundle.min.js"></script>
    <script type="module" src="./main.js"></script>
  </body>
</html>

style.css 코드

html,
body {
  height: 100%;
  background-image: url('./background.svg');
  background-repeat: no-repeat;
  background-size: 100%;
}

* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
img {
  width: 100%;
  object-fit: contain;
  opacity: 0.9;
}

h1,
h3 {
  color: #ffffff;
}

.card {
  width: 400px;
  border-radius: 10px;
  background: #27263cb5;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0 130px;
}

.swiper .swiper-pagination .swiper-pagination-bullet {
  background: #ffffff;
  width: 8px;
  height: 8px;
}

.swiper-horizontal .swiper-pagination-bullets .swiper-pagination-horizontal {
  bottom: 56px;
}

main.js 코드

const swiper = new Swiper('.swiper', {
  speed: 500,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  /* enables touch pad action */
  mousewheel: {
    forceToAxis: true,
  },
});

팁

배경화면에 사용된 오로라 같은 배경 이미지는 svg배경화면 제너레이터인 https://fffuel.co/ 에서 생성했다.

각 슬라이더에 들어가는 이미지는 https://peeps.ui8.net/ 와 https://blush.design/collections 에서 무료 리소스를 다운받아 사용했다.

저작자표시 비영리

'프론트엔드' 카테고리의 다른 글

[HTML] 당신이 몰랐을 수도 있는 시맨틱 태그들 구조 편 (1)	2023.11.17
리덕스 아키텍처 Best practice (1)	2023.11.03
[React] useRef, forwardRef 사용법 (0)	2023.02.12
[React] React Hook이란? (0)	2023.02.12
[NextJS] Next에서 페이지에 심은 meta태그가 pre-render되지 않는 문제 해결. (1)	2022.12.17

The World is Your Oyster