Diaporama
Permet d'afficher un diaporama des photos à partir d'une collection d'images. Le Diaporama est un élément décoratif dont la seule intéraction est de mettre en pause l'animation.
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.
Des class supplémentaires permettent d'adapter le style, le format ... (voir ci-dessous).
Les Diaporamas sont présentés ici avec le "figcaption", celui-ci est optionnel.
Important : tous les exemples présentés ici auront une combinaison de plusieurs class.
.style1.landscape
Style 1.
Présenté ici avec le format d'image Landscape.
Présenté ici avec le format d'image Landscape.
<insert-markup>components.slideshow-1</insert-markup>
.style2.square
Style 2.
Présenté ici avec le format d'image Square.
Présenté ici avec le format d'image Square.
<insert-markup>components.slideshow-2</insert-markup>
.style3.portrait
Style 3.
Présenté ici avec le format d'image Portrait.
Présenté ici avec le format d'image Portrait.
<insert-markup>components.slideshow-3</insert-markup>
.style4.landscape
Style 4.
Présenté ici avec le format d'image Landscape.
Présenté ici avec le format d'image Landscape.
<insert-markup>components.slideshow-4</insert-markup>
.style5.square
Style 5.
Présenté ici avec le format d'image Square.
Présenté ici avec le format d'image Square.
<insert-markup>components.slideshow-5</insert-markup>
Markup: ../../../snippets/components/slideshow.hbs
<section class="container-grid">
<div class="row">
<div class="large-12 columns">
<div class="blk-slideshow {{modifier_class}}">
<div class="blk-slideshow__container">
<div class="blk-slideshow__controls">
<div class="blk-button xxl blk-slideshow__play">
<button type="button" class="button blk-button__link" title="Lire le diaporama ou mettre en pause">
<span class="ico blk-button__icon play" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="play icon-solid"><path class="solid" fill="currentcolor" d="M8.524 4.938A1 1 0 0 0 7 5.79v12.42a1 1 0 0 0 1.524.852l10.092-6.21a1 1 0 0 0 0-1.704L8.524 4.938Z"></path></svg>
</span>
<span class="ico blk-button__icon pause" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="pause icon-solid"><path class="solid" fill="currentcolor" d="M9 5H7a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Zm8 0h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Z"></path></svg>
</span>
</button>
</div>
</div>
<div class="collection-item">
<figure>
<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 1 Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure>
<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 2 Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure>
<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 3 Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure>
<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 4 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/slideshow.less, line 1