feat: implement functional slider with Swiper.js

- 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

44
assets/js/script.js Normal file
View file

@ -0,0 +1,44 @@
document.addEventListener('DOMContentLoaded', function() {
const excerptSwiper = new Swiper('.excerpts-swiper', {
// Slides visibles et groupement
slidesPerView: 3,
slidesPerGroup: 3,
spaceBetween: 30,
// Infinite loop
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// Pagination bullets
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: false,
},
// Transitions
speed: 400,
effect: 'slide',
// Responsive breakpoints
breakpoints: {
// Mobile : <= 768px
0: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 20,
},
// Desktop : > 768px
769: {
slidesPerView: 3,
slidesPerGroup: 3,
spaceBetween: 30,
}
}
});
});