Réalisation d’un slideshow en CSS

Comment réaliser un petit diaporama très simple pour votre site web ou pour une application plus personnel en utilisant que le CSS.

Voici un petit article pour pouvoir réaliser un petit diaporama à base d’HTML et de CSS. Ce diaporama est au clic. Il permet d’obtenir un diaporama sans javascript qui ne pourra pas être désactiver par le navigateur.

Code HTML

Dans un fichier html, saisir le code nécessaire pour l’affichage :

<html>
        <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="1.jpg" alt="1"/>
                                        </div>
                                        <div class="item"><img src="2.jpg" alt="2"/>
                                        </div>
                                        <div class="item"><img src="3.jpg" alt="3"/>
                                        </div>
                                        <div class="item"><img src="4.jpg" alt="4"/>
                                        </div>
                                    </div>
                                </div>
                                <a href="#article4">4</a>
                            </div>
                            <a href="#article3">3</a>
                        </div>
                        <a href="#article2">2</a>
                    </div>
                    <a href="#article1">1</a>
                </div>
            </div>
        </body>
    </html>

Rien de particulier, pensez simplement à télécharger 4 images, les renommer et les placer à la racine de votre site.

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

Il n’y a pas de difficulté, il faut simplement que selon le navigateur utilisé, les outils sont différents :

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

D’où les différentes lignes qui peuvent paraître similaires mais permettent une compatibilité avec les différents navigateurs.

Vous pouvez voir l’exemple sur cette page : tuto.

Il s’agit d’un diaporama simple sans défilement automatique, le script provient du site debray-jerome.fr.

Laisser un commentaire