studio-variable/botascopia-webiste-static
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add slideshow

Browse source
This commit is contained in:
Julie Blanc 2026-01-12 20:06:16 +01:00
parent b8f12369b8
commit 55014b1c49
7 changed files with 416 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

68
index.html
View file

@ -119,7 +119,7 @@
</div>
</section>
<section class="home--section-tool" id="home__ateliers">
<section class="home--section-tool" id="home__ateliers">
<div class="section--inner">
<h2 class="section--title">Ateliers</h2>
<div class="item-nav__group">
@ -137,15 +137,65 @@
</div>
</div>
<div class="slider">
<figure>
<img src="/content/images/atelier-2.png">
<figcaption>
Atelier Lorem Ispsum, Rennes, 23 septembre 2025
</figcaption>
</figure>
<div class="slideshow" data-nbr-item="3" style="--items: 3">
<div class="slideshow-container">
<!-- Inputs --------------------------------------- -->
<input type="radio" name="slide-input" id="slide-input-1" hidden="" checked=""/>
<input type="radio" name="slide-input" id="slide-input-2" hidden=""/>
<input type="radio" name="slide-input" id="slide-input-3" hidden=""/>
<!-- Slides + container --------------------------- -->
<div class="slideshow-inner">
<div class="slideshow-item" data-item="1">
<figure>
<img src="/content/images/atelier-2.png">
</figure>
<figcaption>
Atelier Lorem Ispsum, Rennes, 23 septembre 2025
</figcaption>
</div>
<div class="slideshow-item" data-item="2">
<figure>
<img src="/content/images/atelier-1.png">
</figure>
<figcaption>
Atelier 2 Lorem Ispsum, Rennes, 23 septembre 2025
</figcaption> </div>
<div class="slideshow-item" data-item="3">
<figure>
<img src="/content/images/Epinay3.jpeg">
</figure>
<figcaption>
Atelier 3 Lorem Ispsum, Epinay, 23 septembre 2025
</figcaption>
</div>
</div>
<!-- Controls (arrows) -------------------------------- -->
<nav class="slideshow-controls" aria-hidden="true">
<!-- Slide 1: prev=3, next=2 -->
<label for="slide-input-3" class="slide_controls slide_controls-previous" alt="Aller à la slide 3"></label>
<label for="slide-input-2" class="slide_controls slide_controls-next" alt="Aller à la slide 2"></label>
<!-- Slide 2: prev=1, next=3 -->
<label for="slide-input-1" class="slide_controls slide_controls-previous" alt="Aller à la slide 1"></label>
<label for="slide-input-3" class="slide_controls slide_controls-next" alt="Aller à la slide 3"></label>
<!-- Slide 3: prev=2, next=1 -->
<label for="slide-input-2" class="slide_controls slide_controls-previous" alt="Aller à la slide 2"></label>
<label for="slide-input-1" class="slide_controls slide_controls-next" alt="Aller à la slide 1"></label>
<span class="controls" aria-hidden="true"></span>
</nav>
</div>
</div>
</div>