Carousel
Remplace les anciens sliders.
Il n'y a pas d'autoplay (car pas accessibility-friendly).
L'affichage par défaut des images est au format d'environ 21/9 pour garantir par défaut des images pas trop hautes dans la page.
Il faut ajouter des class de style, de format ... pour adapter l'affichage (voir ci-dessous).
N'hésitez pas à tester en plein écran, au format mobile ... pour bien voir les différences de fonctionnement.
Important : tous les exemples présentés ici auront une combinaison de plusieurs class.
Il y aura à minima les controls affichés pour faciliter les tests.
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.controls
Présente les boutons de navigations.
Sur desktop ils s'affichent au survol.
Sur mobile, les contrôles sont toujours visibles lorsque la .row n'est pas "screen", et toujours invisibles lorsque la .row est "screen".
Important : Comme vous pouvez le voir dans l'affichage par défaut ci-dessus, les controls sont optionnels en .row.screen car on peut cliquer sur les images de débordement. En revanche ils sont obligatoires dans tous les autres cas pour pouvoir naviguer et indiquer qu'il y a d'autres images.
Sur desktop ils s'affichent au survol.
Sur mobile, les contrôles sont toujours visibles lorsque la .row n'est pas "screen", et toujours invisibles lorsque la .row est "screen".
Important : Comme vous pouvez le voir dans l'affichage par défaut ci-dessus, les controls sont optionnels en .row.screen car on peut cliquer sur les images de débordement. En revanche ils sont obligatoires dans tous les autres cas pour pouvoir naviguer et indiquer qu'il y a d'autres images.
<insert-markup>components.carousel-0</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.style1.controls
Style d'affichage 1 type "carte".
Présenté ici avec les controls.
Présenté ici avec les controls.
<insert-markup>components.carousel-1</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.style2.controls
Style d'affichage 2 type "carte".
Présenté ici avec les controls.
Présenté ici avec les controls.
<insert-markup>components.carousel-2</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.style3.controls
Style d'affichage 3 type "carte".
Présenté ici avec les controls.
Présenté ici avec les controls.
<insert-markup>components.carousel-3</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.split2.style1.controls
Affiche 2 items au centre.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
<insert-markup>components.carousel-4</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.split3.style1.controls
Affiche 3 items au centre.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
<insert-markup>components.carousel-5</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.split4.style1.controls
Affiche 4 items au centre.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
<insert-markup>components.carousel-6</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.split5.style1.controls
Affiche 5 items au centre.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
Le nombre d'images est réduit sur les petits écrans.
Présenté ici avec les controls et le style 1.
<insert-markup>components.carousel-7</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.square.split3.style1.controls
Format d'image carré.
Présenté ici avec les controls et le style 1 et 3 images.
Présenté ici avec les controls et le style 1 et 3 images.
<insert-markup>components.carousel-8</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.landscape.split2.style1.controls
Format d'image landscape.
Présenté ici avec les controls et le style 1 et 2 images.
Présenté ici avec les controls et le style 1 et 2 images.
<insert-markup>components.carousel-9</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
.portrait.split3.style1.controls
Format d'image portrait.
Présenté ici avec les controls et le style 1 et 3 images.
Présenté ici avec les controls et le style 1 et 3 images.
<insert-markup>components.carousel-10</insert-markup>
Affichage par défaut
Affichage avec "débordement" dans une .row.screen
Markup: ../../../snippets/components/carousel.hbs
<section class="container-grid">
<div class="row">
<div class="large-12 columns">
<h4>Affichage par défaut</h4>
</div>
<div class="large-12 columns">
<div class="blk-carousel {{modifier_class}}">
<div class="blk-carousel__scene">
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="row screen">
<div class="large-12 columns">
<h4> Affichage avec "débordement" dans une .row.screen </h4>
</div>
<div class="large-12 columns">
<div class="blk-carousel {{modifier_class}}">
<div class="blk-carousel__scene">
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Source:
src/cssframework_v2/less/components/carousel.less, line 1