Pseudo-class :target (suite), faisons un carrousel seulement en CSS

Carrousel

Continuons notre petit tour d’horizon des possibilités de la pseudo-class :target avec un carrousel d’images ou de contenus.

Vous connaissez le principe du carrousel, Une série de contenus que dont on affiche un nombre limités d’éléments et qu’on fait défiler. ça se fait en 2 temps trois mouvement avec des effets de la mort en veux-tu en voilà… Mais en CSS, qu’en pensez-vous ? Vous n’utiliserez surement pas cette technique, mais c’est toujours bon de la connaitre.

Voici la solution que je vous propose :
La démonstration
Le Pack à télécharger

La technique que nous allons utiliser est une imbrication de div qui vont nous permettre de masquer les éléments au fur et à mesure. Nous attribuerons des id à chacune des div afin que à chaque fois que nous cliquerons sur un lien nous pourrons facilement désigner une ‘ancre’ avec :target dont nous cilqueront des éléments en particulier.
Pour résumer, Nous allons créer une div pour chaque évènement que nous voulons effectuer (avancer et reculer dans le carrousel).

Ce qu’il faut garder en tête, c’est qu’on ne peut cibler qu’un seul élément puisqu’il s’agit d’un élément avec un id, et vous le savez on ne met qu’un id par élément et on ne les répète pas ! Par conséquent on désigne plusieurs éléments en ciblant le conteneur.

La contrainte étant que plus avez d’éléments dans votre carrousel et plus vous aurez de niveaux à intégrer, ici nous allons faire un exemple avec 4 bloc de texte, dont voici la structure HTML (contrairement à mon highlighter, indentez bien votre code pour vous y retrouver dans cette pyramide) :

Hello Salut Comment va ? Bien, merci !

Si comme dans notre exemple vous voulez faire avancer le carrousel d’un élément à la fois, nous aurons autant de liens que d’éléments. Pour 4 éléments : 4 liens avancer et 4 liens reculer. En comptant bien le lien nul pour le début et la fin, sauf si vous voulez faire une boucle.

Voici le CSS qui nous sert en bonne partie pour habiller le site, la partie intéressante étant celle qui énumère les listes d’action :target.

body { margin:0; }
#container {
	width:700px;
	margin:50px auto;
}
a {
	text-decoration:none;
	font-weight:bold;
	color:#47817f;
	float:left;
	line-height:300px;
	text-align:center;
}
a:hover {
	color:#fff;
	background:#aaa;
}
#bloc {
	width:680px;
	padding:10px;
	background:#eee;
	border-bottom:3px solid #aaa;
	float:left;
}
#link_prev, #link_next,
#link_prev a, #link_next a,
#link_prev span, #link_next span {
	width:20px;
	float:left;
	height:300px;
}
#link_prev, #link_next { overflow:hidden; }
#link_prev a, #link_next a,
#link_prev span, #link_next span {
	text-align:center;
}/*La partie intéressante débute ici...*/
#bloc_open_2:target .a1,
#bloc_open_3:target .a2, #bloc_open_3:target .a1,
#bloc_open_4:target .a3, #bloc_open_4:target .a2, #bloc_open_4:target .a1,
#bloc_close_4:target .a2, #bloc_close_4:target .a1,
#bloc_close_3:target .a1 {
	display:none;
}
#bloc_close_4:target .a3,
#bloc_close_3:target .a2, #bloc_close_3:target .a3,
#bloc_close_2:target .a1 {
	display:block;
}/*Jusqu'ici.*/
#img .a4 { background:#f00; }
#img .a3 { background:#0ff; }
#img .a2 { background:#f0f; }
#img .a1 { background:#ff0; }
#img {
	width:640px;
	height:300px;
	overflow:hidden;
	float:left;
}
#img span {
	text-align:center;
	line-height:300px;
	float:left;
	width:310px;
	height:300px;
	margin:0 5px;
}

Et voilà cette technique est relativement simple même si peu pratique, mais je la trouve intéressante.

Si vous avez d’autres idées pour construire un carrousel ou utiliser la pseudo-class :target, n’hésitez pas à nous les faire partager !

A bientôt.

Les commentaires sont fermés.