Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 03/11/2019

Carrossel com CSS

Este é um modelo de Carrossel apenas com CSS, excelente para usar em páginas AMP.
Este código está inteiro pronto e apenas copiar e colar, alterar conforme suas necessidades.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Carrossel CSS</title>
<style>
.carrossel-mascara{
width: 600px; /* largura das imagens*/
margin: 0 auto;
overflow: hidden;
font-size: 0;
}
.carrossel-container {
width: 2400px;  /* Somar da largura de todas as imagens */
transition: 1s ease;
height: 337px; /* Altura das imagens */
}
.carrossel-container img, .carrossel-texto {
width: 600px;
height: auto;
display: inline-block;
vertical-align:top;
font-size: 16px;
margin: 0 auto;
}
.carrossel-texto {
height: 337px;
position: relative;
}
.carrossel-texto p {
position: relative;
text-align: center;
}

.slide {
animation: slide 10s ease infinite; /* Velocidade*/
}

@keyframes slide {
0% {
transform: translateX(0%);
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
62.5% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
87.5% {
transform: translateX(-75%);
}
99% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
.carrossel-container:hover {
animation-play-state: paused; /* pausa quando passa mouse*/
}
</style>
</head>
<body>
<section class="carrossel-mascara">
<div class="carrossel-container slide">
<img src="https://www.comercialweb.com.br/blog/modelos-prontos/imagens/carro.jpg"/>
<div class="carrossel-texto">
<p>Aqui você pode inserir um texto entre os slides!</p>
</div>
<img src="https://www.comercialweb.com.br/blog/modelos-prontos/imagens/cachorro.jpg"/>
<img src="https://www.comercialweb.com.br/blog/modelos-prontos/imagens/paisagem.jpg"/>
</div>
</section>
</body>
</html>


Veja o resultado

Fonte: Redação

Comente esta matéria:


Compartilhe esta matéria




Veja Também