@gemeosagency/splide

Une extension personnalisée de Splide.js pour créer des carrousels, des défilements automatiques (marquee) et des transitions en fondu, spécialement conçue pour s'intégrer avec Webflow.

Installation dans Webflow

Dans les paramètres de votre projet Webflow, section "Custom Code" (avant la balise </body>), ajoutez :

<!-- Splide Core -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" />

<!-- Splide Auto-Scroll Extension -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-auto-scroll.min.js"></script>

<!-- @gemeosagency/splide -->
<script src="https://unpkg.com/@gemeosagency/[email protected]/dist/index.js"></script>

Types de Sliders

1. Carrousel

Idéal pour les galeries d'images avec navigation et pagination.

<div splide="carousel">
    <div class="splide">
        <div class="splide__track">
            <div class="splide__list designer">
                <!-- Vos slides ici -->
            </div>
        </div>
    </div>
    <!-- Navigation (optionnel) -->
    <button type="button" splide-button="previous">Précédent</button>
    <button type="button" splide-button="next">Suivant</button>
    <button type="button" splide-button="pagination"></button>
</div>

2. Marquee

Pour un défilement continu et infini, parfait pour les bannières ou les logos.

<div splide="marquee">
    <div class="splide">
        <div class="splide__track">
            <div class="splide__list designer">
                <!-- Vos slides ici -->
            </div>
        </div>
    </div>
</div>

3. Fade

Pour des transitions en fondu entre les slides avec personnalisation avancée.

<div splide="fade">
    <div class="splide">
        <div class="splide__track">
            <div class="splide__list designer">
                <!-- Vos slides ici -->
            </div>
        </div>
    </div>
    <!-- Navigation (optionnel) -->
    <button type="button" splide-button="previous">←</button>
    <button type="button" splide-button="next">→</button>
    <button type="button" splide-button="pagination"></button>
</div>

Configuration

Attributs Communs

| Attribut | Description | Exemple | | ----------------------------- | -------------------------------------------------------------------- | ------------------------------------ | | splide | Type de slider (carousel, marquee ou fade) | splide="carousel" | | splide-gap | Espacement entre les slides | splide-gap="20" | | splide-gap-mobile | Espacement sur mobile | splide-gap-mobile="10" | | splide-hide-under-threshold | Masque si moins de X slides | splide-hide-under-threshold="3" | | splide-direction | Direction du défilement (ltr, rtl, ttb) | splide-direction="rtl" | | splide-height | Hauteur explicite, obligatoire pour ttb sans hauteur CSS mesurable | splide-height="400px" | | splide-interval | Temps entre les transitions automatiques (ms) | splide-interval="5000" | | splide-autoscroll | Active/désactive le défilement automatique | splide-autoscroll="false" | | splide-transition-duration | Durée des transitions personnalisées | splide-transition-duration="800ms" | | splide-easing | Fonction CSS appliquée à la transition | splide-easing="ease-in-out" |

Attributs du Carrousel

| Attribut | Description | Exemple | | ------------------- | ----------------------------------------------------------------- | ------------------------ | | splide-gap | Espacement entre les slides | splide-gap="20" | | splide-gap-mobile | Espacement sur mobile | splide-gap-mobile="10" | | splide-type | Mode Splide (loop centré par défaut ou slide aligné à gauche) | splide-type="slide" |

Attributs du Marquee

| Attribut | Description | Exemple | | ------------------------- | ------------------------------------------------------------------- | ----------------------------- | | splide-autoscroll-speed | Vitesse du défilement (plus le nombre est grand, plus c'est rapide) | splide-autoscroll-speed="1" |

Attributs du Fade

| Attribut | Description | Exemple | | ------------------- | ------------------------------- | ------------------------- | | splide-fade-speed | Vitesse spécifique du fade (ms) | splide-fade-speed="500" | | splide-direction | Direction des transitions | splide-direction="ltr" |

L'autoplay du fade reste désactivé par défaut. Utilisez explicitement splide-autoscroll="true" pour l'activer.

Classes Importantes

• designer : À ajouter à votre liste de slides dans Webflow
• splide__list : Conteneur des slides
• splide__slide : Classe pour chaque slide

Exemples Webflow

Carrousel Avancé

<div
    splide="carousel"
    splide-gap="20"
    splide-gap-mobile="10"
    splide-interval="5000"
    splide-autoscroll="true"
    splide-transition-duration="600ms"
>
    <div class="splide">
        <div class="splide__track">
            <div class="splide__list designer">
                <div class="splide__slide">Slide 1</div>
                <div class="splide__slide">Slide 2</div>
            </div>
        </div>
    </div>
    <button type="button" splide-button="previous">←</button>
    <button type="button" splide-button="next">→</button>
    <button type="button" splide-button="pagination"></button>
</div>

Marquee Personnalisé

<div splide="marquee" splide-autoscroll-speed="2" splide-gap="30" splide-direction="rtl">
    <div class="splide">
        <div class="splide__track">
            <div class="splide__list designer">
                <div class="splide__slide">Item 1</div>
                <div class="splide__slide">Item 2</div>
                <div class="splide__slide">Item 3</div>
            </div>
        </div>
    </div>
</div>

Fade Avancé avec Navigation

<div
    splide="fade"
    splide-interval="3000"
    splide-fade-speed="800"
    splide-autoscroll="true"
    splide-direction="ltr"
    splide-transition-duration="600ms"
>
    <div class="splide">
        <div class="splide__track">
            <div class="splide__list designer">
                <div class="splide__slide">Slide 1</div>
                <div class="splide__slide">Slide 2</div>
                <div class="splide__slide">Slide 3</div>
            </div>
        </div>
    </div>
    <button type="button" splide-button="previous">← Précédent</button>
    <button type="button" splide-button="next">Suivant →</button>
    <button type="button" splide-button="pagination"></button>
</div>

Gestion Programmatique

Nettoyage des Instances

Pour détruire proprement une instance de slider :

import { destroyCarrousel, destroyFade, destroyMarquee, destroySplide, initSplide } from '@gemeosagency/splide'

// Pour un carrousel
const carouselElement = document.querySelector('[splide="carousel"]')
destroyCarrousel(carouselElement)

// Pour un fade
const fadeElement = document.querySelector('[splide="fade"]')
destroyFade(fadeElement)

// Pour un marquee
const marqueeElement = document.querySelector('[splide="marquee"]')
destroyMarquee(marqueeElement)

// API générique et réinitialisation
destroySplide(carouselElement)
initSplide()

Avec le bundle CDN classique, la même API est disponible sous window.GemeosSplide.

Les valeurs de splide-slide-name sont toujours insérées comme du texte. Le HTML contenu dans cet attribut n'est jamais interprété.

Les anciens contrôles construits avec des <div> restent compatibles et reçoivent automatiquement les attributs clavier nécessaires. Pour les nouvelles intégrations, préférez néanmoins des éléments <button type="button"> natifs.

Test local

pnpm install
pnpm dev

Ouvrez ensuite http://localhost:3000/demo.html. La page permet de tester les trois variantes, la pagination, les transitions, le mode vertical ainsi que la destruction et la réinitialisation des instances.

Pour exécuter les contrôles automatisés :

pnpm test
pnpm lint
pnpm check

Améliorations Récentes

✅ Stabilité et Performance

• Isolation des instances : Chaque slider fonctionne indépendamment
• Gestion des clics rapides : Protection contre les interactions multiples
• Nettoyage automatique : Gestion de la mémoire optimisée
• Gestion d'erreurs : Messages d'erreur explicites pour le debug

✅ Fonctionnalités Fade

• Personnalisation complète : Vitesse, direction, autoplay
• Navigation/Pagination : Support complet des boutons de contrôle
• Configuration flexible : Mêmes options que le carrousel

✅ Compatibilité Multi-instances

• Plusieurs sliders : Fonctionnement stable avec plusieurs sliders sur la même page
• Isolation du DOM : Chaque instance utilise ses propres éléments
• Performance optimisée : Pas de conflits entre instances

Debug

Ajoutez ?splide-debug à l'URL de votre page pour activer les messages de debug dans la console.

Support

Pour toute question ou problème, veuillez contacter l'équipe Gemeos Agency.