Solucionado (ver solução)
Solucionado
(ver solução)
13
respostas

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

Boa noite,estou com um problema,em uma apresentação de um website estatico,preciso colocar curriculos diferentes,mas o ultimo tem duas folhas e queria por ele em slide,mas não consigo,poderiam me ajudar.`

index html

<body>
  <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="material-symbols-outlined">
        menu
        </i>
        </label>
        <label class="logo">GRUPO 07</label>
        <ul>
            <li><a class="active" href="#">Início</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Serviços</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </nav>
            <div class="container2" >
                <main>
                    <h2 class="texto">Banco de Curriculos Grupo 07</h2>
                 </main>   
             </div>
        <div>
            <p class="texto1">Nossa equipe</p>
        </div>

        <section class="secondSection">
                <div class="photoDiv">
                  <img src="assets/CV - Patrick.Gonçalves-1.png" class="curriculos" alt="" />
                  <a href="https://www.linkedin.com/in/patrick-sousa-574a61184/"> <img src="icons8-linkedin-144.png" class="linkedin" alt=""></a>
                </div>
                <div class="photoDiv">
                    <img src="./Atualizado-Curriculo-Erick-Aparecido-de-Souza-_1_.jpg" class="curriculos" alt="" />
                    <a href="https://www.linkedin.com/in/disneialbertomilhomem/"> <img src="icons8-linkedin-144.png" class="linkedin" alt=""></a>
                  </div>
                  <div class="photoDiv">
                    <img src="Currículo-Vítor-Manoel-de-Lima-Santana-TI.jpg" class="curriculos" alt="" />
                    <a href="https://www.linkedin.com/in/caio-italo-alves/"> <img src="icons8-linkedin-144.png" class="linkedin" alt=""></a>
                  </div>
                  <div class="photoDiv">
                    <img src="./Deivide-cv-2023.jpg" class="curriculos" alt="" />
                    <a href="https://www.linkedin.com/in/leandro-fran%C3%A7a-dos-santos/"> <img src="icons8-linkedin-144.png" class="linkedin" alt=""></a>
                  </div>
                  <div class="photoDiv">

                      <div class="organizar">
                    <img src="assets/curriculojacksondelimasilvasoares-1.png" class="curriculos" alt="" />
                    </div>
                          <div class="organizar">
                            <img src="assets/curriculojacksondelimasilvasoares-2.png" class="curriculos" alt="" />    
                    </div>
                    <a href="https://www.linkedin.com/in/jackson-de-lima-silva-soares-45172a227/"> <img src="icons8-linkedin-144.png" class="linkedin" alt=""></a>
                  </div>
        </section>

    </div>

    </main>
    <footer>
      <div id="footer_content">
        <div id="footer_contacts">
          <p>Venha para a nuvem Você tambem</p>
        <a href="https://escoladanuvem.org/">
          <img src="assets/download.png" alt="" class="escolanuvem">
        </a>
          <a href="https://www.linkedin.com/company/escola-da-nuvem/"> <img src="assets/icons8-linkedin-144.png" class="linkedin" alt=""></a>
        </div>

        <ul class="footer-list">
          <li>
            <h3>Colaboradores</h3>
          </li>
                <li> <a href="" class="footer-link"> Patrick de Sousa Faria Gonçalves</a></li>
                <li> <a href="" class="footer-link"> Disnei Alberto Milhomem </a></li>
                <li> <a href="" class="footer-link"> Caio Italo Alves </a></li>
                <li> <a href="" class="footer-link"> Leandro França dos Santos</a></li>
                <li> <a href="" class="footer-link"> Jackson de Lima Silva Soares</a></li>

        </ul>

        <ul class="footer-list">
          <li>
            <h3>Contatos</h3>
          </li>
                <li> <a href="" class="footer-link">patricksousa026@gmail.com</a></li>
                <li> <a href="" class="footer-link"></a></li>
                <li> <a href="" class="footer-link"></a></li>
                <li> <a href="" class="footer-link"></a></li>
                <li> <a href="" class="footer-link">jackson.lssoares92@gmail.com</a></li>

        </ul>

        <div id="footer_subscribe">
          <h3>Subscribe</h3>

          <p>
              mande nos um email
          </p>

          <div id="input_group">
              <input type="email" id="email">
              <button>
                  <i class="fa-regular fa-envelope"></i>
              </button>
          </div>
      </div>
  </div>
      <div id="footer_copyright">
          &#169
          2023 todos os direitos reservados
      </div>

      </footer>
    </body>

    </html>
</body>
13 respostas
@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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. 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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. 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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. 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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. 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

solução!

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!