La nouvelle plateforme
de partage de tutoriels d'Ynov

632 tutoriels en ligne

Création d'un Slider / Diaporama en HTML - CSS ( débutant )

Comment créer un diaporama / slider en quelques minutes et simplement.
De : William Balance

  • Vues

    13505

HTML :

<div id="Diaporama">

    <figure>

        <img src="...">

        <img src="...">

        <img src="...">

        <img src="...">
        
        <img src="...">

    </figure>

</div>

 

CSS :

@-webkit-keyframes sliderLeft
{
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

#Diaporama 

    overflow: hidden;

    max-width: 1000px;

    height : 500px;

    margin: 0 auto;

    border: 20px solid white;
}

#Diaporama figure 

  position: relative;

  width: 500%;

  -webkit-animation: 20s sliderLeft infinite; 
}

#Diaporama figure img 

    width: 20%; 
    float: left; 
}

Commentaires

[AUTHOR]

| [DATE]

[MSG]