Fiche: Carrousel
Description
Un carrousel devrait être un objet simple.
C'est essentiellement une liste de contenu introduite par un titre et éventuellement une description.
De plus, nous avons des liens pour la navigation graphique et visuelle entre les contenus.
Tout le reste n'est que style (CSS) et interactivité/transformation (JS/CSS).
Structure
[ARTICLE] [h2] Titre [SECTION] ==> pas besoin de titre [Presentation] [liste d'éléments] [élément 1 (graphique, texte; etc.)] [élément 2 (graphique, texte; etc.)] [élément ... (graphique, texte; etc.)] [élément e (graphique, texte; etc.)] [NAVIGATION (aria_hidden, hidden)]
Implémentation
Exemple 1
Exemple 2
Code
HTML
<section> <h4>Exemple 1</h4> <div class="carousel3"> <ul> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_001.svg" alt="Une idée, un génie"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_002.svg" alt="Une idée, un processus"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_003.svg" alt="Un carousel bouillant"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_004.svg" alt="Une lumière si naturelle"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_005.svg" alt="Le moulin dans le vent"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_006.svg" alt="Tourner manège"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_007.svg" alt="Aladin, la lampe et le génie"></li> </ul> <nav aria-hidden="true"> <span id="bt30a" class="nav précédent" tabindex="0" title="bloc précédent"><</span> <span id="bt30b" class="nav suivant" tabindex="0" title="bloc suivant">></span> </nav> </div> </section> <section> <h4>Exemple 2</h4> <div class="carousel4"> <ul> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_001.webp" alt="Un immeuble parisien des années 70"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_002.webp" alt="Une facade de Gymanse années 30"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_003.webp" alt="Le street art au service de l'urbanisme"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_004.webp" alt="Le street art au service du sourire"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_005.webp" alt="Une facade qui trompe l'oeil"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_006.webp" alt="Tout est art"></li> <li class="enveloppe"><img src="pic/<?php echo $DAT_liste["client"][$_SESSION['privé']]; ?>/car3_007.webp" alt="Une longue plage basque au couchant"></li> </ul> <nav aria-hidden="true"> <span id="bt31a" class="nav précédent" tabindex="0" title="bloc précédent"><</span> <span id="bt31b" class="nav suivant" tabindex="0" title="bloc suivant">></span> </nav> </div> </section>
CSS
--hauteurCarousel: 200px; --longCarousel: 400px; --longCarouselBloc: calc(var(--longCarousel) - 30px); --padding: 16px; .carousel3 { width: calc(1*var(--longCarousel)); } .carousel4 { width: calc(2.7*var(--longCarousel)); } .carousel3, .carousel4 { padding: 10px; overflow: hidden; display: block; margin: auto; border: 3px solid var(--couleurBase); height: calc(var(--hauteurCarousel)*1.5); text-align: left; li { list-style: none; display: inline-block; width: var(--longCarouselBloc); min-width: var(--longCarouselBloc); margin-left: 0; margin-right: 50px; min-height: calc(1.3*var(--hauteurCarousel)); } ul { margin: 0; width: var(--longCarousel); display: flex; padding-left: 12px; } li img { width: var(--longCarouselBloc); } nav { display: flex; justify-content: center; margin: 44px 0 0; border: 0px; width: unset; padding: unset; background-color: transparent; cursor: pointer; } span.nav { padding: 6px 10px 6px 10px; border: 1px solid grey; margin-right: 12px; border-radius: 16px; cursor: pointer; } span.nav { margin-top: calc(-2*var(--padding)); } } nav[hidden] { display: block; }
JavaScript
<script> var liste2 = document.querySelector('.carousel3').querySelector('ul'); var nbImages2 = liste2.childElementCount; listex = document.querySelectorAll(".carousel3 nav span"); for (var l = 0; l < listex.length; ++l) { listex[l].addEventListener('click', function() { if(clickPress(event) === true) car03(this.id,3)}); listex[l].addEventListener('keypress', function() { if(clickPress(event) === true) car03(this.id,3)}); } var liste3 = document.querySelector('.carousel4').querySelector('ul'); var nbImages2 = liste2.childElementCount; listex = document.querySelectorAll(".carousel4 nav span"); for (var l = 0; l < listex.length; ++l) { listex[l].addEventListener('click', function() { if(clickPress(event) === true) car03(this.id,4)}); listex[l].addEventListener('keypress', function() { if(clickPress(event) === true) car03(this.id,4)}); } var tour = 0; var sens = 0; function car03(quoi,blk) { if (quoi == "bt30a" || quoi == "bt31a") { sens = -1; tour--; } if (quoi == "bt30b" || quoi == "bt31b") { sens = -1; tour++; } if (tour == (nbImages2-0)) tour = 0; if (tour < 0) tour = (nbImages2-1); // else tour++; if (blk == 3) document.querySelector('.carousel3').querySelector('ul').style.marginLeft=(sens*tour*420)+"px"; if (blk == 4) document.querySelector('.carousel4').querySelector('ul').style.marginLeft=(sens*tour*420)+"px"; } function clickPress(event){ if(event.type === 'click') return true; else if(event.type === 'keypress'){ var code = event.charCode || event.key; var code = event.charCode || event.key; if((code === 32)|| (code === 13)) return true; } else return false; } </script>