CSS - Slideshow / commandes manuelles

Question

Dje22

18 Nov 2013 à 13:42

Bonjour,

j'ai déjà posté sur ce forum pour un problème d'animation d'un slideshow (Creatijuiz).
mon premier problème a été résolu (merci au forum) et la partie principale de mon code (défilement automatique) fonctionne parfaitement désormais.

Mais je retrouve avec un nouveau bugg sur la partie "manuelle" de ce code que j'ai adapté. Les contrôles ne fonctionnent pas (flèches gauche/droite et pagination=points bas de slide).

Malgré les exmplication du Creatijuiz, j'ai un peu de mal à comprendre le code.
Quelqu'un peut-il m'aider ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
<link href='http://fonts.googleapis.com/css?family=Englebert|Kavoon|Ribeye' rel='stylesheet' type='text/css'>       
<title>Sal y pimienta, la cuisinière</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="styles_test.css" />
</head>
 
 <body>

  <body>
	
	<span id="sl_play" class="sl_command">&nbsp;</span>
	<span id="sl_pause" class="sl_command">&nbsp;</span>
	<span id="sl_i1" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i2" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i3" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i4" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i5" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i6" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i7" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i8" class="sl_command sl_i">&nbsp;</span>
	
	<section id="slideshow">
	
		<a class="commands prev commands1" href="#sl_i8" title="Go to last slide">&lt;</a>
		<a class="commands next commands1" href="#sl_i2" title="Go to 2nd slide">&gt;</a>
		<a class="commands prev commands2" href="#sl_i1" title="Go to 1rst slide">&lt;</a>
		<a class="commands next commands2" href="#sl_i3" title="Go to 3rd slide">&gt;</a>
		<a class="commands prev commands3" href="#sl_i2" title="Go to 2nd slide">&lt;</a>
		<a class="commands next commands3" href="#sl_i4" title="Go to 4th slide">&gt;</a>
		<a class="commands prev commands4" href="#sl_i3" title="Go to 3rd slide">&lt;</a>
		<a class="commands next commands4" href="#sl_i5" title="Go to 5th slide">&gt;</a>
		<a class="commands prev commands5" href="#sl_i4" title="Go to 4th slide">&lt;</a>
		<a class="commands next commands5" href="#sl_i6" title="Go to 6th slide">&gt;</a>
		<a class="commands prev commands6" href="#sl_i5" title="Go to 5th slide">&lt;</a>
		<a class="commands next commands6" href="#sl_i7" title="Go to 7th slide">&gt;</a>
		<a class="commands prev commands7" href="#sl_i6" title="Go to 6th slide">&lt;</a>
		<a class="commands next commands7" href="#sl_i8" title="Go to 8th slide">&gt;</a>		
		<a class="commands prev commands8" href="#sl_i7" title="Go to 7th slide">&lt;</a>
		<a class="commands next commands8" href="#sl_i1" title="Go to 1rst slide">&gt;</a>
		<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>
		
		<div class="container">
			<div class="c_slider"></div>
			<div class="slider">
				<figure>
					<img src="img/image7.jpg" alt="" width="640" height="310" />
					<figcaption>Clou de giroffe</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image8.jpg" alt="" width="640" height="310" />
					<figcaption>Tortilla de patatas</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image9.jpg" alt="" width="640" height="310" />
					<figcaption>Explosion de saveurs...</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image10.jpg" alt="" width="640" height="310" />
					<figcaption>On fond tous pour le chocolat</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image11.jpg" alt="" width="640" height="310" />
					<figcaption>Thé à la menthe</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image12.jpg" alt="" width="640" height="310" />
					<figcaption>Empanadas</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image13.jpg" alt="" width="640" height="310" />
					<figcaption>Tapas de Barcelone</figcaption>
				</figure><!--
				--><figure>
					<img src="img/image14.jpg" alt="" width="640" height="310" />
					<figcaption>Sushi</figcaption>
				</figure>
			</div>
		</div>
		
		<span id="timeline"></span>
		
		<ul class="dots_commands"><!--
			--><li><a title="Show slide 1" href="#sl_i1">Slide 1</a></li><!--
			--><li><a title="Show slide 2" href="#sl_i2">Slide 2</a></li><!--
			--><li><a title="Show slide 3" href="#sl_i3">Slide 3</a></li><!--
			--><li><a title="Show slide 4" href="#sl_i4">Slide 4</a></li><!--
			--><li><a title="Show slide 5" href="#sl_i5">Slide 5</a></li><!--
			--><li><a title="Show slide 6" href="#sl_i6">Slide 6</a></li><!--
			--><li><a title="Show slide 7" href="#sl_i7">Slide 7</a></li><!--
			--><li><a title="Show slide 8" href="#sl_i8">Slide 8</a></li>
		</ul>
		
	</section>
 
   </body>
</html>

[code]
*/


body {
	width: 800px;
	margin: 0 auto;
	color:#777;
}
h1, h2 {
	text-align:center;
	margin-top:0;
}
h1 {
	padding: 1em 0;
	margin-left: 1.5em;
	font-size: 2.5em;
	font-family: 'Amaranth', Arial, Verdana, sans-serif;
}
h1 span {
	display:block;
	margin: 0.75em 0 0 -2em;
	line-height: 1em;
	font-size: 0.55em;
}
h1 .cursive {
	margin: 0 0 0 -3em;
	font-size: 1.1em;
	line-height:0.5em;
	color: #bd9b83;
}
figure { 
	display: inline-block; 
}
a {
	text-decoration: none;
	border-bottom: 1px solid #bc9d88;
	color: #8f6b51;
}
a:hover,
a:focus {
	border-bottom: 1px dashed #bc9d88;
}
.sread {
	position: absolute;
	left:-9999px;
}
.cursive {
	font-family: 'Mr Dafoe', cursive;
}
.center {
	text-align: center;
}

#slideshow {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* avanced box-shadow :  http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow  */
#slideshow:before,
#slideshow:after {
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	
	z-index: -10;
}
#slideshow:before {
	left:0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
}
#slideshow .commands {
	position: absolute;
	top: 45%;
	padding: 5px 13px;
	border-bottom:0;
	font-family: 'Amaranth', Arial, Verdana, sans-serif;
	font-size: 1.3em;
	color: #aaa;
	text-decoration:none;
	background-color: #eee;
	background-image: -webkit-linear-gradient(#fff,#ddd);
	background-image: -moz-linear-gradient(#fff,#ddd);
	background-image: -ms-linear-gradient(#fff,#ddd);
	background-image: -o-linear-gradient(#fff,#ddd);
	background-image: linear-gradient(#fff,#ddd);
	text-shadow: 0 0 1px #aaa;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .commands:after {
	position: absolute;
	bottom: 65px; left:-18px;
	content: attr(title);
	width: 50px;
	padding: 12px;
	background: #fff;
	font-family: Georgia, Times, serif;
	font-size: 14px;
	text-align:center;
	text-shadow: 0 0 0;
	opacity: 0;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	
	-webkit-transition: opacity 0.7s, bottom 0.7s;
	-moz-transition: opacity 0.7s, bottom 0.7s;
	transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:before {
	position: absolute;
	bottom: 55px; left: 13px;
	content: " ";
	width: 1px; height: 1px;
	border-top: 10px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	z-index:100;
	opacity: 0;
	
	-webkit-transition: opacity 0.7s, bottom 0.7s;
	-moz-transition: opacity 0.7s, bottom 0.7s;
	transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:hover:before {
	bottom: 35px;
	opacity: 1;
}
#slideshow .commands:hover:after {
	bottom: 45px;
	opacity: 1;
}
#slideshow .commands:focus { 
	outline: 0;
	-webkit-transform: translate(1px, 2px);
	-moz-transform: translate(1px, 2px);
	-ms-transform: translate(1px, 2px);
	-o-transform: translate(1px, 2px);
	transform: translate(1px, 2px);
}
#slideshow .commands:active {
	-webkit-transform: translate(0, 1px);
	-moz-transform: translate(0, 1px);
	-ms-transform: translate(0, 1px);
	-o-transform: translate(0, 1px);
	transform: translate(0, 1px);
}
#slideshow .prev {
	left: -48px;
}
#slideshow .next {
	right: -48px;
}
#slideshow .prev,
#slideshow .next {
	display:none;
}
#slideshow .prev,
#slideshow .next {
	display:none;
}
#slideshow .commands1 {
	display: block;
}

/* play/pause commands */
.play_commands {
	position: absolute;
	width: 22px; height: 22px;
	top: 25px; right: 25px;
	z-index: 10;
	text-indent: -9999px;
	border:0 none;
	opacity: 0;

	-webkit-transition: opacity 1s, right 1s;
	-moz-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}
.play { right: 55px; cursor: default; }

.pause:hover { border:0 none; }
.play_commands:focus { outline:0; }

#slideshow:hover .pause,
#sl_play:target ~ #slideshow:hover .pause,
.play_commands:focus {
	opacity: 1;
}
.sl_command:target ~ #slideshow:hover .pause,
#sl_pause:target ~ #slideshow:hover .pause {
	opacity: 0;
}
.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;
}
.play {
	width: 1px; 
	height: 1px; 
	border-top: 10px solid transparent; 
	border-left: 20px solid #fff; 
	border-left: 20px solid rgba(255,255,255,0.5); 
	border-bottom: 10px solid transparent;
	opacity: 0;
}
.play:hover,
.play:focus {
	border-bottom: 10px solid transparent;
}

#slideshow .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
/* timeline base */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 100%;
	height: 1px;
}

@-webkit-keyframes slider {
	0%, 10%, 100%	{ left: 0 }
	12.5%, 22.5%	{ left: -100% }
	25%, 35%		{ left: -200% }
	37.5%, 47.5%	{ left: -300% }
	50%, 60%		{ left: -400% }
	62.5%, 72.5%	{ left: -500% }
	75%, 85%		{ left: -600% }
	87.5%, 97.5%	{ left: -700% }
}
@-moz-keyframes slider {
	0%, 10%, 100%	{ left: 0 }
	12.5%, 22.5%	{ left: -100% }
	25%, 35%		{ left: -200% }
	37.5%, 47.5%	{ left: -300% }
	50%, 60%		{ left: -400% }
	62.5%, 72.5%	{ left: -500% }
	75%, 85%		{ left: -600% }
	87.5%, 97.5%	{ left: -700% }
}
@keyframes slider {
	0%, 10%, 100%	{ left: 0 }
	12.5%, 22.5%	{ left: -100% }
	25%, 35%		{ left: -200% }
	37.5%, 47.5%	{ left: -300% }
	50%, 60%		{ left: -400% }
	62.5%, 72.5%	{ left: -500% }
	75%, 85%		{ left: -600% }
	87.5%, 97.5%	{ left: -700% }
}

#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 800%;
	height: 310px;
	
	-webkit-animation: slider 64s infinite;
	-moz-animation: slider 64s infinite;
	animation: slider 64s infinite;
}
.sl_i:target ~ #slideshow .slider {
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	transition: left 1s;
}
.sl_command:target ~ #slideshow .slider {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}
#slideshow .c_slider {
	position: absolute;
	left:0; top:0;
	width: 800%;
	height: 310px;
	background: url(img/image7.jpg) 0 0 no-repeat, url(img/image8.jpg) 640px 0 no-repeat, url(img/image9.jpg) 1280px 0 no-repeat, url(img/image10.jpg) 1920px 0 no-repeat, url(img/image11.jpg) 2560px 0 no-repeat, url(img/image12.jpg) 3200px 0 no-repeat, url(img/image13.jpg) 3840px 0 no-repeat, url(img/image14.jpg) 4480 0 no-repeat;
}
.sl_i:target ~ #slideshow .c_slider {
	-webkit-transition: background 1s;
	-moz-transition: background 1s;
	transition: background 1s;
}

#slideshow figure {
	position:relative;
	padding:0; margin:0;
}

@-webkit-keyframes figurer {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47,5%, 52.5%, 60%, 65%, 72.5%, 77.5%, 85%, 90%, 97.5%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@-moz-keyframes figurer {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47,5%, 52.5%, 60%, 65%, 72.5%, 77.5%, 85%, 90%, 97.5%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@keyframes figurer {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47,5%, 52.5%, 60%, 65%, 72.5%, 77.5%, 85%, 90%, 97.5%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	
	-webkit-animation: figurer 64s infinite;
	-moz-animation: figurer 64s infinite;
	animation: figurer 64s infinite;
}

@-webkit-keyframes figcaptionner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%						{ bottom: -55px;	}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47.5%, 52.5%, 60%, 65%, 72.5%, 7.5%, 85%, 90%, 97.5%		{ bottom: 5px;	}
}
@-moz-keyframes figcaptionner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%						{ bottom: -55px;	}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47.5%, 52.5%, 60%, 65%, 72.5%, 7.5%, 85%, 90%, 97.5%		{ bottom: 5px;	}
}
@keyframes figcaptionner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%						{ bottom: -55px;	}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47.5%, 52.5%, 60%, 65%, 72.5%, 7.5%, 85%, 90%, 97.5%		{ bottom: 5px;	}
}

#slideshow figcaption {
	position:absolute;
	padding: 20px 20px; margin:0;
	left:0; right:0; bottom: 5px;
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #000;
	background: rgba(255,255,255,0.7);
	border-top: 1px solid rgb(225,225,225);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	
	-webkit-animation: figcaptionner 64s infinite;
	-moz-animation: figcaptionner 64s infinite;
	animation: figcaptionner 64s infinite;
}

@-webkit-keyframes timeliner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 0;		}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47.5%, 52.5%, 60%, 65%, 72.5%, 77.5%, 85%, 90%, 97.5%		{ width: 640px;	}
}
@-moz-keyframes timeliner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 0;		}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47.5%, 52.5%, 60%, 65%, 72.5%, 77.5%, 85%, 90%, 97.5%		{ width: 640px;	}
}
@keyframes timeliner {
		0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 0;		}
	2.5%, 10%, 15%, 22.5%, 27.5%, 35%, 37.5%, 47.5%, 52.5%, 60%, 65%, 72.5%, 77.5%, 85%, 90%, 97.5%		{ width: 640px;	}
}

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	
	-webkit-animation: timeliner 64s infinite;
	-moz-animation: timeliner 64s infinite;
	animation: timeliner 64s infinite;
}

/* dots styles */
.dots_commands  {
	position: relative;
	top: 32px;
	padding:0; margin:0;
	text-align:center;
}
.dots_commands li {
	display:inline;
	padding:0; margin:0;
	list-style:none;
}
.dots_commands a {
	position: relative;
	display:inline-block;
	height:8px; width: 8px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
	border-bottom:0;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	
	z-index:25;
}
.dots_commands li + li a {
	z-index:10;
}
@-moz-keyframes dotser {
	0%, 100% 			{ opacity: 1; left: 0; 	}
	
	10%			{ opacity: 1; left: 0;	}
	11%			{ opacity: 0; left: 0;	}
	11.5%			{ opacity: 0; left: 18px;	}
	12.5%			{ opacity: 1; left: 18px;	}
	
	22.5%			{ opacity: 1; left: 18px;	}
	23.5%			{ opacity: 0; left: 18px;	}
	24%			{ opacity: 0; left: 36px;	}
	25%			{ opacity: 1; left: 36px;	}
	
	35%			{ opacity: 1; left: 36px;	}
	36%			{ opacity: 0; left: 36px;	}
	36.5%			{ opacity: 0; left: 54px;	}
	37.5%			{ opacity: 1; left: 54px;	}

	47.5%			{ opacity: 1; left: 54px;	}
	48.5%			{ opacity: 0; left: 54px;	}
	49%			{ opacity: 0; left: 72px;	}
	50%			{ opacity: 1; left: 72px;	}

	60%			{ opacity: 1; left: 72px;	}
	61%			{ opacity: 0; left: 72px;	}
	61.5%			{ opacity: 0; left: 90px;	}
	62.5%			{ opacity: 1; left: 90px;	}

	72.5%			{ opacity: 1; left: 90px;	}
	73.5%			{ opacity: 0; left: 90px;	}
	74%			{ opacity: 0; left: 108px;}
	75%			{ opacity: 1; left: 108px;}

	85%			{ opacity: 1; left: 108px;}
	86%			{ opacity: 0; left: 108px;}
	86.5%			{ opacity: 0; left: 126px;}
	87.5%			{ opacity: 1; left: 126px;}

	97.5%			{ opacity: 1; left: 126px;}
	98.5%			{ opacity: 0; left: 126px;}
	99.5%			{ opacity: 0; left: 0;}

}
@-webkit-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 	}
	
	10%			{ opacity: 1; left: 0;	}
	11%			{ opacity: 0; left: 0;	}
	11.5%		{ opacity: 0; left: 18px;	}
	12.5%		{ opacity: 1; left: 18px;	}
	
	22.5%		{ opacity: 1; left: 18px;	}
	23.5%		{ opacity: 0; left: 18px;	}
	24%			{ opacity: 0; left: 36px;	}
	25%			{ opacity: 1; left: 36px;	}
	
	35%			{ opacity: 1; left: 36px;	}
	36%			{ opacity: 0; left: 36px;	}
	36.5%		{ opacity: 0; left: 54px;	}
	37.5%		{ opacity: 1; left: 54px;	}

	47.5%		{ opacity: 1; left: 54px;	}
	48.5%		{ opacity: 0; left: 54px;	}
	49%			{ opacity: 0; left: 72px;	}
	50%			{ opacity: 1; left: 72px;	}

	60%			{ opacity: 1; left: 72px;	}
	61%			{ opacity: 0; left: 72px;	}
	61.5%		{ opacity: 0; left: 90px;	}
	62.5%		{ opacity: 1; left: 90px;	}

	72.5%		{ opacity: 1; left: 90px;	}
	73.5%		{ opacity: 0; left: 90px;	}
	74%			{ opacity: 0; left: 108px;}
	75%			{ opacity: 1; left: 108px;}

	85%			{ opacity: 1; left: 108px;}
	86%			{ opacity: 0; left: 108px;}
	86.5%		{ opacity: 0; left: 126px;}
	87.5%		{ opacity: 1; left: 126px;}

	97.5%		{ opacity: 1; left: 126px;}
	98.5%		{ opacity: 0; left: 126px;}
	99.5%		{ opacity: 0; left: 0;}
}

@keyframes dotser {
	0%, 100% 		{ opacity: 1; left: 0; 	}
	
	10%			{ opacity: 1; left: 0;	}
	11%			{ opacity: 0; left: 0;	}
	11.5%		{ opacity: 0; left: 18px;	}
	12.5%		{ opacity: 1; left: 18px;	}
	
	22.5%		{ opacity: 1; left: 18px;	}
	23.5%		{ opacity: 0; left: 18px;	}
	24%			{ opacity: 0; left: 36px;	}
	25%			{ opacity: 1; left: 36px;	}
	
	35%			{ opacity: 1; left: 36px;	}
	36%			{ opacity: 0; left: 36px;	}
	36.5%		{ opacity: 0; left: 54px;	}
	37.5%		{ opacity: 1; left: 54px;	}

	47.5%		{ opacity: 1; left: 54px;	}
	48.5%		{ opacity: 0; left: 54px;	}
	49%			{ opacity: 0; left: 72px;	}
	50%			{ opacity: 1; left: 72px;	}

	60%			{ opacity: 1; left: 72px;	}
	61%			{ opacity: 0; left: 72px;	}
	61.5%		{ opacity: 0; left: 90px;	}
	62.5%		{ opacity: 1; left: 90px;	}

	72.5%		{ opacity: 1; left: 90px;	}
	73.5%		{ opacity: 0; left: 90px;	}
	74%			{ opacity: 0; left: 108px;}
	75%			{ opacity: 1; left: 108px;}

	85%			{ opacity: 1; left: 108px;}
	86%			{ opacity: 0; left: 108px;}
	86.5%		{ opacity: 0; left: 126px;}
	87.5%		{ opacity: 1; left: 126px;}

	97.5%		{ opacity: 1; left: 126px;}
	98.5%		{ opacity: 0; left: 126px;}
	99.5%		{ opacity: 0; left: 0;}
}

.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;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
.dots_commands li:first-child a:after {
	-webkit-animation: dotser 64s infinite; /* webkit can't animate pseudo-element =_= :L: */
	-moz-animation: dotser 64s infinite; /* thanks moz ! [lol] */
	animation: dotser 64s infinite;
}
.dots_commands li:first-child a:before {
	display:none;
}




/* need a stop ! */

/* actions when target ! */
.sl_command { display: none; }

.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figure:after,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}

#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figure:after,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running;
}

.sl_command:target ~ #slideshow .pause 	{ opacity:0; }
.sl_command:target ~ #slideshow .play 	{ opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .pause 	{ opacity:0; }
#sl_play:target ~ #slideshow .play 		{ opacity:0; right: 55px; cursor: default;}

.sl_i:target ~ #slideshow .slider									{ visibility: hidden }
.sl_i:target ~ #slideshow .slider figcaption						{ visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after		{ display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before	{ display:block; }}

#sl_i1:target ~ #slideshow .commands			{ display: none; }
#sl_i1:target ~ #slideshow .commands1			{ display: block; }
#sl_i1:target ~ #slideshow .c_slider				{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0; }
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before	{ left:0; }

#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, 1920px 0, 2560px 0, 3200px 0, 3840px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before	{ left:18px; }

#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, 1280px 0, 1920px 0, 2560px 0, 3200px 0;}
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before	{ left:36px; }

#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, 640px 0, 1280px 0, 1920px 0, 2560px 0;}
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before	{ left:54px; }

#sl_i5:target ~ #slideshow .commands			{ display: none; }
#sl_i5:target ~ #slideshow .commands5			{ display: block; }
#sl_i5:target ~ #slideshow .c_slider				{ background-position: -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0;}
#sl_i5:target ~ #slideshow .dots_commands li:first-child a:before	{ left:72px; }

#sl_i6:target ~ #slideshow .commands			{ display: none; }
#sl_i6:target ~ #slideshow .commands6			{ display: block; }
#sl_i6:target ~ #slideshow .c_slider				{ background-position: -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0;}
#sl_i6:target ~ #slideshow .dots_commands li:first-child a:before	{ left:90px; }

#sl_i7:target ~ #slideshow .commands			{ display: none; }
#sl_i7:target ~ #slideshow .commands7			{ display: block; }
#sl_i7:target ~ #slideshow .c_slider				{ background-position: -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i7:target ~ #slideshow .dots_commands li:first-child a:before	{ left:108px; }

#sl_i8:target ~ #slideshow .commands			{ display: none; }
#sl_i8:target ~ #slideshow .commands8			{ display: block; }
#sl_i8:target ~ #slideshow .c_slider				{ background-position: -4480 px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }
#sl_i8:target ~ #slideshow .dots_commands li:first-child a:before	{ left:126px; }

[/code]

artsx

18 Nov 2013 à 17:27

Salut, qu'est ce qui ne marche pas ?
J'ai repris ton code je l'ai mis ds un http://jsfiddle.net/xGrq2/
Les fleches gauches/droites fonctionne chez moi?! (firefox)

Dje22

18 Nov 2013 à 17:47

Bonjour,
merci de te pencher sur mon problème Smiley cligne

mais en fait, si tu essaie le code avec des images, tu verras qu'il ne se passe rien quand tu click sur les flèches et rien quand tu click sur les petits boutons en bas des slides pour revenir sur une image

j'espère que c'est plus clair comme çà ?

Dje22

26 Nov 2013 à 15:39

personne pour m'aider ?

Sujet clos

CSS et mise en forme, CSS3

CSS - Slideshow / commandes manuelles