[Dúvida] Criar um slide em html e css

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Source Serif Pro', serif;
  list-style: none;
box-sizing: border-box;
}
body {
  background-color: #0A0A2A;
  height: 100vh;
}
nav {
    background: #5434af;
    height: 80px;
    width: 100%;

}


label.logo {
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
}
nav ul {
    float: right;
    margin-right: 20px;
}
nav ul li {
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav ul li a {
    color: white;
    font-size: 17px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
}
a.active, a:hover {
    background: #1d075f;
    transition: .5s;
}
.checkbtn {
    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;

}
#check {
    display: none;
}

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .container2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;


  }


  section{
    z-index: -2;
  }

    main {
        margin-top: 15px;

    }

    .texto {
      position: relative;
      margin-top: 10px;
      color: white;
      font-size: 3.5vw;
      letter-spacing: 1px;
      text-align: center;
      z-index: -2;
    }

   .texto1 {
        position: relative;
        margin-top: 10px;
        color: white;
        font-size: 3vw;
        letter-spacing: 1px;
        text-align: center;
        z-index: -2;
      }


      .secondSection {
        position: relative;
        top: 2vw;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        gap: 30px;

      }

      .curriculos {
        width: 45vw;
        height: 60vw;
      }

      .photoDiv {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

      }



      .linkedin {
        width: 5vw;
        height: 5vw;
        cursor: pointer;
      }

      .linkedin:hover {
        transform: scale(110%);
      }
      h2 {
        position: relative;
        color: #e2e1e0;
        font-size: 1.88vw;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      footer {
        margin-top: 20px;
        width: 100%;
        color: #e2e1e0;
      }

      #footer_content {
        background-color: #5434af;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        padding: 3rem 3.5rem;
      }

style css parte 2

  .escolanuvem{
        height: 15vh;
      }

      .footer-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        list-style: none;
    }

    .footer-list .footer-link {
      color: #00050f;
      transition: all 0.4s;
  }
      @media (max-width: 952px){
        label.logo{
          font-size: 20px;
          padding-left: 5px;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
        }
        nav ul li a{
          font-size: 16px;
        }
             .checkbtn {
          display: block;

        }
        ul{
          position: fixed;
          width: 100%;
          height: 100vh;
          background: #1d075f;
          top: 80px;
          left: -100%;
          text-align: center;
          transition: all .5s;
        }
        nav ul li{
          display: block;
          margin: 50px 0;
          line-height: 30px;
        }
        nav ul li a {
          font-size: 20px;
        }
        a:hover, a.active {
          background: none;

        }
        #check:checked ~ ul {
          left: 0;
        }
        .containercurriculo {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: row;

        }
       .organizar {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: row;
       }

       #footer_content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

      }


      @media (max-width: 858px){
        .checkbtn {
          display: block;
        }
        ul{
          position: fixed;
          width: 100%;
          height: 100vh;
          background: #1d075f;
          top: 80px;
          left: -100%;
          text-align: center;
          transition: all .5s;
        }
        nav ul li{
          display: block;
          margin: 50px 0;
          line-height: 30px;
        }
        nav ul li a {
          font-size: 20px;
        }
        a:hover, a.active {
          background: none;

        }
        #check:checked ~ ul {
          left: 0;
        }

        h2 {
          position:relative ;
          color: #FE642E;
          font-size: 2.88vw;
          align-items: center;
          justify-content: center;
          margin-left: 5px;
        }
     main {
          margin-top: 5px;
      }

      .texto1 {
          font-size: 4vw;
          max-width: 90vw;
        }

        .linkedin {
          width: 15vw;
          height: 15vw;
        }



        .secondSection .curriculos {
          width: 85vw;
          height: auto;

      }

      .containercurriculo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

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

     #footer_content {
      grid-template-columns: repeat(1, 1fr);
      padding: 3rem 2rem;
  }
      }

Oi, Jackson, tudo bem?

Desculpe a demora em te ajudar!

Podemos adicionar um currículo com duas folhas em formato de slide utilizando uma biblioteca de slideshow, como o "Swipper", por exemplo. Para isso:

• Copie os links da biblioteca Swiper e inclua os arquivos CSS e JavaScript no seu projeto

  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
  />
  
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  

• Adicione um elemento HTML para o slide no seu código HTML. Por exemplo:

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="assets/curriculo-1.png" alt=""></div>
      <div class="swiper-slide"><img src="assets/curriculo-2.png" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

Certifique-se de substituir os caminhos das imagens pelos caminhos corretos dos currículos de duas páginas.

• Adicione o seguinte código JavaScript para inicializar o carrossel de slides usando o Swiper:

  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
  

  Lembre-se de ter incluído o script do Swiper antes de adicionar esse código.

• Estilize o slide conforme necessário usando CSS. Por exemplo:

Caso queira, você pode ler a documentação do Swiper para obter mais informações sobre suas opções e recursos: Swiper Documentation

Todavia, vale ressaltar que como é um assunto externo ao curso e que não tenho acesso ao cenário completo do projeto outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Abraços e bons estudos!

Boa noite,vlw msm. mas ainda não entendi vou acrescentar a primeira parte que você mandou.

tenho que criar um swiper para cada curriculo né?

Oi, Jackson, tudo bem?

O Swiper é uma biblioteca de código aberto que fornece uma solução fácil de usar para implementar carrosséis interativos em páginas da web ou em aplicativos móveis. Ele é especialmente útil para criar galerias de imagens, exibir notícias ou exibir conteúdo em formato de slides.

Para cada currículo onde você quiser exibir as páginas em formato de slide é preciso elaborar um código com as tags <div> contendo as classes do swiper para cada um.

Vou explicar cada um dos blocos de código que informei acima. O primeiro bloco, apresentado na reposta anterior, é responsável por criar os estilos e movimentações do carrossel. O segundo bloco, mostra na tela o carrossel, por meio das <divs> e contém os botões de próximo e de anterior, as imagens dos slides, entre outras partes que compõem o carrossel. O último bloco é responsável por inicializar e configurar um carrossel usando a biblioteca Swiper.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Boa noite,eu nao entendi onde coloca a biblioteca e o script. e quando criei o arquivo js diz q está com erros. queria saber qual nome ponho no arquivo js tbm,pois botei swiper-bundle.min.js

Oi, Jackson, tudo bem?

A tag <link> deve ser colocada dentro da tag <head> e a tag <script> deve ser adicionada antes do fechamento da tag <body>. Por exemplo:

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</body>
</html>

A estrutura acima é apenas um esqueleto para apresentar a posição das duas tags que contém tanto os estilos quanto a parte de movimentação do carrossel.

Com relação ao código abaixo:

<script>
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
      el: '.swiper-pagination',
      clickable: true,
    },
  });
</script>

Com relação ao nome swiper-bundle.min.js é uma convenção adotada para identificar uma versão minificada, ou seja, onde o código é otimização e reduzido ao mínimo da biblioteca Swiper, contendo todos os arquivos JavaScript necessários para o funcionamento da biblioteca. Dessa forma, você pode criar um arquivo chamado "main.js" no mesmo local do seu arquivo "index.html" e incorporar ao corpo do HTML da seguinte maneira:

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="/main.js"></script>
</body>
</html>

Lembre-se que as estruturas apresentadas acima são apenas estruturas genéricas para mostrar o posicionamento das tags <link> e <script>.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

A entendi,eu tava pondo o link na tag body e o script antes do html fechar,eu to aprendendo ainda,esse projeto é uma colcha de retalhos que to fazendo para conclusãod e bootcamp de aws.vou testar aquie te retorno

o código diz q está com erro.

Oi, Jackson,

O erro acontece por conta da presença da tag <script>. Essa tag foi usada para caso você quisesse usar diretamente no seu arquivo HTML.

Podemos corrigir o erro removendo a tag <script> de abertura e de fechamento. Ao criar o arquivo "main.js" utilize apenas o código abaixo:

  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
      el: '.swiper-pagination',
      clickable: true,
    },
  });

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

boa noite,então foi burrice minha rs tem dicas de como estilizar o css do swiper? procurei na internet mas achei coisas vagas

Oi, Jackson, como vai?

Ao estudarmos algo novo podem surgir muitas dúvidas, mesmo! A prática e a busca ativa por solução de problemas é a melhor forma de consolidar os conceitos.

Podemos ter algumas ideias para estilizar o Swiper consultando a documentação dessa API, que está neste link. Outra opção é utilizar as classes CSS para criar seus próprios estilos.

Espero que dê tudo certo. Caso tenha dúvidas, não hesite em postar no fórum.

Abraços e bons estudos!