Estou tentando criar um slide infinito parecido com o da página principal do instagram, utilizando somente CSS3
e o BOOTSTRAP
.
Estou com as seguintes dificuldades:
- Criar o efeito correto
- As imagens devem estar por cima do smartphone branco
Como deve funcionar o efeito (observe no site do instagram para entender melhor):
- A primeira imagem já deve estar aberta
- Após certos segundos deve-se trocar para a imagem seguinte
- Chegando na última imagem ele volta para a primeira
Figura ilustrativa do problema
CSS3
<style>
.foto {
opacity: 0;
animation-name: animacao;
animation-duration: 20s;
animation-iteration-count: infinite;
}
@keyframes animacao {
25% {
opacity: 1;
transform: scale(1.1, 1.1);
}
100% {
opacity: 0;
}
}
.foto:nth-child(1) {
animation-delay: 0;
}
.foto:nth-child(2) {
animation-delay: 10s;
}
.foto:nth-child(3) {
animation-delay: 15s;
}
.foto:nth-child(4) {
animation-delay: 20s;
}
.foto:nth-child(5) {
animation-delay: 25s;
}
</style>
HTML5 + BOOTSTRAP
<div class="container-fluid h-100 mt-lg-0">
<div class="row align-items-center h-100">
<!-- SMARTPHONES IMAGE -->
<div class="col-lg-7 d-none d-lg-block mb-5 py-5" style="border: 0px red solid; background-image: url('/dist/img/9364675fb26a.png');background-size: 28rem; background-position: top right; background-repeat: no-repeat;">
<div class="d-flex justify-content-end mt-4 mr-4 mb-5 pt-3 pr-3">
<div class="galeria">
<img src="/dist/img/d6bf0c928b5a.jpg" alt="Responsive image" class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
<img src="/dist/img/177140221987.jpg" alt="Responsive image" class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
<img src="/dist/img/ff2c097a681e.jpg" alt="Responsive image" class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
<img src="/dist/img/b27a108592d8.jpg" alt="Responsive image" class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
<img src="/dist/img/5e04169b9308.jpg" alt="Responsive image" class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
</div>
</div>
</div>
</div>
</div>