Slider en pure CSS3
Révision infoking1 du 05/03/2012
Introduction
Ce slider embarque uniquement du CSS et du HTML. Cela est possible grâce aux animations CSS et à la pseudo-class :target . Je pense que ce Silder est facilement intégrable sur un site voir même un Blog avec un minimum de connaissance. Retrouvez cet article chez : Dji{} .
La partie HTML
Pour permettre le slide entre les images (ou les pages si on veut), on utilise bien la transition en CSS3 mais également la pseudo-class :target pour demander à notre ID de faire la transition.
Code TPL :
<html> <head> ... </head> <body> <div class="wrapper"> <h1>Slider en pure CSS3</h1> <div id="article1"> <div id="article2"> <div id="article3"> <div id="article4"> <div class="sliderContainer"> <div class="content"> <div class="item"><img src="http://localhost/monsite/application/images/slideshow/1.jpg" alt="1"/> </div> <div class="item"><img src="http://localhost/monsite/application/images/slideshow/2.jpg" alt="2"/> </div> <div class="item"><img src="http://localhost/monsite/application/images/slideshow/3.jpg" alt="3"/> </div> <div class="item"><img src="http://localhost/monsite/application/images/slideshow/4.jpg" alt="4"/> </div> </div> </div> <a href="/wiki/#article4">4</a> </div> <a href="/wiki/#article3">3</a> </div> <a href="/wiki/#article2">2</a> </div> <a href="/wiki/#article1">1</a> </div> </div> <script></script><script></script></body> </html>
Les "a" sont à l’intérieur de chaque "div" afin de permettre de donner un état au "a" quand il est la page courante.
<span class="note">Swan :En langage simplifié, il y aura autant de div qu'il y aura d'images à mettre !</span>
La partie CSS :
Code CSS :
body{ background:#111; color:#fff; font-family:Arial, verdana; font-size:14px; } .wrapper{ margin:20px auto; width:350px; text-align:center; } .content{ position:absolute; background:#fff; top:0px; left:-10px; height:200px; width:1200px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; clear:both; } .item{ float:left; width:300px; height:200px; position:relative; } #article1, #article2, #article3, #article4{ overflow:hidden; background:transparent; width:300px; height:250px; margin:0 auto; position:relative; } #article1:target .content{ left:-10px; } .sliderContainer{ position:relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border:10px solid #fff; height:190px; width:280px; overflow:hidden; } #article2:target .content, #article3:target .content, #article4:target .content{ -webkit-transform: translate(-300px, 0px); -moz-transform: translate(-300px, 0px); -o-transform: translate(-300px, 0px); -ms-transform: translate(-300px, 0px); transform: translate(-300px, 0px); } #article3:target .content{ -webkit-transform: translate(-600px, 0px); -moz-transform: translate(-600px, 0px); -o-transform: translate(-600px, 0px); -ms-transform: translate(-600px, 0px); transform: translate(-600px, 0px); } #article4:target .content{ -webkit-transform: translate(-900px, 0px); -moz-transform: translate(-900px, 0px); -o-transform: translate(-900px, 0px); -ms-transform: translate(-900px, 0px); transform: translate(-900px, 0px); } a{ margin: auto 10px; color:#fff; text-decoration: none; text-indent:-5000px; background:#fff; width:38px; height:18px; padding:8px; padding-top:0px; -moz-border-radius: 50%; -webkit-border-radius: 390px; border-radius: 390px; } #article4 a,#article3 a, #article2 a, #article1 a{ width:22px; height:15px; padding:8px 0; padding-top:0px; -moz-border-radius: 50%; -webkit-border-radius: 390px; border-radius: 390px; position:absolute; bottom:10px; left:55px; } #article2 a{ position:absolute; bottom:10px; left:105px; } #article3 a{ position:absolute; bottom:10px; left:155px; } #article4 a{ position:absolute; bottom:10px; left:205px; } #article1:target> a, #article2:target> a, #article3:target> a, #article4:target> a{ background:#999; color:#999; } a:hover{ background:#0077ff; color:#0077ff; } .item img{ margin:auto; margin-top:22px; width:200px; height:150px; }
Bon .. normalement vous ne devriez pas avoir trop de soucis pour comprendre son fonctionnement. Mais si vous avez des questions, n'hésitez pas à les poser sur le forum