Ce que nous allons réaliser
Preparation
Pour cette application vous devez disposer d'images ayant toutes les memes dimensions et de votre éditeur de code favori, rien de plus.
Il vous suffira ensuite de retravailler le code fourni ci-dessous afin d'y spécifier les largeurs et hauteurs de vos images, la taille de la partie visible lors du visuel général et de son utilisation par le visiteur de votre site ou encore le temps d'animation lors de la transition entre deux images.
A noter qu'Internet Explorer nous fais (encore ...) une fois defaut à l'utilisation totale de cette application puisqu'il ne prend pas en charge la propriété CSS3 "transition". On s'y habitue ... (ou pas ...).
Le code
<!-- Le CSS à intégrer dans le HEAD de votre page HTML -->
<head>
<style type="text/css">
.accordian { /*conteneur du Slider*/
width: 840px; /*largeur du conteneur de l'animation*/
height: 320px; /*hauteur du conteneur de l'animation*/
overflow: hidden;
}
.accordian ul {
width: 1000px;
}
.accordian li {
position: relative;
display: block;
width: 160px; /*largeur de l'image visible hors utilisation du slider par le visiteur de votre site*/
float: left;
border-left: 1px solid #888;
transition: all 0.5s; /*temps de transition entre deux images*/
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian ul:hover li {width: 40px;} /*largeur des images restantes lors de l'utilisation*/
.accordian ul li:hover {width: 640px;} /*largeur visible lors du survol d'une image par la souris*/
.accordian li img {
display: block;
}
.image_title {
background: rgba(0, 0, 0, 0.5); /*couleur et opacite du fond des titres d'images*/
position: absolute;
left: 0;
bottom: 0;
width: 640px; /*largeur du fond des titres images*/
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<!-- Le code HTML à intégrer dans le BODY de votre page -->
<div><div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="url du lien auquel renvoi le titre de votre image">le titre de votre image</a>
</div>
<a href="url du lien auquel renvoi votre image">
<img src="url de votre premiere image"/>
</a>
</li>
<li>
<div class="image_title">
<a href="url du lien auquel renvoi le titre de votre image">le titre de votre image</a>
</div>
<a href="url du lien auquel renvoi votre image">
<img src="url de votre seconde image"/>
</a>
</li>
<li>
<div class="image_title">
<a href="url du lien auquel renvoi le titre de votre image">le titre de votre image</a>
</div>
<a href="url du lien auquel renvoi votre image">
<img src="url de votre troisieme image"/>
</a>
</li>
<li>
<div class="image_title">
<a href="url du lien auquel renvoi le titre de votre image">le titre de votre image</a>
</div>
<a href="url du lien auquel renvoi votre image">
<img src="url de votre quatrieme image"/>
</a>
</li>
<li>
<div class="image_title">
<a href="url du lien auquel renvoi le titre de votre image">le titre de votre image</a>
</div>
<a href="url du lien auquel renvoi votre image">
<img src="url de votre cinquieme image"/>
</a>
</li>
</ul>
</div></div>
...
Si vous souhaitez ajouter ou retirer une image, il vous suffit d'inclure ou enlever le bout de code suivant :
<div class="image_title">
<a href="url du lien auquel renvoi le titre de votre image">le titre de votre image</a>
</div>
<a href="url du lien auquel renvoi votre image">
<img src="url de votre image"/>
</a>
</li>
Pour finir
Personnalisez le code CSS3 selon votre bon vouloir afin d'obtenir un résultat en accord avec votre chartre graphique.
N'oubliez pas, si besoin, de definir les caractéristiques du texte dans la class ".image_title a".
Bonne utilisation !