Salut!
Voilà le code à mettre sur une page HTML (utilise toujours le triple engrenage pour créer/modifier la page) :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Onyx" />
<title>Slideshow</title>
<style type="text/css">
/*Corps*/
body {
margin: 0px;
}
/* Bloc du Slideshow */
#slideshow {
position: relative;
width: 222px;
height: 79px;
padding: 0px;
margin: 0px auto;
border: 1px solid #3e4654;
}
/* Cache ce qui dépasse */
#slideshow .container {
position:relative;
width: 222px;
height: 79px;
overflow: hidden;
}
/* Slideshow controllable */
#slideshow .c_slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 79px;
-webkit-transition: 1s;
transition: 1s;
}
/* Slideshow automatique */
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 79px;
-webkit-animation: slider 32s infinite;
-moz-animation: slider 32s infinite;
animation: slider 32s infinite;
}
/* Annule les marges sous les figures */
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}
/* Hauteur et largeur des images */
#slideshow figure img {
width: 222px;
height: 79px;
}
/* Animation des slides */
@-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%;}
}
/* Stopper les animations quand on utilise les pastilles */
.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
animation-play-state: paused;
}
/* Faire fonctionner la partie controllable du slideshow */
/* On cache le slider automatique */
.sl_i:target ~ #slideshow .slider {
visibility: hidden;
}
/* On planque la 1ère pastille */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after {
display: none;
}
/* On affiche la 2ème pastille */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before {
display: block;
}
/* On bouge les images */
#sl_i1:target ~ #slideshow .c_slider {
left: 0;
}
/* On place la pastille tout à gauche */
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before {
left: 0;
}
/* Pareil pour 2e pastille */
#sl_i2:target ~ #slideshow .c_slider {
left: -222px;
}
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before {
left: 18px;
}
/* Pareil pour 3e pastille */
#sl_i3:target ~ #slideshow .c_slider {
left: -444px;
}
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before {
left: 36px;
}
/* Pareil pour 4e pastille */
#sl_i4:target ~ #slideshow .c_slider {
left: -666px;
}
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before {
left: 54px;
}
/* Les pastilles en bas */
.dots_commands {
padding:0;
margin: 5px 0 0 0;
text-align: center;
}
.dots_commands li {
display: inline;
padding:0; margin:0;
}
/* Pastille normale */
.dots_commands a {
position: relative;
display: inline-block;
height:8px;
width: 8px;
margin: 0 5px;
text-indent: -9999px;
background: #b8bec9;
border-radius: 50%;
}
/* quelques styles au focus */
.dots_commands a:focus {
outline: none;
background: #000000;
}
.dots_commands li:first-child a {
z-index: 25;
}
/* Pastille qui est active */
.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: #273040;
z-index:20;
border-radius: 50%;
}
/* Faire bouger les pastilles */
/* on anime "after" */
.dots_commands li:first-child a:after {
-webkit-animation: dotser 32s infinite;
-moz-animation: dotser 32s infinite;
animation: dotser 32s infinite;
}
/* on cache "before", on l'utilise uniquement au clic */
.dots_commands li:first-child a:before {
display:none;
}
/* c'est parti pour l'animation des Pastilles */
@-webkit-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;}
}
@-moz-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;}
}
@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;}
}
</style>
</head>
<body>
<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>
<section id="slideshow">
<div class="container">
<!-- Slider controllable -->
<div class="c_slider"><!--
1ERE IMAGE ET 1ER LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
</a></figure><!--
2E IMAGE ET 2E LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
</a></figure><!--
3E IMAGE ET 3E LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
</a></figure><!--
4E IMAGE ET 4E LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
</a></figure>
</div>
<!-- Slider automatique -->
<div class="slider"><!--
1ERE IMAGE ET 1ER LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.pharmacie-bouvier.fr/sites/default/files/pharmacie-bouvier.gif" alt="Image 1" />
</a></figure><!--
2E IMAGE ET 2E LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-Layaway.jpg" alt="Image 2" />
</a></figure><!--
3E IMAGE ET 3E LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.corocarillon.com/images/Top06.gif" alt="Image 3" />
</a></figure><!--
4E IMAGE ET 4E LIEN --><figure>
<a href="#" target="_blank">
<img src="http://www.uniquecelticweddingrings.com/files/1763137/uploaded/0827-questions.jpg" alt="Image 4" />
</a></figure>
</div>
</div>
<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>
</section>
</body>
</html>
Les images et liens sont à mettre tout en bas. Tu verras que tu dois les mettre 2 fois, une fois pour la partie automatisée et l'autre fois pour la partie controllable.
Ensuite, tu mets l'iframe avec le lien de la page html où tu veux sur ton forum :
- Code:
<iframe src="URL PAGE HTML" style="display: block; margin: auto; border: none; width: 224px; height: 104px;"></iframe>
voilà l'exemple venant du template que j'ai graph sur toshop.
