Slideshow en CSS3

Bonjour,

J'aurais une question sur le tuto : Un slideshow à défilement automatique

Je souhaiterais savoir comment faire pour que le slideshow ne boucle pas, qu'il s'exécute une seule fois.

J'ai essayé :

-webkit-animation-iteration-count:0;

mais quand je mets ça il ne fonctionne plus du tout et c'est logique !

Et quand je mets :

-webkit-animation-iteration-count:1;

il fait quand même une boucle.

Est-ce que quelqu'un pourrait m'indiquer une piste ou encore mieux une solution

Merci de votre aide
Modifié par macara (19 Jul 2010 - 15:13)

Bonjour,


Très bonne question que je ne me suis même pas posé en créant ce tutoriel.
Sans tester j'aurais simplement dit qu'il te suffit de renseigner en étape 100% (ou to) la dernière position désirée, dans l'exemple du tuto on aurait ainsi :

100% {
   left: -300px;
}

mais comme j'ai testé je sais que ça ne marche pas.

J'ai tenté en utilisant animation-play-state, mais je ne vois pas son utilité a priori sans utilisation de JavaScript. (contrôlé du statut et changement de classe)

Tout ça pour te dire que j'ai bien vu ton message, mais que pour le moment je ne peux pas te répondre.
Dès que j'en sais davantage je reviens vers toi.

Bonne continuation

Merci pour ta réponse.

Par contre je ne vois pas trop l'intérêt de animation-play-state. Si tu ne peux pas t'en servir quand une transition est fini et sans passer par le JavaScript, à quoi sert-il ?

Je continue aussi à chercher de mon côté et si je trouve une solution je ne manquerais pas de la poster.

Bonjour,

Je viens de m'apercevoir que si j'enlève le

margin:20px auto;

dans #slideshow, le slide ne fonctionne plus.
Est-ce quelqu'un pourrait m'expliquer pourquoi ?

Merci
Modifié par macara (21 Jul 2010 - 11:44)

Bonjour,

J'ai créé la démonstration du tutoriel sans régler les marges au début.
Ensuite j'ai rajouté ces marges, donc rien à voir avec le fonctionnement du slideshow (de toute manière).

Nous présenter la globalité de ton code CSS et/ou HTML serait peut-être plus facile pour t'aider.

Merci bien.

Bonjour,

Je viens de re tester et ça fonctionne bien si j'enlève les marges, autant pour moi... Comme j'ai fait d'autres tests dans le même fichier je devais avoir autre chose qui bloquait le slide !!

Merci quand même !!

Par contre je n'ai pas trouvé pour le moment de solution pour arrêter le slide sur la dernière image.
Modifié par macara (22 Jul 2010 - 10:20)

Bonjour,

Je rencontre moi aussi un problème avec le slideshow automatique. Je l'ai testé pour des images et il fonctionne très bien, et je me suis dit qu'il serai bien de l'adapter pour faire défiler des pages. Le problème est que la première page s'affiche très bien, mais les deux autres ne s'affichent pas. La boucle fonctionne, mais peut importe ce que je modifie je n'arrive pas à les afficher.
Voici mon code si cela peut vous aider:
Mon php

<div id="slideshow"> 
	<ul id="sContent"> 
        <li>ma page php 1</li>
        <li>ma page php 2</li>
        <li>ma page php 3</li> 
    </ul> 
</div>

et mon CSS

@-webkit-keyframes 'AutoSlide' { 
    0% { 
        left: 0px; /*1ère image*/ 
    } 
    15% { 
        left: 0px; /*idem pour attente*/ 
    } 
    35% { 
        left: -780px; /*2ème image*/ 
    } 
    50% { 
        left: -780px; /*idem pour attente*/ 
    } 
    70% { 
        left: -1560px; /*3ème image*/ 
    } 
    85% { 
        left: -1560px; /*idem pour attente*/ 
    } 
    100% { 
        left: 0px; /*1ère image*/ 
    } 
}

#slideshow { 
    position: relative;
    width: 780px; 
    height: 360px; 
    margin:  20px auto; 
    overflow: hidden;}

.panneau {
	width: 780px;
	height: 360px;
	background: url(images/gradient.jpg) repeat-x;}

.panneau p {
	padding: 10px;}

#sContent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 2340px; 
    margin: 0;             
    padding: 0; 
     
    /*CSS3 keyframes animation*/ 
    -webkit-animation-name: AutoSlide; 
    -webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;}

#sContent li {
    display: inline;}

Merci d'avance pour l'aide que vous pourrez m'apporter.