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;
}


Voir la démo | Télécharger l'archive



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 :)