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:
parent
96c52e7e96
commit
3dc3a8c6e3
5 changed files with 323 additions and 79 deletions
44
assets/js/script.js
Normal file
44
assets/js/script.js
Normal 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,
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue