slider hero

assets/js/hero-slider.js

@@ -0,0 +1,50 @@
+import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
+
+export function initHeroSlider() {
+  const heroSlider = document.querySelector('.hero-slider');
+
+  if (!heroSlider) {
+    return;
+  }
+
+  const swiper = new Swiper('.hero-slider', {
+    // Optional parameters
+    loop: true,
+    speed: 600,
+    effect: 'fade',
+    fadeEffect: {
+      crossFade: true
+    },
+
+    // Touch/Swipe settings (activé par défaut, mais configuré ici pour optimisation)
+    touchRatio: 1,
+    touchAngle: 45,
+    grabCursor: true,
+    simulateTouch: true,
+    allowTouchMove: true,
+
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+
+    // Pagination
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
+
+    // Keyboard control
+    keyboard: {
+      enabled: true,
+    },
+
+    // Accessibility
+    a11y: {
+      prevSlideMessage: 'Diapositive précédente',
+      nextSlideMessage: 'Diapositive suivante',
+      paginationBulletMessage: 'Aller à la diapositive {{index}}',
+    },
+  });
+}

assets/js/script.js

@@ -3,11 +3,12 @@ import { copyLink } from './share.js';
 import { bannerStickyMobile } from './banner-sticky-mobile.js';
 import { bannerStickyDesktop } from './banner-sticky-desktop.js';
 import { themeToggle } from './themeToggle.js';
+import { initHeroSlider } from './hero-slider.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
 
-window.onload = async function () { 
+window.onload = async function () {
   console.log("SCRIPT LOADED");
   headerToggle();
   headerScrollVisibility();
@@ -15,4 +16,5 @@ window.onload = async function () {
   themeToggle();
   bannerStickyMobile(responsiveSmall);
   bannerStickyDesktop(responsiveSmall);
+  initHeroSlider();
 }