멋진 Swiper 캐러셀 웹 앱 제작 방법

소개

이 프로젝트에서는 우주 테마 콘텐츠를 특징으로 하는 시각적으로 매력적인 캐러셀 레이아웃을 갖춘 Swiper 캐러셀 웹 앱을 만드는 방법을 배우게 됩니다. 이 앱을 통해 사용자는 다양한 슬라이드를 탐색하고 우주에 대한 흥미로운 사실이 담긴 카드를 볼 수 있습니다.

Swiper 캐러셀의 미리보기는 다음과 같습니다.

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

웹 앱의 HTML 골격을 구성하는 방법
Swiper 캐러셀을 HTML 구조에 임베딩하는 방법
앱 배경에 원과 애니메이션 플로팅 원을 추가하는 방법
브라우저 간 일관된 스타일링을 보장하기 위해 기본적인 CSS 리셋을 구현하는 방법
앱의 주요 섹션과 콘텐츠 홀더의 스타일을 지정하는 방법
배경에 플로팅 원을 디자인하고 애니메이션화하는 방법
Swiper 캐러셀 및 해당 구성 요소의 스타일을 지정하는 방법
JavaScript 를 사용하여 Swiper 캐러셀을 초기화하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

우주 테마 콘텐츠를 갖춘 시각적으로 매력적인 Swiper 캐러셀 웹 앱을 생성할 수 있습니다.
웹 앱의 HTML 구조 및 레이아웃을 구현할 수 있습니다.
사용자 인터페이스를 향상시키기 위해 CSS 스타일링 및 애니메이션을 적용할 수 있습니다.
JavaScript 를 사용하여 Swiper 캐러셀을 초기화하고 구성할 수 있습니다.

HTML 골격 구성

요구 사항:

문자 집합 및 뷰포트 설정을 정의하기 위해 필수 메타 태그를 포함합니다.
외부 스타일시트 및 스크립트에 연결합니다.

기능:

기반이 될 기본적인 HTML 레이아웃을 생성합니다.

단계:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper Carousel</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
    />
  </head>
  <body>
    <!-- partial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
    <!-- We'll slot in our Swiper carousel structure next -->
    <!-- Scripts: Swiper library and our custom logic -->
    <script src="./script.js"></script>
  </body>
</html>

✨ 솔루션 확인 및 연습

Swiper 캐러셀을 HTML 에 삽입

요구 사항:

캐러셀의 콘텐츠를 담을 HTML 내의 구조적 위치.
탐색을 위한 페이지네이션 요소.

기능:

스타일을 지정하고 상호 작용할 수 있는 캐러셀 레이아웃을 임베딩합니다.

단계:

index.html 의 <body> 태그 내에 다음을 추가합니다.

<section>
  <div class="content">
    <div class="swiper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="card">
              <h1>Cosmic Ballet</h1>
              <p>
                The universe is not just a vast expanse of darkness; it's a
                dynamic stage of cosmic ballet. Galaxies dance, stars are born
                and die, and black holes roam, all governed by the timeless
                rhythm of gravitational forces.
              </p>
              <button class="read-more">Read More</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Dark Secrets</h1>
              <p>
                For all its luminous stars and galaxies, the universe hides more
                than it reveals. Dark matter and dark energy, invisible and
                mysterious, make up 95% of the universe, holding the cosmos
                together and driving its expansion.
              </p>
              <button class="read-more">Read More</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Time's Relativity</h1>
              <p>
                In the vast cosmos, time is relative. Near massive objects like
                black holes, time seems to slow down. What feels like minutes
                there could equate to years elsewhere, making the universe a
                theater of time's elasticity.
              </p>
              <button class="read-more">Read More</button>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

✨ 솔루션 확인 및 연습

HTML 에 원 (Circles) 삽입

요구 사항:

많은 둥근 버블을 얻으려면 <ul> 및 <li>를 추가합니다.

기능:

다양한 크기의 많은 버블이 페이지 배경에서 애니메이션됩니다.

단계:

<section>
  <!--swiper content...-->
  <ul class="circles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

✨ 솔루션 확인 및 연습

기본 CSS 리셋 구현

요구 사항:

서로 다른 브라우저에서 일관된 모양을 얻습니다.
브라우저 기본 마진, 패딩 및 박스 치수를 리셋합니다.

기능:

다양한 브라우저에서 스타일링이 일관되게 유지되도록 브라우저 기본 스타일을 무효화합니다.

단계:

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

✨ 솔루션 확인 및 연습

메인 섹션 및 콘텐츠 홀더 스타일링

요구 사항:

전체 뷰포트를 차지하는 메인 섹션.
특정 치수와 스타일을 가진 시각적으로 매력적인 콘텐츠 홀더.

기능:

메인 섹션과 콘텐츠 홀더의 스타일을 지정하여 둘 다 가운데 정렬되도록 하고 우주 테마의 모양을 부여합니다.

단계:

section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7883a1;
  min-height: 100vh;
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(30px);
  border-radius: 20px;
  width: min(900px, 100%);
  z-index: 10;
}

✨ 솔루션 확인 및 연습

애니메이션 플로팅 원 디자인

요구 사항:

메인 섹션에 대한 동적 배경.
시간이 지남에 따라 움직이고 모양이 변하는 떠다니는 원.

기능:

사용자 참여를 향상시키기 위해 떠오르고, 회전하며, 불투명도가 변경되는 애니메이션 그라데이션 원으로 배경을 풍부하게 합니다.

단계:

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: #0f75c3;
  background-image: linear-gradient(
    225deg,
    #67d0f6 0%,
    #a7ec67 50%,
    #c27ee4 100%
  );
  animation: animate 10s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 50px;
  height: 50px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 10s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 30px;
  height: 30px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 15s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 25px;
  height: 25px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 80px;
  height: 80px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 35s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
  animation-duration: 10s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 100%;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 100%;
  }
}

✨ 솔루션 확인 및 연습

Swiper 캐러셀 스타일링

요구 사항:

사용자 친화적인 캐러셀 구조.
탐색하기 쉬운 세련된 슬라이드 및 콘텐츠 카드.

기능:

Swiper 캐러셀과 해당 구성 요소를 장식하여 반응형, 직관적이며 미적으로 만족스럽도록 합니다.

단계:

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  /* Adjusted to occupy the full width of its container */
  height: 600px;
  /* Adjusted height */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Adjusted to occupy most of its container's width */
  height: 80%;
  /* Adjusted to occupy most of its container's height */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Adjusted to occupy full width */
  height: 100%;
  /* Adjusted to occupy full height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center the card content vertically */
}

.card h1 {
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #fff;
}

.card p {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.8);
}

.read-more {
  background-color: #6bd6ee;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  padding: 15px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.read-more:hover {
  background-color: #9bd92f;
}

✨ 솔루션 확인 및 연습

Swiper 캐러셀 초기화

요구 사항:

사용자 입력을 처리하는 캐러셀.
슬라이드 간의 부드러운 전환.
탐색을 위한 기능적인 페이지네이션 (pagination).

기능:

JavaScript 를 사용하여 Swiper 캐러셀에 생명을 불어넣어 콘텐츠 카드 간의 동적 전환 및 탐색을 가능하게 합니다.

단계:

const swiper = new Swiper(".swiper-container", {
  speed: 400,
  spaceBetween: 100,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});

✨ 솔루션 확인 및 연습

앱 실행

웹 브라우저에서 index.html을 엽니다.
지출을 추가하고 지출 목록과 요약이 올바르게 업데이트되는지 확인하여 애플리케이션을 테스트합니다.
페이지의 효과는 다음과 같습니다:

✨ 솔루션 확인 및 연습

요약

축하합니다! 이제 처음부터 훌륭한 Swiper 캐러셀을 만들었습니다. 이 프로젝트는 필수 파일을 설정하고, HTML 구조를 다듬고, 상세한 CSS 스타일을 엮고, JavaScript 마법을 뿌리고, 마지막으로 프로젝트를 시작하는 단계를 안내했습니다. 더 많은 슬라이드를 통합하고, 디자인을 맞춤 설정하거나, 추가 Swiper 기능을 추가하여 이 기반을 확장하십시오. 계속 빛나고 즐거운 코딩 되세요!