Merci pour votre aide, c'est vraiment très gentil.
J'ai déjà tenté avec le fichier zip de faire ce slideshow mais il ne fonctionne pas sur eBay. C'est pour cela que je voudrais tenter de faire quelque chose de simple avec le tuto d'Alsacréations.
J'ai dèja mis le code du slideshow à défilage automatique (premier lien), il faudrait juste combiner ce code avec le système avant arrière de ce tuto :
http://www.alsacreations.com/tuto/lire/1058-ID-slideshow-css3-target-animation.html
J'ai tenté cela mais les boutons ne fonctionnent pas :
<style type="text/css">
@-webkit-keyframes AutoSlide {
0%, 15%, 100% {
left: 0px; /* première image et dernière*/
}
35%, 50% {
left: -150px; /*2ème image*/
}
70%, 85% {
left: -300px; /*3ème image*/
}
}
@-moz-keyframes AutoSlide {
0%, 15%, 100% {
left: 0px; /* première image et dernière*/
}
35%, 50% {
left: -150px; /*2ème image*/
}
70%, 85% {
left: -300px; /*3ème image*/
}
}
@keyframes AutoSlide {
0%, 15%, 100% {
left: 0px; /* première image et dernière*/
}
35%, 50% {
left: -150px; /*2ème image*/
}
70%, 85% {
left: -300px; /*3ème image*/
}
}
#slideshow {
position: relative; /*le parent positionné*/
width: 150px; /*limite en largeur (1 élément du slideshow)*/
height: 150px; /*limite en hauteur*/
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: 450px;
margin: 0;
padding: 0;
/* CSS3 Transition */
transition: left 1s;
/*CSS3 webkit keyframes animation*/
-webkit-animation-name: AutoSlide;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
/*CSS3 moz keyframes animation*/
-moz-animation-name: AutoSlide;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
/*CSS3 W3C keyframes animation*/
animation-name: AutoSlide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
}
#slideshow:target #sContent {
/* en ciblant #slideshow on décale #sContent */
left: -150px; /* ou - 100% */
}
</style>
<div id="slideshow">
<ul id="sContent"><!--
--><li><img src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/bleu.png" alt="Image bleue" /></li><!--
--><li><img src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/vert.png" /></li><!--
--><li><img src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/brun.png" /></li>
</ul>
</div>
<a href="#sContent">Prev</a> - <a href="#slideshow">Next</a>
Merci beaucoup pour votre aide
