Crie um Impressionante Web App de Carousel Swiper

Introdução

Neste projeto, você aprenderá como criar um aplicativo web de carrossel Swiper que apresenta um layout de carrossel visualmente atraente com conteúdo temático cósmico. O aplicativo permitirá que os usuários naveguem por diferentes slides e visualizem cartões com fatos interessantes sobre o universo.

Aqui está uma prévia do carrossel Swiper:

🎯 Tarefas

Neste projeto, você aprenderá:

Como construir o esqueleto HTML para o aplicativo web
Como incorporar o carrossel Swiper na estrutura HTML
Como adicionar círculos e círculos flutuantes animados ao fundo do aplicativo
Como implementar resets CSS fundamentais para garantir uma estilização consistente em todos os navegadores
Como estilizar a seção principal e o content holder do aplicativo
Como projetar e animar círculos flutuantes no fundo
Como estilizar o carrossel Swiper e seus componentes
Como inicializar o carrossel Swiper usando JavaScript

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Criar um aplicativo web de carrossel Swiper visualmente atraente com conteúdo temático cósmico
Implementar a estrutura e o layout HTML para o aplicativo web
Aplicar estilização CSS e animações para aprimorar a interface do usuário
Utilizar JavaScript para inicializar e configurar o carrossel Swiper

Construir o Esqueleto HTML

Requisitos:

Incorporar as meta tags essenciais para definir o conjunto de caracteres e as configurações da viewport.
Linkar folhas de estilo e scripts externos.

Funcionalidade:

Gerar um layout HTML fundamental para construir sobre ele.

Passos:

<!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>

✨ Verificar Solução e Praticar

Incorporar o Carrossel Swiper no HTML

Requisitos:

Um local estrutural dentro do HTML para abrigar o conteúdo do nosso carrossel.
Elementos de paginação para navegação.

Funcionalidade:

Incorporar um layout de carrossel que pode ser estilizado e tornado interativo.

Passos:

Anexe isto dentro da tag <body> em 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>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>

✨ Verificar Solução e Praticar

Incorporar os Círculos no HTML

Requisitos:

Para obter muitas bolhas redondas, adicione <ul> e <li>.

Funcionalidade:

Muitas bolhas de tamanhos diferentes são animadas no fundo da página.

Passos:

<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>

✨ Verificar Solução e Praticar

Implementando Resets CSS Fundamentais

Requisitos:

Obter uma aparência consistente em diferentes navegadores.
Resetar as margens, preenchimentos (padding) e dimensões de caixa padrão do navegador.

Funcionalidade:

Anular quaisquer estilos padrão do navegador para garantir que nossa estilização permaneça consistente em vários navegadores.

Passos:

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

✨ Verificar Solução e Praticar

Estilizando a Seção Principal e o Content Holder

Requisitos:

Uma seção principal que ocupe toda a viewport (área de visualização).
Um content holder visualmente atraente com dimensões e estilização específicas.

Funcionalidade:

Estilizar a seção principal e o content holder para que ambos fiquem centralizados e dar a eles uma aparência com tema cósmico.

Passos:

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;
}

✨ Verificar Solução e Praticar

Desenhando Círculos Flutuantes Animados

Requisitos:

Um fundo dinâmico para a seção principal.
Círculos flutuantes que se movem e mudam de aparência ao longo do tempo.

Funcionalidade:

Enriquecer o fundo com círculos gradientes animados que levitam, giram e mudam a opacidade para aprimorar o engajamento do usuário.

Passos:

.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%;
  }
}

✨ Verificar Solução e Praticar

Estilizando o Carousel Swiper

Requisitos:

Uma estrutura de carousel (carrossel) amigável ao usuário.
Slides e cartões de conteúdo estilosos e fáceis de navegar.

Funcionalidade:

Embelezar o carousel Swiper e seus componentes para garantir que sejam responsivos, intuitivos e esteticamente agradáveis.

Passos:

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

.swiper {
  width: 100%;
  /* Ajustado para ocupar a largura total do seu container */
  height: 600px;
  /* Altura ajustada */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Ajustado para ocupar a maior parte da largura do seu container */
  height: 80%;
  /* Ajustado para ocupar a maior parte da altura do seu container */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Ajustado para ocupar a largura total */
  height: 100%;
  /* Ajustado para ocupar a altura total */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centraliza o conteúdo do cartão verticalmente */
}

.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;
}

✨ Verificar Solução e Praticar

Inicializando o Carousel Swiper

Requisitos:

Um carousel que responde à entrada do usuário.
Transições suaves entre os slides.
Paginação funcional para navegação.

Funcionalidade:

Utilizar JavaScript para dar vida ao carousel Swiper, permitindo transições dinâmicas e navegação entre os cartões de conteúdo.

Passos:

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

✨ Verificar Solução e Praticar

Executando o Aplicativo

Abra index.html em um navegador web.
Teste a aplicação adicionando despesas e verificando se a lista de despesas e o resumo são atualizados corretamente.
O efeito da página é o seguinte:

✨ Verificar Solução e Praticar

Resumo

Parabéns! Você agora forjou um esplêndido carousel Swiper do zero. Este projeto guiou você pelos passos de configuração de arquivos essenciais, esculpindo uma estrutura HTML, tecendo estilos CSS detalhados, salpicando magia JavaScript e, finalmente, lançando o projeto. Sinta-se à vontade para expandir esta base incorporando mais slides, personalizando o design ou infundindo recursos Swiper adicionais. Continue brilhando e feliz codificação!