Bonjour
j'essaie d'adapter le code de l'excellent slideshow de Geoffrey (http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-
transition) mais malheureusement, n'étant pas développeur je galère un peu.
Le code original permettait de faire défiler 4 images et j'aimerais faire défiler entre 10 et 20 images en conservant le design de Geoffrey.
Je me suis plongé dans le code, lu pas mal de forum sur la fonction animation/keyframes mais mes images défilent 2 par 2.
J'ai bien d'autres buggs sur mon slideshow avant qu'il ne fonctionne comme celui de Geoffrey (les légende restent fixe, les boutons de navigation
manuelle ne fonctionne pas coreectement, tec...) mais je me suis dis que j'allais repartir de la base, à partir d'un code simple, pour comprendre plus
précisement le fonctionnement.
J'ai donc relu le premier tutoriel de Geoffrey permettant de faire défiler 3 images (sans bouton de navigation, tec...) que j'ai adapté pour 5 images et çà
fonctionne.
J'ai ensuite voulu, changer le format des images (150px x 150px --> 640px x 310px) et faire défiler 8 images et là j'ai encore le même problème qu'au
tout début, à savoir que mes images défilent 2 par 2.
Je ne vois pas d'où peut venir mon erreur.
D'avance merci pour vos réponses qui me permettront d'avancer
Code CSS :
j'essaie d'adapter le code de l'excellent slideshow de Geoffrey (http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-
transition) mais malheureusement, n'étant pas développeur je galère un peu.
Le code original permettait de faire défiler 4 images et j'aimerais faire défiler entre 10 et 20 images en conservant le design de Geoffrey.
Je me suis plongé dans le code, lu pas mal de forum sur la fonction animation/keyframes mais mes images défilent 2 par 2.
J'ai bien d'autres buggs sur mon slideshow avant qu'il ne fonctionne comme celui de Geoffrey (les légende restent fixe, les boutons de navigation
manuelle ne fonctionne pas coreectement, tec...) mais je me suis dis que j'allais repartir de la base, à partir d'un code simple, pour comprendre plus
précisement le fonctionnement.
J'ai donc relu le premier tutoriel de Geoffrey permettant de faire défiler 3 images (sans bouton de navigation, tec...) que j'ai adapté pour 5 images et çà
fonctionne.
J'ai ensuite voulu, changer le format des images (150px x 150px --> 640px x 310px) et faire défiler 8 images et là j'ai encore le même problème qu'au
tout début, à savoir que mes images défilent 2 par 2.
Je ne vois pas d'où peut venir mon erreur.
D'avance merci pour vos réponses qui me permettront d'avancer
Code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Slideshow automatique</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="Author" content="Geoffrey Crofte, CreativeJuiz" />
<meta http-equiv="Content-Language" content="fr" />
<link type="text/css" rel="stylesheet" href="test_2.css" />
</head>
<body>
<div id="slideshow">
<ul id="sContent">
<li><img src="img/image7.jpg" alt="" width="640" height="310" /></li><!---->/* j'impose la taille de mes images*/
<li><img src="img/image8.jpg" alt="" width="640" height="310" /></li><!--
--><li><img src="img/image9.jpg" alt="" width="640" height="310" /></li><!--
--><li><img src="img/image10.jpg" alt="" width="640" height="310" /></li><!--
--><li><img src="img/image11.jpg" alt="" width="640" height="310" /></li><!--
--><li><img src="img/image12.jpg" alt="" width="640" height="310" /></li><!--
--><li><img src="img/image13.jpg" alt="" width="640" height="310" /></li><!--
--><li><img src="img/image14.jpg" alt="" width="640" height="310" /></li>
</ul>
</div>
</body>
</html>
Code CSS :
@-webkit-keyframes AutoSlide {
0%, 10%, 100% { left: 0 }/* première image et dernière*/
12,5%, 22,5% { left: -640px } /*2ème image ; j'ai modifié le left avec des multiples de 640px qui est la largeur de mon image et ai divisé la valeur du
keyframes par 2 puisque je passe de 4 images à 8 images*/
25%, 35% { left: -1280px } /*3ème image*/
37,5%, 47,5% { left: -1920px } /*4ème image*/
50%, 60% { left: -2560px } /*5ème image*/
62,5%, 72,5% { left: -3200px } /*6ème image*/
75%, 85% { left: -3840px } /*7ème image*/
87,5%, 97,5% { left: -4480px } /*8ème image*/
}
@-moz-keyframes AutoSlide {
0%, 10%, 100% { left: 0 }/* première image et dernière*/
12,5%, 22,5% { left: -640px } /*2ème image*/
25%, 35% { left: -1280px } /*3ème image*/
37,5%, 47,5% { left: -1920px } /*4ème image*/
50%, 60% { left: -2560px } /*5ème image*/
62,5%, 72,5% { left: -3200px } /*6ème image*/
75%, 85% { left: -3840px } /*7ème image*/
87,5%, 97,5% { left: -4480px } /*8ème image*/
}
@keyframes AutoSlide {
0%, 10%, 100% { left: 0 }/* première image et dernière*/
12,5%, 22,5% { left: -640px } /*2ème image*/
25%, 35% { left: -1280px } /*3ème image*/
37,5%, 47,5% { left: -1920px } /*4ème image*/
50%, 60% { left: -2560px } /*5ème image*/
62,5%, 72,5% { left: -3200px } /*6ème image*/
75%, 85% { left: -3840px } /*7ème image*/
87,5%, 97,5% { left: -4480px } /*8ème image*/
}
#slideshow {
position: relative; /*le parent positionné*/
width: 640px; /*limite en largeur (1 élément du slideshow) ; j'ai modifié la largeur de 150px à 640px*/
height: 310px; /*limite en hauteur*/
margin: 20px auto;
overflow: hidden; /*on cache ce qui déborde*/
}
#sContent li {
display: inline; /*on aligne les éléments du slideshow*/
}
#sContent {
position: absolute; /*on sort l'élément du flux*/
top: 0; /*on le positionne précisément dans ...*/
left: 0; /*l'angle haut gauche de son parent positionné*/
width: 5120px; /*j'ai modifié la largeur totale de mon slideshow = 8 x 640 px*/
margin: 0;
padding: 0;
/*CSS3 webkit keyframes animation*/
-webkit-animation-name: AutoSlide;
-webkit-animation-duration: 25s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
/*CSS3 moz keyframes animation*/
-moz-animation-name: AutoSlide;
-moz-animation-duration: 25s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
/*CSS3 W3C keyframes animation*/
animation-name: AutoSlide;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
