1
resposta

Criar um "passador de slide" pelo HTML e CSS

Olá! Tenho uma dúvida bem forte, estou desenvolvendo um site específico e uma característica que gostaria de adicionar nele é que uma das imagens (imagens essas que vão redirecionar para outra página, deve ter outras imagens passando como forma de demonstração do produto, ou seja, além da imagem principal terão outras. Alguém poderia me auxiliar com essa dúvida de como posso fazer isso?

1 resposta

Olá Celso! Eaí tudo ok?

Para criar um "passador de slide" utilizando HTML e CSS, você pode utilizar a tag <img> para exibir as imagens e o CSS para controlar a animação de transição entre elas. E envolver elas com uma tag de link para que quando clicadas elas levem o usuário para outra página.

Uma forma simples de fazer isso é utilizando a propriedade animation do CSS. Você pode criar uma animação que alterna a opacidade das imagens, fazendo com que uma imagem desapareça gradualmente enquanto a próxima imagem aparece.

Aqui está um exemplo de código que você pode utilizar como base:

<div class="slideshow">
    <a href="seu-link1">
        <img src="imagem1.jpg" alt="Imagem 1">
    </a>
    <a href="seu-link2">
        <img src="imagem2.jpg" alt="Imagem 2">
    </a>
    <a href="seu-link3">
        <img src="imagem3.jpg" alt="Imagem 3">
    </a>
</div>
.slideshow {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s infinite;
}

.slideshow a {
    text-decoration: none;
    padding: 0;
    margin: 0;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Nesse exemplo, as imagens serão exibidas em um container com a classe "slideshow". Cada imagem terá a classe "fade" e a animação "fade" será aplicada a elas. A animação terá uma duração de 3 segundos e será repetida infinitamente.

Você pode adicionar quantas imagens quiser dentro do container "slideshow" e elas irão passar automaticamente de uma para outra.

Ou você pode consumir a API do SwipperJS, que serve para criar um carrossel de imagens que se envolvidas por uma tag de link podem direcionar para uma outra página, ou local. Temos um curso onde é Feito o alurabooks que tem esses slides, mas eles não direcionam para nenhum lugar, mas você pode implementar isso, o curso é esse, se precisar de ajuda para tal é só chamar que nós ajudamos.

Se tiver mais alguma dúvida, é só me dizer!

Espero ter ajudado, abraços e bons estudos!