En-tete Astuces divers html et css
Classic Moderne

Modification du slideshow automatique

Je suis en boule !!!
Je sieste !!!
Je suis la plus belle !!!
Qu'est-ce que l'on est bien ici !!!
Je suis en boule !!!
Je sieste !!!
Je suis la plus belle !!!
Qu'est-ce que l'on est bien ici !!!


Comme on peut le voir sur ce diaporama, on a 4 photos et la taille du cadre me déforme les photos.

Voyons comment procéder.

Je voudrais rajouter 4 photos soit un total de huit, mais garder un format proche des 4/3 plutôt que du 16/9.

Pour cela on va déjà rajouter dans le HTML nos 4 Photos.(Je garde la même série car je n'en ai pas assez pour avoir les huit.)


<figure>
<img src="picture/100_0635.JPG" alt="" width="640" height="310" />
<figcaption>Mon Chat en boule</figcaption>
</figure>

<figure>
<img src="picture/S6300109.JPG" alt="" width="640" height="310" />
<figcaption>Je sieste !!!</figcaption>
</figure>

<figure>
<img src="picture/100_0670.JPG" alt="" width="640" height="310" />
<figcaption>Je suis la plus belle !!!</figcaption>
</figure>

<figure>
<img src="picture/100_0668.JPG" alt="" width="640" height="310" />
<figcaption>Qu'est-ce que l'on est bien ici !!!</figcaption>
</figure>

Je modifie la taille de mes images dans le code HTML et ensuite le css en commençant par la taille du bloc de photo pour revenir à un format proche de 4/3 (width: 500px; height: 375px; Identiques aux photos ).


<figure>
<img src="picture/100_0635.JPG" alt="" width="500" height="375" />
<figcaption>Mon Chat en boule</figcaption>
</figure>

<figure>
<img src="picture/S6300109.JPG" alt="" width="500" height="375" />
<figcaption>Je sieste !!!</figcaption>
</figure>

<figure>
<img src="picture/100_0670.JPG" alt="" width="500" height="375" />
<figcaption>Je suis la plus belle !!!</figcaption>
</figure>

<figure>
<img src="picture/100_0668.JPG" alt="" width="500" height="375" />
<figcaption>Qu'est-ce que l'on est bien ici !!!</figcaption>
</figure>


#slideshow {
position: relative;
width: 500px;
height: 375px;
padding: 15px;
margin: 0 auto 2em;
border: 1px solid #ddd;
background: #FFF;
/* CSS3 effects */
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
border-radius: 2px 2px 2px 2px;
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

On modifie le conteneur des slides en largeur il fait 100% x le nombre de slides soit pour huit photos 800%:

Et aussi par la même occasion la taille du container (width: 500px; height: 375px; Identiques aux photos ).


/* gestion des dimensions et débordement du conteneur */

#slideshow .container {
position:relative;
width: 500px;
height: 375px;
overflow: hidden;
}

/* le conteneur des slides en largeur il fait 100% x le nombre de slides */

#slideshow .slider {
position: absolute;
left:0; top:0;
width: 800%;
height: 310px;
}

Passons maintenant à la durée des transitions, pour cela il faut repartir le temps sur les huit images par apport au 100% de la durée de transition.

Je mets 2% par transition pour 8 photos soit 16% au total.
Je déduis de mes 100% mes 16% de transition ce qui me laisse 84%.
Je reparti les 84% sur les 8 photos, ce qui me donne une durée de 10.5% par photos

On modifie aussi par la même occasion le déplacement arrière des photos, ce qui veut dire que je recule de -100% pour la 2°, de -200% pour la 3°, -300% pour la 4°, etc.


@keyframes slider {
0%, 10.5%, 100% { left: 0 }
12.5%, 23% { left: -100% }
25%, 35.5% { left: -200% }
37.5%, 48% { left: -300% }
50%, 60.5% { left: -400% }
62.5%, 73% { left: -500% }
75%, 85.5% { left: -600% }
87.5%, 98% { left: -700% }
}

Je modifie maintenant mon déplacement de texte par apport au défilement de mes images, soit 4% pour l'apparition après que l'image apparaisse et 4% pour la disparition avant que l'image parte.


@keyframes figcaptionner {
0%, 12.5%, 25%, 37,5%, 50%, 62.5%, 75%, 87.5%, 100% { bottom: -55px; }
4%, 8.5%, 16.5%, 21%, 29%, 33.5%, 41.5%, 46%, 54%, 58.5%, 66.5%, 71%, 79%, 83.5% 91.5%, 96% { bottom: 5px; }
}

Pour le temps des différentes transitions, libre choix à vous et je pense que c'est suffisamment simple pour le faire sans exemple.

Je me suis aperçu que chaque image se décalait légèrement vers la gauche, pour régler cela je me suis vu obligé de jouer avec les % de défilement des images, voir ci-dessous:


@keyframes slider {
0%, 10.5%, 100% { left: 0 }
12.5%, 23% { left: -101% }
25%, 35.5% { left: -202% }
37.5%, 48% { left: -303% }
50%, 60.5% { left: -404% }
62.5%, 73% { left: -505% }
75%, 85.5% { left: -606% }
87.5%, 98% { left: -707% }
}

Il faut aussi modifier la taille du container d'images, ici je force un peu à 810%.


/* le conteneur des slides en largeur il fait 100% x le nombre de slides */

#slideshow .slider {
position: absolute;
left:0; top:0;
width: 810%;
height: 310px;
}


N’oubliez pas de préfixer également la règle @keyframes (Il faudra s’embêter à dupliquer le code de l’animation) de la sorte :



/* fonction d'animation, n'oubliez pas de prefixer ! */

@-webkit-keyframes xxx {
...
}

@-moz-@keyframes xxx {
...
}

@-o-keyframes xxx {
...
}

@keyframes xxx {
...
}


Voici un autre exemple cette fois ci en verticale avec bien 8 photos différentes. ICI.









Haut-de-Page