Slideshow en CSS3

Bonjour à tous,


J'ai réalisé il y a peu de temps une petite astuce pour combiner deux nouveautés de CSS3 afin de réaliser un Slideshow uniquement dans ce langage de style qu'est le CSS. Pas de javascript donc, ce sera une version prochainement normaliser (espérons-le).

Le souci c'est qu'à l'heure actuelle cette technique n'est compatible qu'avec les Webkit (Google Chrome et Safari), et un peu avec Opera. Je dis un peu car il semble y avoir quelques bogues avec ce dernier navigateur.

Firefox dans sa prochaine version 3.7 devrait prendre en charge ce système d'animation.

Cette technique est abordée et expliquée en détail sur le site d'Alsacréations par mes soins :
Réaliser un Slideshow en CSS3

Je vous invite à poser vos questions directement ici si jamais vous en avez.

Amusez-vous bien !

PS : je n'ai encore jamais vu de gestion au clic sur les Slideshow sans passer par du javascript, profitez donc de l'exclusivité

Merci beaucoup pour ce partage.
J'ai posé une question sur ce thème il y a peu.
J'ignorais juste qu'on appelait ça un slideshow.
Article Alsa' catapulté dans mes favoris.

Thanx'.

Bonjour,
j'ai essayé, mais j'ai pas réussit à le faire, la seule chose que j'ai réussit pour le moment c'est mettre un effet de zoom sur les boites.

http://avalon-city.wowjdr.com/

Voici ce que j'ai pour le moment dans ma PA et mon CSS :

Code:

.ex1 a:hover, .ex1 a:focus {
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
   -moz-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
   -webkit-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
   box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
}
    .animated { 
    transition: all 0.7s ease-out; 
    } 
 
 li { 
        display: inline; 
    } 
    li a { 
    display:block
        height: 85px; 
        width: 75px; 
        text-align: center; 
        background: white; 
        padding: 5px 10px; 
        margin: 0 20px; 
        color: #615334; 
        text-decoration: none; 
        line-height: 5.6em; 
        background: -moz-linear-gradient(center bottom , #DACDB1 11%, #F0E8D8 56%) repeat scroll 0 0 #F0E8D8; 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #DACDB1),color-stop(0.65, #F0E8D8)); 
        -moz-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47; 
        -webkit-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47; 
        box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47; 
        -moz-transition: all 0.3s ease-out; 
        -webkit-transition: all 0.3s ease-out; 
        transition: all 0.3s ease-out; 
    } 

Code:

<ul class="ex1"> 
        <li><a href="#">Block 1</a></li> 
        <li><a href="#">Block 2</a></li> 
        <li><a href="#">Block 3</a></li> 
    </ul> 

Je ne suis pas sûr de comprendre la marche à suivre :S C'est quoi je dois rajouter pour avoir un slideshow horizontal, et comment je fais pour rajouter d'autres images, en mettre plus de 3?

Merci d'avance de votre aide.

Hello,

Navré pour le délais de réponse, je n'ai pas vu ton message avant.
As-tu bien suivi toutes les étapes du tuto ?

Il semble manquer les étapes des pages qui suivent la première... :p

Bon courage.

Bonjour,
je me suis relancer dans une slideshow,
j'ai réussit, mais il y a un petit chose qui me dérange un peu, quand on va d'une image à l'autre la page descend.
Comment faire pour empêcher cela?
http://lost-hero.wowjdr.com/t9-tentative-pour-pvs
Merci

Hello,

Tu as toutes les informations sur ce bug à cette adresse :
http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target

Tu peux également suivre ce nouveau tutoriel plus complet :
http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

Bon courage, et bravo pour ta réussite jusque là :)

Alors là, merci.
Sont présents dans ce tutos deux notions qui m'intéressent, à savoir @keyframes et la pseudo-classe target, c'est juste parfait.

Juste une question pour le défilement automatique : que faire si on a un grand nombre d'éléments à faire défiler ?

Merci je cherchais à faire cela depuis un bon moment **

merci à toi

Merci pour le partage ! （’-’*)

Merci

merci :)