Carousels - Slideshow Accordeon en CSS

→ Un Slideshow d'images en "accordéon" uniquement en CSS (intégré ou dans un Iframe).

La proposition ci-dessous est de Rey Wang, on peut la trouver sur ce site.

info licence : https://tympanus.net/codrops/licensing/

Les images présentées dans les deux exemples sont libres de droits et issues de ce site : https://unsplash.com/

Le premier exemple reprend assez fidèlement la proposition, mais il n'est qu'imparfaitement "responsive design". Il faut adapter, dans le style, les valeurs à plusieurs tailles d'écran.

Le second est parfaitement "responsive design"... mais il est écrit dans un fichier .html appelé dans un Iframe responsive (voir donc impérativement cette page au préalable). Les réglages sont à peu près les mêmes, mais il faut les effectuer dans le fichier .html (avec notepad++ par exemple) et il utilise une unité proportionnelle vw à la largeur de l'affichage de la page.

Toutes les images de ce tutoriel ont comme dimensions : 335*480 pixels. Elles sont placées dans un dossier ImagesAccordion mis dans le dossier images à la racine de adHoc (mais vous pouvez adapter tous ces chemins). Le premier exemple contient 7 images et le second contient 8 images. Toutes les images, ainsi que les fichiers nécessaires à l'intégration dans un Iframe responsive sont dans un zip disponible au téléchargement ici : ImagesAccordion.zip pour tester ce slideshow.

Premier exemple : dans le code source

Cet exemple, dont le code est détaillé et commenté le plus possible, a une partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte encadrée de ces balises, ou bien tel quel, dans un fichier spécifique comme c'est le cas ici (nommé CSS_slideshow_accordeon.css) dont l'appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/CSS_slideshow_accordeon.css" rel="stylesheet" />    

/* Slideshow Accordion : Rey Wang https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/ */
/* Quelques modifications : JeanDenis https://www.71site.fr https://adhoc.71site.fr */

figure { /*!!IMPORTANT NE PAS MODIFIER!!*/
	margin: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
}

.ia-container { /*attributs du conteneur 705px en tout, ici : 695px + 5px + 5px */
	width: 695px; /*largeur, ici : 335px + 6x60px */
	margin: 20px auto; /*marges extérieures*/
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.08); /*ombre portée*/
	border: 5px solid rgba(194,102,46,0.9); /*largeur nature et couleur bordure*/
}

.ia-container figure {
	position: absolute;
	top: 0;
	left: 60px; /* = largeur parties visibles*/
	width: 335px; /* = largeur image*/
	box-shadow: 0 0 0 1px rgba(255,255,255,0.6); /*ombre portée*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; /*temps et nature transition*/
}

.ia-container > figure {
	position: relative;
	left: 0 !important;
}

.ia-container img {
	display: block;
	width: 100% !important;
	max-width:100% !important;
	margin:0 !important;
}

.ia-container input {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px; /* = largeur parties visibles*/
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
	opacity: 0;
	z-index: 100;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.ia-container input:checked{
	width: 5px;
	left: auto;
	right: 0px;
}
.ia-container input:checked ~ figure {
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out; /*temps et nature transition*/
	left: 335px; /* = largeur image*/
}

.ia-container figcaption { /*attributs figcaption*/
	width: 100%;
	height: 100%;
	background: rgba(87, 73, 81, 0.3); /*couleur fond bandes images*/
	position: absolute;
	top: 0px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear; /*temps et nature transition*/
}

.ia-container figcaption span { /*attributs du texte span*/
	position: absolute;
	top: 40%; /*position de départ*/
	margin-top: -30px; /*marge extérieure haute*/
	right: 20px; /*positions*/
	left: 20px;
	overflow: hidden;
	text-align: center; /*texte centré*/
	background: rgba(87, 73, 81, 0.5); /*couleur fond*/
	font-size: 20px; /*taille police*/
	opacity: 0;
	text-transform: uppercase; /*tout en majuscule*/
	letter-spacing: 4px; /*écartement lettres*/
	font-weight: 700; /*gras de la police*/
	padding: 20px; /*marges intérieure*/
	color: #fff; /*couleur police*/
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /*ombre portée*/
}

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
	background: rgba(87, 73, 81, 0.0); /*couleur fond de l'image affichée, ici : transparent*/
}

.ia-container input:checked + figcaption span {
	-webkit-transition: all 0.4s ease-in-out 0.5s;
	-moz-transition: all 0.4s ease-in-out 0.5s;
	transition: all 0.4s ease-in-out 0.5s; /*temps et nature transition*/
	opacity: 1;	
	top: 50%; /*position texte affiché*/
}

.ia-container #ia-selector-last:checked + figcaption span {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	transition-delay: 0.3s; /*délai transition*/
}

.ia-container input:hover + figcaption {
	background: rgba(87, 73, 81, 0.1); /*couleur fond bandes images au survol*/
}

.ia-container input:checked ~ figure input{
	z-index: 1;
}

@media screen and (max-width: 900px), screen and (max-device-width: 900px) { /* inférieur à 900px de largeur (MOBILE) */
.ia-container {
	width: 600px; /*largeur, ici : 300px + 6x50px */
}
.ia-container figure {
	left: 50px; /* = largeur parties visibles*/
	width: 300px; /* = largeur image*/
}
.ia-container input {
	width: 50px; /* = largeur parties visibles*/
}
.ia-container input:checked ~ figure {
	left: 300px; /* = largeur image*/
}
.ia-container figcaption span {
	font-size: 16px; /*taille police*/
}
} /*fin adaptations pour taille max 900px*/

@media screen and (max-width: 720px), screen and (max-device-width: 720px) { /* inférieur à 720px de largeur (MOBILE) */
.ia-container {
	width: 450px; /*largeur, ici : 240px + 6x35px */
}
.ia-container figure {
	left: 35px; /* = largeur parties visibles*/
	width: 240px; /* = largeur image*/
}
.ia-container input {
	width: 35px; /* = largeur parties visibles*/
}
.ia-container input:checked ~ figure {
	left: 240px; /* = largeur image*/
}
.ia-container figcaption span {
	font-size: 14px; /*taille police*/
}
} /*fin adaptations pour taille max 720px*/

@media screen and (max-width: 480px), screen and (max-device-width: 480px) { /* inférieur à 480px de largeur (MOBILE) */
.ia-container {
	width: 330px; /*largeur, ici : 180px + 6x25px */
}
.ia-container figure {
	left: 25px; /* = largeur parties visibles*/
	width: 180px; /* = largeur image*/
}
.ia-container input {
	width: 25px; /* = largeur parties visibles*/
}
.ia-container input:checked ~ figure {
	left: 180px; /* = largeur image*/
}
.ia-container figcaption span {
	font-size: 12px; /*taille police*/
	letter-spacing: 2px; /*écartement lettres*/
	padding: 10px; /*marges intérieure*/
	margin-top: -20px; /*marge extérieure haute*/
}
} /*fin adaptations pour taille max 480px*/

La largeur du conteneur avec N images est obtenue en additionnant la largeur d'une image et (N-1) fois la largeur d'une bande, ici 335px + (6 x 60px) pour 7 images dans son affichage le plus large.

Il y a des adaptations à prévoir pour des écrans de largeurs différentes avec les règles @media screen qui vous permettent d'ajuster le slideshow. Voir les dimensions dans le style pour max-width: 900px , max-width: 720px et max-width: 480px. Dans ces cas là, les largeurs d'images et de bandes sont modifiées, la taille de la police également, entre autres.

Ensuite, le code du procédé est à placer, dans le code source de la page ou de la boîte, à l'endroit où vous souhaitez voir s'afficher ce slideshow.


<div class="ia-container">
<figure><img alt="image01" src="images/ImagesAccordion/1.jpg" /> <input checked="checked" name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Abigail Lynn</span></a></figcaption>

<figure><img alt="image02" src="images/ImagesAccordion/2.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Brian Kraus</span></a></figcaption>

<figure><img alt="image03" src="images/ImagesAccordion/3.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Hassan Bashiri</span></a></figcaption>

<figure><img alt="image04" src="images/ImagesAccordion/4.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Jayden Chong</span></a></figcaption>

<figure><img alt="image05" src="images/ImagesAccordion/5.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Mark Alexandrovich</span></a></figcaption>

<figure><img alt="image06" src="images/ImagesAccordion/6.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Pierre Chatel</span></a></figcaption>

<figure><img alt="image07" src="images/ImagesAccordion/7.jpg" /> <input id="ia-selector-last" name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Simone Hutsch</span></a></figcaption>

</figure><!-- fin image07 -->
</figure><!-- fin image06 -->
</figure><!-- fin image05 -->
</figure><!-- fin image04 -->
</figure><!-- fin image03 -->
</figure><!-- fin image02 -->
</figure><!-- fin image01 -->
</div><!-- ia-container -->

Notez bien l'imbrication des balises [figure]...[/figure].

Et, dans les balises [input... /] :

  • checked="checked" pour l'image que l'on veut voir déployée à l'affichage,

  • id="ia-selector-last" pour la dernière image du slideshow.

Second exemple : dans un Iframe

Cette seconde solution a très nettement ma préférence : elle est totalement responsive. Le style n'a pas a être modifié suivant les tailles d'écran.... bien sûr, il faut définir une image transparente qui contiendra le fichier .html : ici c'est un fichier ratio690x520.gif (d'un poids numérique négligeable : moins de 1ko) qui a été créé et placé dans le dossier images d'adHoc.

Le fichier Images-Accordion.html est placé dans le dossier images à la racine de adHoc, l'appel aux images est rédigé en conséquence et il faut l'adapter à votre configuration. Sinon, vous retrouverez exactement les mêmes réglages que pour le premier exemple. Mais il n'y a plus de réglage pour des largeurs d'écran différentes puisque l'affichage est proportionnel.

Et comme dans le premier exemple : La largeur du conteneur avec N images est obtenue en additionnant la largeur d'une image et (N-1) fois la largeur d'une bande, et donc ici 50vw + (7 x 7vw) pour 8 images.

Ci-dessous le code de l'Iframe responsive qui appelle le fichier Images-Accordion.html.


<div style="margin: auto; width:90%; text-align:center;">
<div class="iframe-responsive-wrapper">
<img class="iframe-ratio" src="images/ratio690x520.gif" />
<iframe marginheight="0" marginwidth="0" scrolling="no" src="images/Images-Accordion.html" width="345" height="260" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin style Iframe responsive -->

Ci-dessous le code du fichier Images-Accordion.html.

Utilisez sans modération le fichier .html du zip en téléchargement : ImagesAccordion.zip. Veuillez, s'il vous plaît laisser les références d'origine du procédé et de mon site dans l'en-tête, merci.

Me contacter sur le forum pour toute aide ou information supplémentaire.




Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels