Создайте потрясающее веб-приложение с каруселью Swiper

Введение

В этом проекте вы научитесь создавать веб-приложение с каруселью Swiper, которое имеет привлекательный для глаз дизайн карусели с космическими темами. Приложение позволит пользователям перемещаться между различными слайдами и просматривать карточки с интересными фактами о Вселенной.

Вот предварительный просмотр карусели Swiper:

🎯 Задачи

В этом проекте вы научитесь:

Как строить HTML-скелет для веб-приложения
Как внедрять карусель Swiper в HTML-структуру
Как добавлять круги и анимированные плавающие круги в фон приложения
Как реализовать базовые сбросы CSS для обеспечения一致ного стилистического оформления во всех браузерах
Как стилизовать основную секцию и контейнер содержимого приложения
Как проектировать и анимировать плавающие круги в фоне
Как стилизовать карусель Swiper и ее компоненты
Как инициализировать карусель Swiper с использованием JavaScript

🏆 Достижения

После завершения этого проекта вы сможете:

Создать привлекательное для глаз веб-приложение с каруселью Swiper с космическими темами
Реализовать HTML-структуру и макет для веб-приложения
Применить CSS-стили и анимации для улучшения пользовательского интерфейса
Использовать JavaScript для инициализации и настройки карусели Swiper

Создайте HTML-скелет

Требования:

Внедрите важные мета-теги для определения набора символов и параметров viewport.
Подключите внешние стили и скрипты.

Функциональность:

Создайте базовый 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>
    <!-- Затем вставим структуру карусели Swiper -->
    <!-- Скрипты: библиотека Swiper и наша собственная логика -->
    <script src="./script.js"></script>
  </body>
</html>

✨ Проверить решение и практиковаться

Внедрите карусель Swiper в HTML

Требования:

Структурное место в HTML для размещения содержимого нашей карусели.
Элементы пагинации для навигации.

Функциональность:

Внедрите макет карусели, который можно стилизовать и сделать интерактивным.

Шаги:

Добавьте это внутри тега <body> в index.html:

<section>
  <div class="content">
    <div class="swiper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="card">
              <h1>Космическая балета</h1>
              <p>
                Вселенная не просто огромное пространство тьмы; это динамическая
                сцена космического балета. Галактики танцуют, звезды рождаются и
                умирают, а черные дыры бродят, все подчиняясь вечному ритму
                гравитационных сил.
              </p>
              <button class="read-more">Подробнее</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Тамные секреты</h1>
              <p>
                Несмотря на все свои светящиеся звезды и галактики, Вселенная
                скрывает больше, чем показывает. Темная материя и темная
                энергия, невидимая и загадочная, составляют 95% Вселенной,
                удерживая космос вместе и推动 его расширение.
              </p>
              <button class="read-more">Подробнее</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Относительность времени</h1>
              <p>
                В огромном космосе время относительное. 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">Подробнее</button>
            </div>
          </div>
        </div>
        <!-- Добавьте пагинацию -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

✨ Проверить решение и практиковаться

Внедрите круги в HTML

Требования:

Чтобы получить много круглых пузырьков, добавьте <ul> и <li>.

Функциональность:

Множество пузырьков разного размера анимируется в фоне страницы.

Шаги:

<section>
  <!--содержимое swiper...-->
  <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

Требования:

Пользователь-friendly структура карусели.
Стильные слайды и карточки содержимого, которые легко управлять.

Функциональность:

Украсить карусель Swiper и ее компоненты, чтобы обеспечить их отзывчивость, интуитивность и эстетическое привлекательность.

Шаги:

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

.swiper {
  width: 100%;
  /* Приспособлено, чтобы занимать всю ширину своего контейнера */
  height: 600px;
  /* Приспособленная высота */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Приспособлено, чтобы занимать большую часть ширины своего контейнера */
  height: 80%;
  /* Приспособлено, чтобы занимать большую часть высоты своего контейнера */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Приспособлено, чтобы занимать всю ширину */
  height: 100%;
  /* Приспособлено, чтобы занимать всю высоту */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Центрировать содержимое карточки по вертикали */
}

.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

Требования:

Карусель, которая реагирует на ввод пользователя.
гладкие переходы между слайдами.
функциональная навигация по страницам.

Функциональность:

Использовать 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. Будьте успешны и радитесь кодингу!