studio-variable/le-courage-du-reel
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement functional slider with Swiper.js

Browse source 
- Add Swiper.js via CDN for carousel functionality
- Restructure excerpts section: 6 individual slides instead of 2 grouped slides
- Implement responsive behavior: 3 slides per view on desktop, 1 on mobile
- Add infinite loop navigation with prev/next buttons and pagination bullets
- Create custom styles in _section_4-excerpts.scss (no Swiper CSS)
- Add script.js with Swiper configuration and responsive breakpoints

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-23 17:02:33 +01:00
parent 96c52e7e96
commit 3dc3a8c6e3
5 changed files with 323 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

101
index.html
View file

@ -138,43 +138,76 @@
Le réel traversé appelle un mot pour ne pas mourir
</h3>
</header>
<div class="slider">
<div class="slide">
<div class="item">
<p class="label">Prologue</p>
<p class="text">
Le réel est un seuil.<br />
On entre, ou pas.
</p>
<div class="swiper excerpts-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<p class="label">Prologue</p>
<p class="text">
Le réel est un seuil.<br />
On entre, ou pas.
</p>
</div>
</div>
<div class="item">
<p class="label">La peur</p>
<p class="text">
Le réel est là, à portée de main. La peur est son odeur.
</p>
<div class="swiper-slide">
<div class="item">
<p class="label">La peur</p>
<p class="text">
Le réel est là, à portée de main. La peur est son odeur.
</p>
</div>
</div>
<div class="item">
<p class="label">L'apprentissage</p>
<p class="text">
On ne devient pas Einstein en le lisant, ni Picasso en le
regardant.<br />
<br />
Ça sauve presque.
</p>
<div class="swiper-slide">
<div class="item">
<p class="label">L'apprentissage</p>
<p class="text">
On ne devient pas Einstein en le lisant, ni Picasso en le
regardant.<br />
<br />
Ça sauve presque.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<p class="label">Le temps</p>
<p class="text">
Les dernières secondes<br />
ne sont pas du rebut.<br />
<br />
Elles ramassent tout.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<p class="label">La dépression</p>
<p class="text">
La dépression est un effondrement de la traversabilité.<br />
<br />
C'est une plante qui ne meurt pas sur n'importe quel sol.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<p class="label">Le tissu du monde</p>
<p class="text">
Un seul amour,<br />
pleinement porté,<br />
suffit à ce que la<br />
totalité ne chute pas.
</p>
</div>
</div>
</div>
</div>
<div class="controls">
<button class="prev">
<img src="/assets/svg/arrow-left.svg" alt="flèche précédente" />
</button>
<ul class="bullets">
<li><button class="bullet"></button></li>
<li><button class="bullet"></button></li>
</ul>
<button class="next">
<img src="/assets/svg/arrow-right.svg" alt="flèche suivante" />
</button>
<!-- Navigation arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Pagination bullets -->
<div class="swiper-pagination"></div>
</div>
</section>
@ -438,5 +471,7 @@
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="/assets/js/script.js"></script>
</body>
</html>