Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier.
Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010.
Avant propos
La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images.
Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. En effet, la rédaction du tutoriel que vous allez lire m’a permis d’alléger, corriger et améliorer le code disponible en téléchargement. Il fera l’objet d’une refonte prochaine.
Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Ne les oubliez pas.
Les défauts des versions précédentes
Comme les expérimentations foireuses sont là pour faire ressortir les limites d’une technique, voyons ce qui nous manquait dans les versions précédentes (gardez-les sous les yeux pour tester, c’est mieux).
Sur la version contrôlable (la première) :
- Un saut de page est visible au clic sur les flèches ;
- Nous sommes obligés de multiplier les éléments (
divpour les conteneurs,apour les flèches) ; - il faut dupliquer des règles CSS à chaque image ajoutée.
Sur la version automatique (la seconde) :
- Il n’y a pas de commandes (soit…)
- Aucune possibilité de stopper l’animation
- il faut dupliquer des règles CSS à chaque image ajoutée.
Certains de ces problèmes ne sont pas résolubles, j’ai décidé de me concentrer sur la fusion des fonctionnalités et sur la correction de certains points :
- Fusionner le slideshow automatique et contrôlable
- Ajouter une commande de stop et lecture de l’animation
- Limiter la multiplication des éléments
- Virer le saut au clic (grâce à l’astuce CSS de Vincent De Oliveira)
Les autres problèmes persisteront, vous le verrez.
À noter que ce slideshow reste expérimental même si compatible avec les derniers navigateurs du marché.
Poser les fondations
Voici du code HTML (HTML5 en l’occurrence) que j’espère suffisamment parlant.
<section id="slideshow">
<div class="container">
<div class="c_slider"></div>
<div class="slider">
<figure>
<img src="img/dummy-640x310-1.jpg" alt="" width="640" height="310" />
<figcaption>The mirror of soul</figcaption>
</figure><!--
--><figure>
<img src="img/dummy-640x310-2.jpg" alt="" width="640" height="310" />
<figcaption>Let's cross that bridge when we come to it</figcaption>
</figure><!--
--><figure>
<img src="img/dummy-640x310-3.jpg" alt="" width="640" height="310" />
<figcaption>Sushi<em>(do)</em> time</figcaption>
</figure><!--
--><figure>
<img src="img/dummy-640x310-4.jpg" alt="" width="640" height="310" />
<figcaption>Waking Life</figcaption>
</figure>
</div>
</div>
<span id="timeline"></span>
</section>Ce code HTML pourrait être simplifié en prenant le risque de complexifier la CSS, mais cette dernière va déjà l’être suffisamment…
Pour faire simple nous avons une section pour le slideshow qui réunie le conteneur des images (.container), la partie qui glisse (.slider), les différentes images légendées (sous forme de figure > figcaption) et la petite barre de défilement du temps (#timeline).
Pour ceux qui s’interrogent sur la présence de commentaires HTML, je vous invite à lire cet autre article du blog : Display inline-block, une valeur trop peu utilisée.
Je n’ai mis aucun élément de commande pour le moment, nous verrons cela plus tard.
Voici le code CSS servant principalement à positionner, dimensionner et décorer les différents blocs, que je ne vais pas expliquer dans la mesure où ce n’est pas le cœur de l’article, mais il est un minimum commenté 
#slideshow {
position: relative;
width: 640px;
height: 310px;
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);
}
/* avanced box-shadow
* tutorial @
* http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow
*/
#slideshow:before,
#slideshow:after {
position: absolute;
bottom:16px;
z-index: -10;
width: 50%;
height: 20px;
content: " ";
background: rgba(0,0,0,0.1);
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
left:0;
transform: rotate(-4deg);
}
#slideshow:after {
right:0;
transform: rotate(4deg);
}
Avec ceci nous avons le support graphique des images. C’est un peu tout cassé, mais vous pouvez voir comment réaliser simplement un élément qui semble assez complexe, notamment au niveau des ombres et dégradés.
Gérons le débordement et l’alignement de tout ce contenu.
/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
position:relative;
width: 640px;
height: 310px;
overflow: hidden;
}
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
position:absolute;
bottom: 0; left:0;
content: " ";
width: 100%;
height: 1px;
background: #999;
}
/*
le conteneur des slides
en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 310px;
}
/* annulation des marges sur figure */
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
position: absolute;
display:block;
content: " ";
top:0; left:0;
width: 100%; height: 100%;
box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
Nous voici sur une mise en forme plus propre, les éléments figure sont placés sur une seule et même ligne et le débordement est caché.
Il ne nous reste plus qu’à présenter un peu mieux notre légende qui est actuellement planquée :
/* styles de nos légendes */
#slideshow figcaption {
position:absolute;
left:0; right:0; bottom: 5px;
padding: 20px;
margin:0;
border-top: 1px solid rgb(225,225,225);
text-align:center;
letter-spacing: 0.05em;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #fff;
background: rgba(255,255,255,0.7);
color: #555;
text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
Et voilà qui est mieux.
Nous allons maintenant nous occuper de la phase automatique du slideshow.
Nous verrons dans une troisième partie comment gérer des actions pour contrôler notre slideshow.
Animer notre contenu : phase automatique
Cette phase va être quelque peu répétitive puisque nous allons devoir créer un certain nombre d’animations grâce à la fonction CSS @keyframes. Pour en savoir plus sur les animations, je vous invite à lire la partie « animation » de cet article sur le timing sur Alsacréations.
Pour obtenir une animation cohérente tout le long d’un cycle, vous devez vous poser la question suivante :
Combien de temps est nécessaire pour la compréhension de chaque slide ?
Bien entendu, la réponse va dépendre du contenu, mais imaginons que nous ayons 4 étapes, pas beaucoup de texte, 6 ou 7 secondes peuvent sembler suffisantes pour chaque étape. Il reste alors à estimer la durée d’une transition d’une étape à l’autre, 1 ou 2 secondes. Avec 8 secondes multipliées par 4, ça nous fait 32 secondes d’animation pour boucler un cycle complet.
Animation du conteneur
Commençons par animer le bloc qui contient nos images et légendes en le faisant glisser. Pour cela, créons notre animation :
/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}N’oubliez pas de préfixer également la règle @keyframes (oui ! Il faudra s’embêter à dupliquer le code de l’animation) de la sorte : @-webkit-keyframes slider {[…]} @-moz-keyframes slider {[…]}, etc.
Chaque étape est exprimée en pourcentage, aussi 50% signifie que nous en sommes à la 16ième seconde de notre animation.
Si plusieurs étapes ont la même valeur d’une propriété, ou si vous souhaitez créer un arrêt, il suffit de mettre la valeur sur la même ligne séparer par une virgule.
Par exemple, sur la première étape, nous avons 0, 20 et 100% qui cohabitent. Cela sous entend que de 0 à 20%, la valeur de left est de 0, nous créons donc un arrêt. Cela signifie aussi que de 95 à 100%, la valeur de left passe de -300% à 0. C’est un moyen facile de retourner à la valeur initiale pour créer une boucle.
Nous avons créer l’animation, il faut maintenant l’attribuer à notre élément de cette manière :
/* complétez le sélecteur : */
#slideshow .slider {
/* ... avec la propriété animation */
animation: slider 32s infinite;
}Cette syntaxe de la propriété animation est le raccourci de animation-name, animation-duration, animation-iteration-count, dans cet ordre précisément ici.
Animation de la ligne de temps
Notre petite ligne d’un pixel de hauteur servant de ligne de temps va être animée sur le même principe.
Mais avant cela, donnons-lui quelques styles de couleur.
#timeline {
position: absolute;
background: #999;
bottom: 15px;
left: 15px;
height: 1px;
background: rgb(214,98,13);
background: rgba(214,98,13,.8);
width: 0;
/* fonction d'animation */
animation: timeliner 32s infinite;
}Il est ainsi placé précisément en tenant compte des marges autour des photos, et nous lui attribuons tout de suite une animation nommée timeliner qu’il nous faut déclarer comme ceci :
@keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}Ici nous savons que la ligne doit être à son maximum à quatre reprise (avant chaque changement de slide). Il y a donc 4 étapes à 640px (largeur max), et 4 (si on confond 0 et 100) à 0.
Animation de la légende
Même procédé, nous allons faire monter et descendre notre légende à chaque slide.
@keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% { bottom: -55px; }
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; }
}Puis nous accrochons cette animation à notre élément :
/* ajouter à l'élément : */
#slideshow figcaption {
/* ... la propriété animation */
animation: figcaptionner 32s infinite;
}Je ne sais pas si vous avez vu, mais le vignettage des slides est animé. Comme vous avez compris le principe, je vous laisse vous amuser à trouver le code
Nous avons désormais un slideshow qui fonctionne en mode automatique.
Maintenant, voyons comment procéder si l’on souhaite ajouter des boutons stop/marche, et suivant/précédent, ou « aller à la slide 3″, par exemple.
Contrôler notre contenu : phase manuelle
Lorsque l’on conçoit un slideshow, il est très recommandé de permettre à l’utilisateur de stopper l’animation, soit parce que ça le stresse, soit parce qu’il veut contempler une des images, soit… bref, voyons ce qu’on peut faire !
Pour rappel, nous n’avons encore aucun élément HTML pour ces contrôles, nous allons donc les rajouter progressivement.
Ces éléments de contrôles (des liens) vont cibler des ancres placés « à côté » de notre slideshow, en tant que frères indirects.
Juste avant notre élément #slideshow, placez donc ces éléments span :
<span id="sl_play" class="sl_command"></span>
<span id="sl_pause" class="sl_command"></span>
<span id="sl_i1" class="sl_command sl_i"></span>
<span id="sl_i2" class="sl_command sl_i"></span>
<span id="sl_i3" class="sl_command sl_i"></span>
<span id="sl_i4" class="sl_command sl_i"></span>Ceux-ci ont des classes communes (parfois) qui nous permettrons des actions groupées par la suite.
Vous comprendrez leur utilité par la suite, ne vous faites pas de souci.
Bouton jouer et arrêter
Les boutons play et pause peuvent être ajoutés dans la section #slideshow, juste avant notre .container.
Il n’y a aucune obligation à les placer précisément ici, il est généralement conseillé de conserver ordre d’apparition dans le DOM et ordre d’apparition à la lecture de la page. Là nous allons les placer au milieu (verticalement) du slideshow :
<a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
<a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>Ces éléments peuvent prendre leur apparence avec quelques lignes de code uniquement, et sont par défaut cachés : ils n’apparaissent qu’à certains moments bien précis que nous définirons par la suite.
.play_commands {
/* positionnement en haut à droite */
position: absolute;
top: 25px; right: 25px;
z-index: 10;
/* dimensionnement des icônes */
width: 22px;
height: 22px;
text-indent: -9999px;
border:0 none;
/* placez l'opacité à 1 si vous souhaitez voir les commandes */
opacity: 0;
/* préparation de transition sur opacicty et right */
transition: opacity 1s, right 1s;
}
/* on décale play légèrement sur la gauche */
.play { right: 55px; cursor: default; }
/* création de l'icône pause avec 2 pseudos éléments */
.pause:after,
.pause:before {
position: absolute;
display: block;
content: " ";
top:0;
width:38%;
height: 22px;
background: #fff;
background: rgba(255,255,255,0.5);
}
.pause:after { right:0; }
.pause:before { left:0; }
/* création de l'icône play avec des bordures */
.play {
width: 1px;
height: 1px;
/* les transparentes forment la flèche */
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #fff;
border-left: 20px solid rgba(255,255,255,0.5);
/* renseignez 1 pour voir l'icône de suite */
opacity: 0;
}
/* apparition du bouton pause au survole */
/* apparition des boutons au focus */
#slideshow:hover .pause,
.play_commands:focus {
opacity: 1;
outline: none;
}Voilà, toutes ces lignes pour mettre en place nos deux liens. Ceux qui trouveront plus pertinent de charger des images ou un sprite, je ne leur en voudrais pas.
C’est bien, c’est beau, mais pas fonctionnel.
Nous allons maintenant utiliser la pseudo classe target pour agir sur notre animation en fonction du bouton que nous aurons cliqué.
Lorsque pause est cliqué, nous ciblons l’élément #sl_pause, lorsque lecture est cliqué, c’est #sl_play qui est ciblé.
Dans notre scénario, nous n’afficherons que le bouton utile : pause quand la lecture est effective, play lorsque la pause est en place.
/* stopper les animation */
.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
animation-play-state: paused;
}
/* redémarrer les animations */
#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
animation-play-state: running;
}
/* switch entre les boutons */
.sl_command:target ~ #slideshow .pause { opacity:0; }
#sl_play:target ~ #slideshow:hover .pause,
#sl_play:target ~ #slideshow .pause:focus { opacity:1; }
.sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default; }Le premier bloc permet de stopper les animations grâce à la propriété animation-play-state. Cette propriété placée à sa valeur paused permet de figer l’animation.
Les sélecteurs sont assez spéciaux : .sl_command:target ~ #slideshow .slider permet de cibler « L’élément .slider fils de #slideshow lorsque ce dernier est indirectement frère de .sl_command, uniquement lorsque ce dernier est ciblé. ». Autrement dit : si .sl_command est ciblé, alors on va chercher le frère #slideshow puis son fils .slider pour lui appliquer un stop.
On procède de la même manière pour les autres éléments (figcaption, #timeline et .dots_commands que nous verrons plus tard dans le bonux) qui ont une animation en route également.
Pour en savoir plus sur les sélecteurs d’adjacence indirecte, lisez cet autre article du blog : Sélecteur d’adjacence indirecte en CSS3.
Le dernier bloc de code permet d’afficher les boutons en fonction de situation précise, je vous laisse essayer de décortiquer leur signification.
Bonux : Les flèches « suivant » et « précédent »
Il va nous falloir une paire de liens par étape de notre slideshow en gardant en tête que la flèche de gauche de notre première slide nous permet d’aller à la dernière, la flèche de droite de notre dernière slide nous permet d’aller à la première (vous me suivez ?). Lisez les title pour comprendre l’utilité de chaque flèche. Vous pouvez placer ces liens après nos deux liens pause et lecture.
<a class="commands prev commands1" href="#sl_i4" title="Aller à la dernière slide"><</a>
<a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème slide">></a>
<a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère slide"><</a>
<a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème slide">></a>
<a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème slide"><</a>
<a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème slide">></a>
<a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème slide"><</a>
<a class="commands next commands4" href="#sl_i1" title="Aller à la 1ère slide">></a>C’est là que la pertinence du markup en prend un coup. Pour des raisons d’accessibilité (clavier ici) ces liens ne sont peut-être pas des plus utiles et pratiques à utiliser. Est peut-être à envisager l’ajout de l’attribut tabindex="-1" pour empêcher le focus sur ces éléments. En effet, nous utiliserons un second système de navigation juste après, qui lui est peut-être plus pertinent.
Donnons quelques styles à nos boutons et cachons ceux qui ne sont pas utiles.
#slideshow .commands {
position: absolute;
top: 45%;
padding: 5px 13px;
border-bottom:0;
font-size: 1.3em;
color: #aaa;
text-decoration:none;
background-color: #eee;
background-image: linear-gradient(#fff,#ddd);
text-shadow: 0 0 1px #aaa;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .prev { left: -48px; }
#slideshow .next { right: -48px; }
#slideshow .commands { display:none; }
#slideshow .commands1 { display: block; }Très bien, nous avons des flèches… mais que va-t-on bien pouvoir bouger avec ?
Sur le même principe que précédemment, nous ciblons l’un des span abandonnés en début de code. Si vous cliquez sur une des flèches, pour le moment ça ne fait que stopper l’animation (oui, tous les span sont porteurs de la classe .sl_command, rappelez-vous, en en ciblant un, les animations s’arrête).
En fonction de l’élément ciblé, on pourrait stopper l’animation et changer les valeurs de left pour le slider, de width pour la timeline, et de bottom pour la légende. Ça serait cool hein ?
Oui mais non, parce qu’en fait ça ne fonctionne pas : les keyframes sont « prioritaires ».
C’est ce qui nous oblige à compléter notre code HTML légèrement avec ce petit morceau :
<div class="c_slider"></div>Il est déjà présent dans le code fourni initialement (premier bloc de cet article).
Cet élément nous permet d’appliquer les images en image de fond. Ces mêmes images que nous avons déjà chargé dans le HTML, nous allons les appliquer en background CSS.
C’est en faisant bouger ce nouvel élément que nous allons donner l’illusion d’un slideshow classique. Je dis bien illusion, car vous aurez compris qu’ici on se restreint à l’idée d’un vrai diaporama, avec des images, et non du contenu textuel qu’il serait difficile de « dupliquer ».
#slideshow .c_slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 310px;
/* multiple background */
background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat,
url(img/dummy-640x310-2.jpg) 640px 0 no-repeat,
url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat,
url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat;
transition: background 1s;
}Cette division fournies de quelques images est cachées par la partie principale du diaporama pour le moment. Lorsque nous ciblerons le contenu avec l’une de nos flèches « suivant » ou « précédent », nous cacherons ce diaporama automatique (qui se sera stoppé) pour découvrir nos slides contrôlables qui bougeront en fonction de l’élément ciblé.
Vous n’allez pas m’aimer… :
/* on cache le slider */
.sl_i:target ~ #slideshow .slider { visibility: hidden }
/* on planque la 1ère pastille (cf. bonux suivant) */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after { display:none; }
/* pour afficher la 2ème pastille (cf. bonux suivant) */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before { display:block; }
/* lorsque on cible le premier slider */
/* on cache tous les "précédent" et "suivant" */
#sl_i1:target ~ #slideshow .commands { display: none; }
/* on affiche seulement deux flèches */
#sl_i1:target ~ #slideshow .commands1 { display: block; }
/* correspond au décalage des images */
#sl_i1:target ~ #slideshow .c_slider { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
/* on place la pastille tout à gauche */
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; }
/* même procédé lorsqu'on cible le second slide */
#sl_i2:target ~ #slideshow .commands { display: none; }
#sl_i2:target ~ #slideshow .commands2 { display: block; }
#sl_i2:target ~ #slideshow .c_slider { background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:18px; }
/* puis le 3ème */
#sl_i3:target ~ #slideshow .commands { display: none; }
#sl_i3:target ~ #slideshow .commands3 { display: block; }
#sl_i3:target ~ #slideshow .c_slider { background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before { left:36px; }
/* et enfin le 4ème */
#sl_i4:target ~ #slideshow .commands { display: none; }
#sl_i4:target ~ #slideshow .commands4 { display: block; }
#sl_i4:target ~ #slideshow .c_slider { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before { left:54px; }À chaque étape nous déplaçons les images, cachons tous les liens « précédent » et « suivant » sauf ceux dont on peut avoir besoin, et on déplace la petite pastille de la navigation secondaire (voir bonus qui suit).
Bonux : « pagination » pour sauter vers une slide
Vous avez certaine souvent vu ces petits points au pied d’un slideshow qui servent un peu de pagination et qui, parfois, permettent de savoir précisément où on se trouve dans le déroulement des slides.
Nous allons en créer une. Pour commencer, ajoutons ce code HTML juste après l’élément timeline
<ul class="dots_commands"><!--
--><li><a title="Afficher la slide 1" href="#sl_i1">Slide 1</a></li><!--
--><li><a title="Afficher la slide 2" href="#sl_i2">Slide 2</a></li><!--
--><li><a title="Afficher la slide 3" href="#sl_i3">Slide 3</a></li><!--
--><li><a title="Afficher la slide 4" href="#sl_i4">Slide 4</a></li>
</ul>Puis, ces quelques lignes de CSS pour donner un style bien propre à nos petits points.
N’hésitez pas à agrandir les dimensions si ça vous semble trop petit.
.dots_commands {
padding:0;
margin:32px 0 0;
text-align: center;
}
.dots_commands li {
display: inline;
padding:0; margin:0;
}
.dots_commands a {
position: relative;
display: inline-block;
height:8px; width: 8px;
margin: 0 5px;
text-indent: -9999px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* quelques styles au focus */
.dots_commands a:focus {
outline: none;
background: orange;
}
.dots_commands li:first-child a { z-index: 25; }Rien de sorcier ici.
On s’assure simplement en dernière ligne que le premier élément ait un z-index supérieur aux autres. Nous allons nous en servir pour l’animation qui suit.
Nous allons créer un petit disque par dessus ces puces pour représenter le slide visible par un point d’une couleur différente. Pour ce faire nous utilisons les pseudo-éléments.
/* on style after et before, on utilisera les deux */
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
position: absolute;
top: 0; left: 0;
content: " ";
width: 8px; height: 8px;
background: #bd9b83;
z-index:20;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* on anime "after" */
.dots_commands li:first-child a:after {
animation: dotser 32s infinite;
}
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */
.dots_commands li:first-child a:before { display:none; }
/* c'est parti pour l'animation ! */
@keyframes dotser {
0%, 100% { opacity: 1; left: 0; }
20% { opacity: 1; left: 0; }
22% { opacity: 0; left: 0; }
23% { opacity: 0; left: 18px; }
25% { opacity: 1; left: 18px; }
45% { opacity: 1; left: 18px; }
47% { opacity: 0; left: 18px; }
48% { opacity: 0; left: 36px; }
50% { opacity: 1; left: 36px; }
70% { opacity: 1; left: 36px; }
72% { opacity: 0; left: 36px; }
73% { opacity: 0; left: 54px; }
75% { opacity: 1; left: 54px; }
95% { opacity: 1; left: 54px; }
97% { opacity: 0; left: 54px; }
98% { opacity: 0; left: 0; }
}Comme nous l’avons prévu dans notre bonus précédent, nous n’avons rien besoin de gérer en plus. Ces liens ciblent les mêmes éléments que nos flèches latérales et ont donc le même effet. (stop de l’animation et slide contrôlable avec tous les effets qui y sont liés)
L’animation peut sembler compliquée, mais c’est la logique de « disparition, déplacement, apparition » multiplié par 4 (4 étapes). Pour information, jusqu’à très récemment, Google Chrome avait du mal avec les animations sur before ou after. Je ne sais pas si ça a changé, il me semble.
Et on en restera là !
Pour être sûr que tout fonctionne, j’ai effectué un test en suivant ce tutoriel et en préfixant pour Firefox uniquement, voici le résultat : Slideshow Full CSS3.
Lors de la rédaction de ce tutoriel certains éléments comme les infobulles ou le vignettage animés ont été volontairement omis pour alléger le contenu. Si certaines portions de ce tutoriel restent pour vous un mystère à cause d’un manque d’explications, l’espace de commentaires est là pour vous 
Analyse personnelle
Ce qui est bloquant est gourmand en lignes de code ici, c’est la volonté de vouloir fusionner système automatique et système contrôlable au clavier, souris ou même touché.
Ce slideshow date de novembre 2011, les techniques se sont multipliées, il existe d’autres solutions full CSS3 passant par l’utilisation détournée des éléments label et input de type radio. En contrôlant la valeur de la coche avec la pseudo-classe checked il est possible d’agir sur les éléments, de la même manière que nous le faisons ici avec la pseudo-classe target.
Je vous invite à regarder ce qui peut se faire ailleurs, comme par exemple sur ce Slideshow Full CSS3 Responsive.
L’espace de commentaires est à vous !
Sources et liens utiles
Bonjour,
Je viens de découvrir cet article un peu tard certes mais bon
Je voudrais m’en inspirer pour un cas pratique, le but est de faire un slide non pas sur des images mais différentes frame (youtube, site web, google docs), autre contrainte c’est la modification du temps entre chaque slide penses-tu que ce tuto pourrais convenir ou être adapté ?
J’ai déjà réaliser pour mon cas le slide en java-script, mais niveau perf c’est pas très bon et j’ai beaucoup de conflit avec les google docs.
Merci
tres sympa comme slideshow
le top si il était responsive
maybe in the futur
C’est bien chouette un carrousel si complet sans js.
Avec la volonté de certains navigateurs de forcer les mises à jour, on envisagera sérieusement d’en utiliser à grande échelle.
La plus grande contrainte de ce type de slideshow sera de les faire s’adapter aux nombres de visuels sans repasser dans le CSS.
Si je peux juste ajouter une minuscule remarque, c’est sur l’animation de la timeline qui manque de linéarité. Avec ‘animation-timing-function: linear;’ ça fera l’affaire.
Bonne continuation !
Hello tout le monde,
@virtuousquare : c’est un choix de conserver cette fonction de timing par défaut. Elle me semble plus naturelle et beaucoup moins linéaire, c’est une animation qui a plus de vie.
@10tribu : oui j’y pensais récemment, mais je n’ai pas eu le temps de l’adapter encore.
@Jérôme : il est possible de créer des blocs de contenus complètement libre (iframe, map, video, animation, etc.), le reste c’est du CSS. Le plus difficile sera d’écrire les fonctions d’animation pour décaler les étapes en fonction du temps alloué à chaque slide. Good luck !
Très joli ! Cependant je suis un peu déçu de ne pas trouver des commandes avec des input radio.
Disons que j’aurai plutôt vu le slider comme celui-ci : http://csscience.com/responsiveslidercss3/ et l’automatiser de la façon suivante : mettre la propriété animation par défaut pour déclencher le défilement, et l’enlever au hover.
Bonnes finitions en tout cas et résultat très propre. Bravo !
… Juste énorme. Punaise …
Bonjour,
un petit bug peut-être, avec la barre d’avancement, sur la démo réalisée pour firefox: celle-ci défile correctement, mais si on se sert du menu sous l’image (disques colorés), la barre d’avancement reste figée et ne suit plus le mouvement. C’est peut-être mon ff, je n’ai pas testé sur d’autres machines.
M’enfin, c’est un détail, et globalement, c’est juste énorme. Merci pour vos lumières.
Hello Nicolas,
C’est exactement l’exemple que je propose de visiter pour élargir ses horizons en fin d’article
J’ai conçu ce slideshow avant que cette technique des boutons radio ne devienne « à la mode ». J’aimerai un jour avoir l’avis d’un expert en accessibilité, car je trouve cette utilisation un peu abusive, mais je pense que mon utilisation des ancres n’est pas beaucoup mieux.
Petit question piège pour toi : Comment enlèves-tu une animation au hover avec une navigation au clavier ou sur smartphone ?
Merci pour ton commentaire
Hello Nonos,
Je n’avais pas vu ton message, pardon.
Merci pour ton retour. Effectivement c’est normal, puisque l’activation de ces liens boque automatiquement le slideshow, la barre de défilement est donc temporairement mise en pause jusqu’à ce que l’utilisateur clic à nouveau sur play.
Il est possible de la cacher temporairement si ça perturbe. Tout se passe lorsque un élément de classe « .sl_i » est ciblé. Il faut cacher la timeline :
.sl_i:target ~ #slideshow #timeline { display: none; }Au plaisir !
Me voilà comme un idiot avec ta question piège =P. Mais je crois avoir une réponse : le hover est déclenché au clic, donc au clic sur les commandes. Donc quand le visiteur décide de cliquer sur un bouton, le tout se fige et il navigue comme il veut parmi les slides.
J’ai eu des doutes aussi sur le « droit » d’utiliser des input radio hors du formulaire, mais je dois avouer que la puissance de la technique est telle que je ferme les yeux sur « l’abus ». Après tout pourquoi pas ? Rien ne l’interdit, le wiki du W3C parle même de « _usually_ with a form control », et non d’exclusivité (http://www.w3.org/wiki/HTML/Elements/input). Je trouve l’utilisation des ancres beaucoup plus intrusives qu’un contournement par l’usage du type radio.
Mea culpa pour les « Sources et liens utiles » qui ont échappés à ma lecture quelque peu hâtive.
Ma question était à associer au slidehosw utilisant les boutons radio : tu n’as aucun contrôle (naturel) au clavier puisqu’il faut activer les
labelpour agir sur l’état des boutons.Il serait possible d’améliorer l’existant (système radio) pour le permettre, je n’ai encore jamais vu personne y penser
Ma question sur l’accessibilité n’est pas à lier avec l’usage du bouton radio proposé par le W3C, mais bien le côté utilisabilité. Pour l’utilisateur lambda, a priori pas grande différence, sauf s’il navigue sur IE < 9. Pour les autres… je n’ai pas testé, hormis le sans JS (ça c’est évident) et sans souris. Sur cette dernière, la solution avec boutons radio n’est pas viable « nativement ».
Bonne journée Nico.
EXCELLENT !
par contre, j’ai un petit probleme, j’ai ajouté une photo ( j’avais l’intention de rajouter plus ) mais impossible d’afficher la 5 eme image, pourtant j’ai tout fait dans le fichier html et le css … peut etre que je me trompe quelque part non ?
en tout les cas, ça reste un excellent travail !
Merci.
Hello,
Les codes CSS sont prévus pour 4 slides. (étapes des animations, dimensions du conteneur, etc.)
Il faut adapter la largeur du conteneur, les étapes, le temps total d’animation, les déplacements et les commandes du code HTML au nombre de tes slides.
C’est le plus compliqué une fois que tu as compris le principe
Bonjour à tous, j’espère que quelqu’un verra ce message..
Bon voilà j’ai besoin d’une personne qui serais capable de mettre ça sur un site en projet et faire quelques « réglages » si vous pouviez au moins me répondre ça serais super merci ..
Je voudrais pas paraître condescendant, mais il s’agit d’un tutoriel, donc à priori, facilement reproductible. Si tu viens sans compétence et que tu n’es là que pour trouver une bonne poire pour te l’intégrer gratuitement, il me paraît évident que ton espoir est très mince.
Bonjour,
Si tu avais porté ton attention sur les quelques commentaires de cet article (et des autres) tu aurais vu que je fais l’effort d’apporter une réponse à quasiment tous les commentaires ^^ (quasiment, parce que je ne suis qu’un homme)
Cependant, je ne pense pas qu’une intervention sur ton site soit possible. Il s’agit là d’un slideshow expérimental, il faut donc le prendre tel qu’il est, ou en comprendre le fonctionnement pour pouvoir l’adapter. C’est bien l’objet de mon article.
Navré, mais je n’empêche pas un volontaire de t’apporter son aide ^^
Bon courage pour la suite.
Bon week-end.
Bonjour,
Je ne sais pas où et comment ajouter les préfixes.
En fait j’ai trouvé là http://prefixmycss.com/ et là http://cssprefixer.appspot.com/
Pardon, je n’avais pas vu avant ton commentaire.
Tu peux y aller sans crainte.
Le premier lien je sais que ça fonctionne nickel
Je l’ai mis ici ^^ http://www.côtémode.fr/#sl_play
Par contre, j’ai agrandi les petits points de 10px, je ne comprends pas pourquoi ceux qui se déplacent sont décalés par rapport aux petits points fixes.
[code modéré]
Désolé j’ai supprimé le code, je sais où ça pêche.
Il faut modifier quasiment tous les endroits où tu croises « .dots_commands li:first-child a:before » et « .dots_commands li:first-child a:after » puisque ce sont ces éléments qui vont venir couvrir les puces en fonction du slide actif.
Il faut également modifier l’animation dotser en changeant la valeur de left.
J’avais prévenu, c’est expérimental et pas très adapté à la variation, à moins de connaître le code par cœur
Et j’ai d’autres questions aussi : sur mon blog http://www.côtémode.fr
1- Lorsque je clique sur un petit point, ça m’affiche un espace blanc (plus rien ne s’affiche)
2- Que faut-il faire pour que lorsque que je clique sur un petit point ou sur le bouton lecture, il n’est pas de déplace de la page ?
3- Comment affiche une page spécifique lorsque l’on clique sur une image ou un texte spécifique à cette page ?
Voilà
, merci d’avance !
Oui j’image que c’est expérimentale lol, en plus je suis une fille hein et le html c’est pas trop mon domaine
.
.
Mais je tiens à te remercier pour ce code car c’est le seul en html5, il était hors de question de faire du flash surtout maintenant avec tous ces nouveaux navigateurs et tablettes. Et c’est le seul tuto francophone qui marche donc merci
ps : c’est pas grave pour le code, c’était pour te montrer.
Les filles sont généralement plus consciencieuse dans la construction de leur code
Même moi qui ai conçu ce code, je ne saurais que te conseiller d’utiliser un slideshow en JavaScript (donc pas de flash) au lieu de ce script CSS expérimental, car sa personnalisation demande un bon niveau en CSS, et la moindre retouche HTML demande pas mal de modifications en CSS.
Il existe des scripts un peu partout sur la toile (certains sont regroupés ici : Sélection de slideshow ), et je suis en train d’écrire un dossier pour ce blog sur la création d’un slideshow de A à Z. Je n’ai pas de date de sortie prévue, mais c’est en cours
Ne m’en veux donc pas si je ne réponds pas à tes questions, plus par faute de temps que d’envie.
À bientôt.
D’accord je suis patiente !
Merci quand même.
Ton tuto est très intéressant. Se passer de javascript serait une étape assez intéressant pour le développement web. J’ai regardé plusieurs tutos sur les slideshows et l’HTML 5 mais seul le tien m’a semblé efficace.
Ai essayé de reproduire ton tuto et ca marche très bien pour 4 images. La légende ne se présentait pas bien. Ai effectué une modification : le figcaption en text-align:right au lieu de text-align:center. Et ca fonctionne.
Ai tenté pour 10 images mais ca ne fonctionne pas encore impeccablement. Surement un soucis dans mes left. Mais c’est du chipotage faut juste que je prenne le temps de tout peaufiner.
De manière générale, ton tuto me fascine car ca prouve que le javascript n’est peut être pas éternel (surtout avec l’HTML5 et le JQUERY).
Cependant, ce tuto a un défaut majeur. La maintenance est fastidieuse je trouve. La personne pour qui je code un site en html espère pouvoir ajouter elle même les photos. Vu la complexité du code, je pense que ca sera moi qui le ferait. En même temps tu as prévenu qu’il fallait des bases.
Je vais suivre tes tutos. J’avoue qu’ils sont très intéressants. Ah si ca t’intéresse voici l’url de la page où j’intègre ton code. C’est loin d’être fini. Merci encore.
http://ruins-rads.net16.net/medias1.php
Merci bien
Oui en plus d’être très expérimental, cette version CSS n’est pas aussi flexible que du JS qui peut permettre de rendre dynamique les calculs de positionnement, d’animation, etc.
Les variables en CSS arrivent doucement, en attendant il est possible de rendre cette solution CSS plus flexible en passant par un script PHP ou (peut-être) via SASS ou LessCSS, mais ce n’est qu’une hypothèse.
Je ne sais pas si tu as écrit jQuery en pensant à CSS3, mais jQuery est du JavaScript.
Pas mal cette petite adaptation
Bon courage, parce qu’il n’est vraiment pas évident ce code CSS ! :p
Salut,
J’ai une question, peut-être un peu idiote mais je me demandais ce que vous entendiez par : « n’oubliez pas de prefixer ! » dans :
/* fonction d’animation, n’oubliez pas de prefixer ! */
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
Bonjour,
Ce n’est pas une question idiote mais un commentaire imprécis (de ma part).
Il s’agit de préfixer la règle @keyframes :
C’est un défaut du CSS3 en l’état actuel, la redondance du code à cause des préfixes.
Bonne journée
Je dois donc remplacer mon code précèdent par celui-ci?
Oui c’est ça, l’idée c’est qu’à chaque animation déclarée, il faut la prévoir pour mozilla, webkit et les autres
Si je comprends bien mon code doit ressembler à ça :
@-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@-moz-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@-ms-frames slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@-o-frames slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
?
En gros oui.
Mais je crois que -ms- n’est pas utile car il le comprendra sans préfixe.
Il faut également placer la déclaration non préfixée à la fin.
Une dernière question, la délcaration non préfixée c’est à dire :
@slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
?
Oui c’est ça, mais sans oublier la règle @keyframes. Ton code devrait ressembler à ça :
@-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@-moz-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@-o-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
Ok, merci pour tes réponses
Bon il y a sans doute des choses (forcement même) que j’ai du zappé, mais ça « merde » de mon coté au niveau de l’animation.
Dès qu’on arrive à ce point dans le tuto, chez moi nada, peanuts, wallou, rien ne se passe. Pourtant j’ai l’habitude des tutos, mais alors là je ne vois vraiment pas le pourquoi du comment.
Le pire c’est que le tuto est superbement bien expliqué, c’est là où c’est encore plus rageant, bref si une bonne âme charitable veut bien me donner un coup de main ou m’aiguiller :
http://www.crazy-youths.com/retourdumonde/v2/index.html
Prefixer par prefixmycss.com
Et j’ai sauté la partie sur le bouton play/pause qui ne me convenait pas
Merci de votre aide, et en tout cas je le répète superbe tuto !
Bonsoir
Merci pour ton retour.
Ce n’est jamais évident de faire un long tutoriel qui reste compréhensible sur toute sa longueur. Du coup ce genre de retours me sont utiles.
Je vais éditer cette partie là parce que le problème revient souvent. En fait la règle @keyframes doit également être préfixée :
@-moz-keyframes pour mozilla par exemple.
Ça finit par être assez redondant, je l’admets.
Bon courage, et belle réalisation au passage
Merci de la réponse, du coup, je pense que je vais « m’emmerder » à me refaire tous les préfixes à la main (en m’inspirant du code définitif pris sur la page de démo de ton slider).
Par contre, c’est dû aussi aux préfixes le fait qu’on ne voit pas les flèches ? et que le « clic » sur les petits points ne fonctionne pas ?
Merci sur le feedback « visuel »
Eh eh ^^ »
Alors, pour tes flèches c’est parce que les liens ne contienne rien (balises vides) et qu’ils ne sont pas dans la section#slideshow.
Si les puces (et flèches) ne fonctionnent pas, c’est parce que tu as oublié les éléments
spanen début de code. Ils servent de références pour la pseudo-classetarget.Bon courage !
Superbe tuto! Tout ce qu’il me fallait pour un site qui fait appel à beaucoup de javascripts (qui entrent en conflit à la fin).
Mais j’ai quand même un « petit » souci : les boutons Prev et Next et les puces sont ok, sauf que ce sont les images qui ne s’affichent pas. Sous FF on ne voit rien, mais sous Chrome on voit bien le petit carré qui dit que l’image est manquante et il défile bien à chaque fois que j’appuie sur une puce. D’où peut venir ce problème s’il te plait?
PS : en mode auto le slider est nickel, c’est donc avec les commandes que j’ai un problèmes. J’ai utilisé le CSS fourni en download. Merci bien.
Hello,
Il faut vérifier que le chemin en background-image soit le bon (fait une recherche sur « url( » dans ta feuille de styles pour aller plus vite :p).
Bonne soirée.
dummy que je suis!! :p
Merci Geof
Bonjour, j’apprécie beaucoup ce tutoriel et j’ai tenté de réaliser ce slideshow. Le problème, toujours le même, avec IE c’est que je souhaiterais mettre des commentaires conditionnels pour exclure du code notamment la balise . Mais les commentaires déjà existants m’empêche de fermer mes balises..
Pouvez me donner un indice s’il vous plait. Merci.
*la balise section. dsl
Bonjour,
Je ne comprends pas trop en quoi les commentaires actuels sont gênants, mais plutôt que de s’embêter avec ces commentaires, cela vaudrait peut-être le coup de regarder du côté de HTML5 Shiv.
Merci et bonne continuation
Merci pour la réponse (je vais creuser!) et encore bravo de mettre à la disposition de tous des tutoriels de qualité. Ton travail est vraiment remarquable et il se démarque des autres qui proposent des solutions incomplètes.
Merci pour ces compliments
Mais j’ai bien conscience que même cette solution, de par la technologique qu’elle utilise, reste assez incomplète malgré tout.
Je suis sur un dossier plus complexe et plus complet pour un slideshow en HTML, CSS et jQuery accessible (je l’espère) et responsive.
Au plaisir.
Pour ton projet tu peux peut-être voir ça (si tu ne le connais pas déjà ):http://www.guillaumevoisin.fr/jquery/jdiaporama-v3-le-diaporama-jquery-est-de-retour
… il utilise jQuery et des transitions différentes qui finalement méritent d’être connues mais pas pour un slideshow où la simplicité doit primée.
C’est vrai que j’ai prévu du très très simple, mais c’est toujours bien de voir ce qui se fait ailleurs.
Merci
Bonjour,
Votre tuto est superbe. Je suis débutante mais j’ai réussi à le réaliser moi même. Sauf la partie des flèches ne fonctionnent pas. Quand je clique pour aller à la slide de droite rien ne se passe. Mais ce n’est pas grave, juste le fait d’avoir les images qui défilent toutes seules me convient. Par contre est-il possible de faire un lien vers une page web pour chaque image. On aurait un lien par image.
Merci…
Bonjour,
je reste scotché !!!
Quel tuto !! Je l’ai parcouru, pas encore appliqué mais je ne doute pas de faire de grands progrès grâce à vous.
Je vais dans un premier temps me contenter de « pomper » pour valider le fonctionnement « universel » (je ne compte pas IE) car j’ai constaté que l’exemple fonctionnait parfaitement avec Firefox pour pc ou pour tablette android seulement. Pas pour safari, chrome, opera mais j’espère uniquement parce pas les préfixes qui vont bien.
Merci encore
Bonjour,
J’espère que mon code sera suffisamment clair
Effectivement l’une des deux démonstrations (la plus simple) ne fonctionne que pour Firefox, afin d’alléger le code final et sa lisibilité. Il suffit de dupliquer les lignes préfixées et placer les préfixes adéquats pour que ça fonctionne sur les autres navigateurs
Bon après-midi.
Waouh ! Moi qui vient enfin de terminer de coder ma première version de slideshow manuel/automatique avec jQuery pour afficher des news, la découverte de ton slideshow en pur CSS me fait peur par rapport au nombre de lignes de code
Je vais regarder ça de plus près ce soir surtout pour le keyframes
Hi hi :p
Attention, c’est une démonstration. Ton slideshow en jQuery est certainement beaucoup plus flexible et retro compatible.
Mais c’est un bon exercice (selon moi) pour s’exercer sur plein d’aspects différents de CSS
Amuses-toi bien.
Superbe slide show.
J’essaie d’en faire un moi aussi mais je ne trouve pas le bon modele le tien s’en rapproche le plus.
Il me manque une fonction qui arreterait mettrait en pause le slideshow au survol de celui ci.
De plus une image differente apparaitrait par dessus toujours grace au hover. En fait il s’agit d’un slideshow de photo en NB et au survol de chacune d’entre elles une image en couleur correspondante apparaitrait.
J’avais trouver un slideshow en jquery mais je n’arrive pas à provoquer le hover depuis une image.
Si tu as une idée je t’en serai gré. Meme un tuto sur tel site ou autre.
Merci d’avance.
Hello,
Quelle technologie utilises-tu ? CSS uniquement ou jQuery/JavaScript également ?
Ici on est que sur du CSS3, pour ce que tu recherches il vaut mieux tabler sur du JavaScript je pense.
Si tu as une démo en ligne je pourrais mieux me faire une idée sur ce qu’il te reste à faire… (tu as le formulaire de contact si c’est trop privé)
Merci.
Nicolas, en CSS, tu peux appliquer la propriété filter: grayscale(0.5); (valeur entre 0 et 1, sans oublier les préfixes webkit, etc…) sur tes images et enlever l’effet au survol. Recherches sur Google : css filter, tu verras que tu peux appliquer quelques effets sympas avec filter
Geoffrey, bon chez moi, la démo rame pas mal sur Firefox v.11 (sans doute trop d’animations à gérer
). Je vais rester sur mon slideshow avec jQuery qui s’adapte automatiquement au nombre de slides présents mais je garde, dans un coin, les @keyframes pour faire de petites animations annexes 
Hello,
C’est clair que CSS n’est pas très adapté pour cela
Tu fais bien de garder un script JS pour ça !
Merci pour tes conseils sur les filtres webkit.
Bonne continuation.
Bonsoir Geoffrey,
Tout d’abord bravo pour la gestion de ce blog, autant pour le contenu que pour ton « accessibilité ». J’ai rarement vu quelqu’un qui répond vraiment à tous les commentaires.
J’aurais juste une question concernant ce slideshow. J’ai bien compris qu’il était peu adaptable pour les enquiquineurs tel que moi, mais je voulais savoir s’il était possible, dans le cas d’un diaporama à plusieurs images de faire défiler les images au clic des boutons. Autrement dit : j’ai 3 images sur x images visibles et je veux que la 1ere laisse place à la 4e lors du clic. (Je suis pas si je suis clair là..)
Penses-tu cela possible avec ta méthode et sans JS ?
Hello,
Merci Julien.
Le but de ce blog est de partager un maximum de choses, ça me semble naturel de répondre aux commentaires lorsque je le peux
Là je peux te répondre par la positive, mais ça va être clairement chiant, et il n’y a pas d’autre mot pour ça ^^
J’ai compris que tu voulais un slideshow un peu dans ce goût : jCarousel.
L’une des solutions les plus simples pour éviter d’avoir tout le code à changer, et de définir des dimensions en pixels pour chaque image et chaque changement de position du conteneur. Du coup libre à toi de faire glisser le conteneur de 3 x 150px (si on imagine que 150px sont utilisés pour une image).
Te fournir le code serait trop long pour moi, il va falloir t’embêter à la faire :p
Sinon je conseille toujours JS (jQuery) pour faire ça, cette démonstration de CSS reste une démonstration
Bon courage !
Bonjour,
Je me suis servis des codes sources téléchargés dans la démo pour me faire un slide, j’ai un soucis,
Sous IE 9 le CSS n’est pas pris en compte…
http://www.ecoutealapersonne.fr/essaie/
Est-ce normale ?
Et j’aurais aimé savoir comment mettre des lien derriere les images ou les légendes ?
Car mettre autour de par exemlple cela ne marche pas, sauf sous IE9, qui ne prend pas en compte le CSS donc le lien fonctionne…
Merci d’avance pour votre aide ..
AKSEL
Bonjour Aksel,
Navré mais je ne vais pas pouvoir t’aider, par manque de temps.
Tu as un code invalide, il faudrait peut-être commencer par là
Bon courage.
Geoffrey
Personnellement, j’ai tendance à délaisser IE… Sauf peut-être la version 10 ! Vu le nombre de visiteurs de mon site et le fait que les effets soient comme un bonus, je me prends pas trop la tête. Je vérifie que c’est lisible, utilisable, et seulement si j’en ai envie, je vais m’arracher les cheveux sur IE !
Je regarderai tout ça plus longuement, promis !
Bonjour geoffrey,
Merci beaucoup de m’avoir répondu, je comprends que vous n’ayez pas le temps.
Ce que je ne comprend pas c’est que j’ai pris le code source de votre slideshox puis modifé, pour avoir une apparence un peu différente… Mais de là a ce qu’il soit invalide …? Comment remédier a ce problème ?
Cordialement AKSEL
Bonjour,
Tu places des liens autour des images (de mémoire c’est interdit dans un élément figure) et le code autour du slideshow est invalide.
Pour corriger cela il suffit de consulter le validateur et de suivre les conseils donnés :
http://validator.w3.org/
Bonne journée.
Bonjour, je viens de me servir du tuto pour me faire un joli slideshow, merci bien, super utile.
le sel problème c’est que je n’arrive pas a mettre de lien sur les photos puisque apparemment elles sont lu du Css et pas du html (je suis clair la? Oo).
Quelqu’un a une idée?
La pagination ne marche pas non plus, et je viens de voir qu’il en est de même sur la démo.
Je ne sais pas si quelqu’un me répondra avant les fêtes, mais si ce n’est pas le cas, je vous souhaite une bonne année.
Bonsoir,
Avez-vous bien lu qu’il s’agit d’une démonstration CSS ?
Ce tutoriel s’adresse initialement aux personnes connaissant les bases de HTML et CSS, l’ajout de liens ne devrait pas vous poser de problème.
Après quelques nouveaux tests sur les derniers navigateurs du marché, ma démo semble plutôt bien fonctionner, même sur tablette et smartphone.
Bonne fête à vous
j’ai regardé sur chrome, moz, IE, safari et opéra, ainsi que sur Iphone, et c’est pareil, sur le lien en dessous on peux voir que je suis sur l’image trois et la page 1.
http://uppix.net/4/d/f/4124513c1c479ed2da8a72ce131aa.jpg
ça viendrais d’ou a votre avis?
et pour les lien hypertexte, normalement ça ne me pause pas de problemes, sauf quand les images sont en background,
background: url(img/dummy-640×310-1.jpg) 0 0 no-repeat,
url(img/dummy-640×310-2.jpg) 640px 0 no-repeat,
url(img/dummy-640×310-3.jpg) 1280px 0 no-repeat,
url(img/dummy-640×310-4.jpg) 1920px 0 no-repeat;
je n’ai pas encore appris a mettre des liens en Css.
Soyez indulgent avec le novice que je suis et essayez de m’expliquer.
cette capture est pas mal non plus, je suis en image 3 alors que l’infobulle me dit diapo 1.
http://uppix.net/7/f/e/393953b133a593b38620663136b12.png
Bonjour.
Merci pour l’exemple.
J’avais juste une question. Des utilisateurs peuvent poster des images sur mon serveur. Quand ils les postent, automatiquement leur chemin d’accès sont enregistrés (ainsi que leurs légendes) dans une table (IMG_SRC). Est-ce qu’il y a une possibilité de faire passer ces images dans le SlideShow ? J’ai essayé et il me passe que la 1ère, le reste des images sont extraites après le SlideShow, donc out. Merci.
Voici un bout de code :
extrait incomplet modéré
Le code ne passe pas dans le champs de texte
Bonsoir,
Oui une partie du code HTML est interprétée, l’autre partie est supprimée par mesure de sécurité (ou antispam).
C’est pourquoi j’ai ajouté un message d’avertissement juste avant le formulaire de commentaire
Vous pouvez toujours ressayer en échappant d’avance les caractères HTML.
Passez un bon réveillon !
@Baxter : ce n’est pas une histoire d’indulgence mais de compréhension du code existant. Pourquoi vouloir aller plus loin que le code existant si celui-ci n’est pas compris ?
Ce slideshow regroupe deux comportements distincts mentionnés (il me semble) en début d’article : un système de visionnage automatique qui peut être stoppé sur demande, et un système manuel qui fonctionne grâce à la pagination.
Les deux ne sont donc pas liés ni synchronisés, sinon il m’aurait fallu user de JavaScript.
D’où le statut de simple démonstration CSS mentionné dans l’article et dans mon précédent commentaire.
Les liens sont dépendants de HTML, ils ne peuvent être ajoutés en CSS.
Bon réveillon
Ah ok,
Voici le code (j’ai enlevé les balises html)
img src=
? echo $data["path"]; ?
alt= »" width= »640″ height= »310″ /
figcaption
? echo $data["legende"]; ?
/figcaption
J’espère que c’est clair. Comme vous le savez les $data[] permettent de récupérer des données de la base de données.
Merci d’avance, et bonne année.
Bonjour,
C’est clair mais pas assez complet je pense.
Soit il vous manque l’élément parent
figure, soit vous ne me l’avez pas précisé.Le mieux serait avoir un exemple concret sur une page en ligne, que je puisse visualiser le code généré. (le code HTML donc)
Merci et bonne année
bonjour, et bonne année à tous,
je me tourne vers vous car j’ai un petit problème sur les slides, je ne vois que la 1er image j’ai changé les url() dans le style idem ds la partie html et rien ne change !
le slide s’effectue bien,
1er slide —> mon image 1
2eme slide —> la moitié de mon titre de l’image 1
3eme slide —> la seconde moitié de mon titre de l’image 1
Je ne sais pas d’ou vient ce décalage merci par avance!
Hello et bonne année également.
Hélas sans un exemple en ligne il va être difficile de t’aider, on ne sait pas dans quelle mesure tu colles à l’exemple de cet article.
Merci.
Salut Geoffrey,
Voici 4 images pour expliquer mon problème.
Image 1: http://uppix.net/8/b/8/cfb03539f5d2d552dad733dd480c6.bmp
Image 2: http://uppix.net/4/f/1/c57f4d04a97e1c1ed134d9daeadd4.bmp
Image 3: http://uppix.net/a/7/3/88fea2af4ea65a14b52cd8842912c.bmp
Image 4: http://uppix.net/1/6/a/190306f73891366571bb3a943e2c2.bmp
Si vous avez une solution à nous apporter, ça serait sympa
Merci.
trop moutmout Geoffrey !!!
Merci !!!!
Hélas ça ne m’avance pas beaucoup plus que précédemment.
Désolé.
bonjour,
je n’arrive pas à arriver à un resultat comme le tien. j’ai toujour les image les unes sous les autres.
peux u m’aider stp
merci
Bonjour,
Lorsque je clique sur les fleche pour changer d’image ou sur les point en ba les image disparaissent. Peut tu m’aider stp.
merci
Bonjour,
Hélas non, je n’ai pas la possibilité en terme de temps de t’aider à la mise en place d’un slideshow.
J’ai conçu celui de démo en suivant à la lettre ce que j’ai écris (sauf réel oubli, mais je ne crois pas).
« Cent fois sur le métier tu remettras ton ouvrage »
Salut
J’ai une question pour css3/html5 slideshow
Comment mettre le défilement des images sera d’une manière automatique chaque 1s ou 2s voire l’autre image.
Bonjour,
Je l’ai peut-être raté quelque part dans l’article mais je voulais savoir si cela était possible de remplacer les images par des vidéos ou des liens vidéo ?
Bonjour,
Théoriquement il est possible de placer n’importe quel code HTML dans ce slider. Cependant ça reste expérimental et le système de contrôle des slides ne serait plus opérationnel tel que le code est conçu. Comme je l’ai dit dans les autres commentaires, il s’agissait vraiment de détourner des propriétés CSS pour tenter de créer un slideshow et en montrer les limites.
Préférez un slideshow en JavaScript pour le moment
Bonjour Adil,
L’information est dans l’article, par contre le réglage se fait pour toutes les images, tu ne peux pas régler la transition entre deux images différemment pour deux d’entre elles uniquement, par exemple.
Bonjour à tous,
Voilà, j’ai suivis ce tuto pour créer un slideshow à défilement automatique :
[Edit: mauvais lien]
Cela fonctionne, je n’ai aucun soucis, néanmoins je voudrais si possible mettre un pagination (en petit point) comme sur ce tuto pour pouvoir en plus du défilement, se déplacer de façon manuelle :
http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Mais je n’y arrive pas, pouvez vous m’aider svp
Seb
Bonjour,
J’espère que tu as bien lu le tutoriel et les commentaires avant de demander de l’aide.
Merci, bon dimanche.
Bonjour,
Tout d’abord grand bravo pour ton talent, c’est vraiment formidable.
Oui j’ai bien lu le tuto, même plusieurs fois mais je n’arrive pas à mélanger les deux codes.
Premier lien : http://www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html
De même
Merci beaucoup ^^
En fait si je te demande ça, c’est qu’au début de l’article je parle de cet aspect de la chose : ce code est une évolution un peu complexe du tutoriel présenté sur Alsacréations.
Il va donc être très difficile de mélanger les deux, puisque celui-ci est déjà un mélange de deux concepts.
En tout cas moi je ne m’y risquerai pas :p
Entre nous, cette démo CSS3 devrait rester une démo, à moins que le contexte soit contraignant au point de ne pas pouvoir utiliser JS, et dans ce cas le code demande une très bonne connaissance des CSS pour être modifié.
Mais dans un premier temps, pour éviter les erreurs, il vaut mieux le copier, puis quand ça fonctionne, le démonter pour comprendre vraiment comme ça marche. À la chinoise j’ai envie de dire ! :p
Avec plaisir
Ce que je voudrais faire alors c’est mélanger le tuto du slideshow d’Alsacréations avec le système d’avant arrière toujours d’Alsacréations.
J’ai tenté mais cela n’a pas fonctionné.
Lien tuto : http://www.alsacreations.com/tuto/lire/1058-ID-slideshow-css3-target-animation.html
C’est bon j’ai réussis à me débrouiller par contre tu pourrais me dire comment on fait pour régler le « @keyframes AutoSlide » quand on changer la taille des images. J’ai mis des images de 320px et il y’en a trois pour le moment. J’ai lu et relu le sujet mais je ne comprends pas trop le système de pourcentage. Merci
Je dis surtout ça, si je met plus de 3 images.
Bonjour votre tuto est très bien fait. Je vous remercie.
Je me suis arrêtée à la timeline, ca me plait bien comme ça.
Ca marche très bien pour firefox, mais j’ai un petit (gros) problème avec Safari et Chrome, les slides ne veulent pas défiler….(et je n’ai pas regarder encore pour IE…)
Avez vous une solution pour moi?
Bien cordialement,
L.
Bonjour,
Merci pour ton retour.
As-tu pris le temps de rajouter les préfixes pour Webkit ?
yeeees ! Ca marche !
Merci encore pour le partage de vos connaissances !
L.
Un grand bravo pour la réalisation de ce tutoriel !
Simple et efficace
Malheureusement, j’ai un petit problème.
Je suis passé à 3 images au lieu de 4.
J’ai modifié le code qui s’y rapportait.
Le problème, c’est que quand je laisse le « show » fonctionné seul, il crée quand même un 4ième point, et ajoute la première image. Puis seulement recommence la boucle.
Cela peut-il être du à au timing?
Merci d’avance.
Hello,
Merci, mais je ne pense pas que ce soit « simple » justement ^^
Il y a beaucoup de personnes qui se cassent les dents à vouloir ajouter ou supprimer un slide sans comprendre que ce moyen de créer un slideshow n’est pas flexible. Il faudrait passer par un script PHP ou un fichier LESS ou SASS pour créer des styles dynamiques afin d’améliorer la maintenabilité du code, qui, je le rappelle, n’est pas fait pour ça à la base.
Cet article/tuto est une démonstration un peu déviante de CSS3.
Au niveau des modif il y a toutes les animations à revoir pour recalculer les positions des différents éléments.
Bon courage.
Bonjour, bravo pour ce slideshow de qualité, juste une petite question est-il possible de rajouter dans les slides des liens, boutons et du texte et si oui comment? Merci d’avance
Bonjour,
Merci pour ce compliment.
Il me semble que les commentaires font partie intégrante du blog, je vous invite à les lire
Merci.
Bonjour,
Vraiment sympa ce tutoriel est difficile à reproduire (pour moi en tout cas).
Mais je trouve étrange deux choses:
1 – Si on place le css dans un dossier css, même en changeant le chemin dans l’index les pastilles ainsi que les flèches sont cassées.
2 – Si je ne mets pas les commentaires dans les du « dots_commands » ma pastille de sélection se décale.
Peut-être que j’ai loupé quelques choses.
ps: j’ai mis un temps fou pour trouver le soucis lol.
En tout cas, merci pour ce tuto, j’ai appris pas mal de choses.
Bonjour à tous !
Ce tutoriel est très astucieux et j’ai planché dessus pas mal de temps pour finalement me rendre compte que je n’avais pas les connaissances suffisantes pour réaliser ce que je voulais à partir de cette page…
Mon objectif de départ était de faire ceci mais avec 3 vidéos (et les balises ) et que l’ensemble s’adapte à la taille de la fenêtre ou écran.
J’ai bien essayé avec max-width et width: 100% (pour les vidéos dedans) mais comme dans ce tuto les valeurs du cadre sont fixes, à un moment donné, tout disparaît ! héhé
bref voilà où j’en suis :
(ça n’as plus grand chose à voir avec le tuto en fait car en plus j’y ai ajouté un peu de javascript mais si l’un d’entre vous avait un lien qui propose une solution correspondant à mes attentes, je suis plus que preneur !!
http://www.jeremy-godreau.com/8.html
Bonjour,
Il semblerait que tu ais déjà trouvé une solution ? Ta page semble bien fonctionner actuellement.
Merci
En fait il donne l’impression de fonctionner mes les flèches jaunes envoie toujours vers le même lien (cad : « video2″ pour la flèche « next » et « video3″ pour la flèche « prev », peu importe la vidéo que l’on est en train de lire, … et c’est embêtant)… Et puis j’aurai aimé avoir un changement de couleur des pastilles lorsque l’on a cliqué dessus pour savoir sur quelle vidéo on est. Mais ça je ne vois vraiment pas comment faire malheureusement…
En effet, je pense que vous avez oublié une partie du code qui utilise les ancres et cibles en HTML et CSS (
#ancreet:target).J’ai bien tenté de l’intégrer mais mes href contiennent des « javascript:changeVideo » j’ai essayé plusieurs trucs (comme ajouter un id= »sl_i(1, 2 ou 3) dans les balises <a> » mais ça ne fonctionnait pas… Il y a un truc que je n’ai pas du bien capter.
Du coup je ne vois pas comment faire avec ces href « sl_i1″ « sl_i2″ « sl_i3″, d’ailleurs je n’ai pas tout compris a ce bout de code CSS :
#sl_i1:target ~ #slideshow .commands{
~ > il sert à quoi ce symbole ? (sans vouloir faire le néophyte absolu ! ^^)
C’est que tu t’es lancé dans un tutoriel sans en comprendre le sens, ou que tu as bêtement copié le code, donc forcément ça ne marche pas
Je t’invite à lire le tutoriel, il me semble avoir fait les efforts nécessaires de vulgarisation.
Merci.
bonjour,
avec chrome mon site s’affiche correctement; mais lorceque j’utilise internet explorer les style ne sont pas pris en compte je ne sait pas pourquoi…
peut tu me dire comment regle ce probleme stp
merci
Bonjour,
Internet Explorer est bien trop vague, une version précise ?
Les styles seront forcément différent, et le slideshow n’a pas la même réaction sur ce navigateur. (notamment en slide automatique, ça ne marche pas)
internet explorer 9
j’ai meme rajouter un menu et tout et c’est une catastrophe
comment faire pour regler le probleme ?? et oui le slide ne fonctionne pas du tout
Bonsoir,
Pour régler le problème il fait déjà le connaître. En l’état je ne sais rien tant que je n’ai pas vu la chose dans son milieu naturel, à savoir : une page web.
Je n’ai pas encore de talent de devin hélas
Bonne soirée.
peut tu m’envoyer ton adresse mail pour que je t’envoi le lien du site je ne veut pas le laisser ici merci
Bonjour,
je voulais savoir s’il était possible de mettre 2 slide dans une même page (différente photos).
Et si oui comment car j’ai essayé et échoué.
Merci d’avance
Bonne soirée
Bonjour,
et tout d’abord merci pour ce tutoriel très complet et très bien expliqué.
J’ai adapté votre slide à la bannière du site internet de mon club de triathlon, et cela fonctionne (cf http://www.valence-triathlon.com/slide2).
J’ai également adapté votre slide automatique sur alsacréations pour faire défiler les partenaires, et cela fonctionne également (cf. http://www.valence-triathlon.com/slide_partenaires).
Problème : quand j’essaie de mettre les deux slides sur la même page, les CSS entrent en conflit et les animations s’emmêlent. Pouvez-vous svp m’indiquer comment les différentier pour qu’elles s’affichent correctement?
D’avance, merci
Ugo
Bonjour,
Houla c’est risqué ça ! :p
Je ne saurais t’aider car je n’ai plus les codes en tête. Il faut juste vérifier que tu n’as pas des noms de classe identiques, ou des noms d’animation identiques.
Bon courage.
Bonjour;
J’ai découvert se site en fouinant un peu sur google. Je suis entrain de réaliser un site internet pour un ami. Seulement, je suis plutôt novice. Bref, j’ai suivi ce tuto et j’ai donc tenté de réaliser un slideshow en CSS3 & HTML5 comme ci-dessus. Malgrès toutes les explications, je bloque bêtement sur @keyframes.
J’ai lu toutes les questions/réponses mais je ne trouve pas la solution. Pouvez-vous m’expliquez plus précisément où placer @keyframes et les autres et de quelle façon faut-il le coder ?
J’utilise dreamweaver pour créer mon site.
A bientôt
Bonjour,
Le tutoriel se suit étape par étape en complétant votre code source CSS au fur et à mesure (donc en rajoutant du code à la suite du code précédent).
Les keyframes sont des sortes de fonction que l’on peut placer n’importe où dans le fichier CSS, elles sont ensuite appelées lorsqu’un élément doit être animé.
Si vous êtes débutant je vous conseille largement de passer par une solution JavaScript déjà prête.
Sans vouloir vous vexer, il me semble m’être suffisamment expliqué sur la complexité du code et sur l’aspect démonstratif plus que didactique de cette réalisation. (voir commentaires, qui font partie intégrante d’un article)
Bonne continuation
Je comprends. Je suis tenace et je vais continué à chercher l’erreur dans mon code.
En tout cas les couleurs dans mon code source m’indique que le code que j’ai mis n’est pas bon.
MERCI ENCORE POUR TON TUTO BONNE CONTINUATION
Le problème si tu fais attention à la coloration syntaxique, c’est que beaucoup d’éditeurs vont se planter sur ce type de code, car certaines propriété ne sont pas encore prévues au sein de ces IDE.
Ton code ne semble pas avoir d’erreur sur cette partie là.
Bon courage.
Youpiiya ! C’est ok pour moi. C’était trop brouillon dans mon code source, j’ai fait un peu de nettoyage et voilà ce que ça donne:
[nettoyage du code]
Encore merci à toi
Ah ben de rien, j’ai rien fait moi
Je me suis permis de virer ton code, il est mal passé.
Bonne continuation
Salut Geoffrey avant tout merci !
je bloque sur « la pagination » j’arrive pas comprendre comment le code gère l’affiche de l’image correspondante à un « dots_commands ». Si j’ai bien compris cette fonction est gérée par les codes entre « #slideshow .c_slider {…} » et
« /* on cache le slider */
.sl_i:target ~ #slideshow .slider …
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before { left:54px; } »
mais j’arrive pas a le faire fonctionner.
1- je veux la pagination sans les flèches latérales.
2- lorsqu’on clic sur « dots_commands » activé par la lecture auto, le 1er « dots_commands » à l’extrême gauche qui reçoit le focus (changement) de la couleur. commant corriger ça ?
Hello,
Je te l’accorde, cette partie du code (comme les autres tu me diras), est un peu capillotractée.
Les flèches latérales et la pagination ne sont pas liées, si tu supprimes le code HTML concernant les flèches, tu ne devrais pas avoir de souci.
Il faut bien voir ce slideshow comme deux slideshow l’un dans l’autre.
Un qui gère la partie automatique, que l’on peut donc stopper ou remettre en route.
Un qui gère la partie manuelle et qui n’influe pas sur la version automatique.
En gros dès que tu touches à l’un des dots_commands tu mets de côté le slideshow automatique pour « démarrer » le slide manuel.
Hélas pas moyen de savoir, sans JS, où en est le slideshow automatique pour faire correspondre la bonne slide en mode manuel.
Tu me suis ?
Salut Geoffrey,
Tout d’abord un grand merci pour ce slideshow expérimental ! Je viens de l’adapter pour afficher 8 images. J’y connaissais pas grand chose en css (à part les principes basiques) et grace à ton tuto et mon envie de l’adapter à mes besoins, j’ai énormément appris. Tout fonctionne et c’est parfait ! Bon j’ai du user de ma calculette car pour garder la fluidité équivalente à 4 images, il a fallu gérer avec des valeurs(%) décimales et entre virgules et point, ont peut vite faire une erreur et ne pas trouver d’ou ca vient !
Concernant ce problème logique de pagination/lecture auto. Penses-tu qu’il soit possible de réinitialiser la lecture auto au slide 1 lorsque l’on clic sur play. Comme lorsque l’on charge notre page web et que la lecture auto débute.
Pour mieux comprendre :
chargement page accueil –> lancement du slide en lecture auto –> utilisation de la pagination (lecture auto stoppé, affichage des images en background) –> clic sur play –> redémarrage de la lecture auto au slide 1. J’avoue que le code complet reste encore un peu flou donc si tu avais une piste ca me dépannerait bien !
Merci
Salut m’sieur !
Merci pour ton commentaire qui fait vraiment plaisir à lire.
C’est sur cette logique de recherche personnelle (pour le lecteur) que je construis mes articles, alors quand le lecteur se prend au jeu, ça fait toujours plaisir.
Je t’avoue ne pas avoir réfléchi à la chose, mais il semble que
animation-play-staten’accepte que deux valeurs possibles :runningetpaused.http://dev.w3.org/csswg/css-animations/#animation-play-state-property
Donc je pense qu’il faut passer par JS pour faire un reset de l’animation. (JS peut se greffer aux animation CSS)
http://dev.w3.org/csswg/css-animations/#animationevent
Bon courage et excellente continuation à toi
PS : j’espère avoir répondu à ta question.
Excellent tuto.
Je ne parviens pas à le faire fonctionner sur IE par contre. Quel est le css pour IE pour le défilement automatique des photos?
Bonjour,
Sauf erreur de ma part, l’information est dans les commentaires, mais il ne faut pas chercher du code
Bonne soirée.
Bonjour.
J’arrive très bien à faire fonctionner ce slider mais il reste quand même un détail qui m’échappe : à quoi sert le text-indent: -9999px ?
Merci
Hello,
Un vieille article sur le sujet :
http://www.alsacreations.com/astuce/lire/11-comment-cacher-un-titre-derrire-un-logo-par-exemple.html
Merci.
Je n’avais jamais lu cette astuce. Intéressant, merci
Bonjour !
J’ai des petits problèmes à propos du slider…
1. La barre de timeline, à partir de la 4ième photo repart en arrière…
2. A partir de la 4ième photo, le slider revient au début et ne montre pas les 16 autres images. Même en modifiant ce code :
/*
le conteneur des slides
en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 1600%;
height: 375px;
}
Pourrait-tu m’éclairer s’il-te-plaît ?
Merci d’avance