@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) -->
    <div splide-button="previous">Précédent</div>
    <div splide-button="next">Suivant</div>
    <div splide-button="pagination"></div>
</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) -->
    <div splide-button="previous">←</div>
    <div splide-button="next">→</div>
    <div splide-button="pagination"></div>
</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-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" |

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" |

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" |

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>
    <div splide-button="previous">←</div>
    <div splide-button="next">→</div>
    <div splide-button="pagination"></div>
</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>
    <div splide-button="previous">← Précédent</div>
    <div splide-button="next">Suivant →</div>
    <div splide-button="pagination"></div>
</div>

Gestion Programmatique

Nettoyage des Instances

Pour détruire proprement une instance de slider :

import { destroyCarrousel, destroyFade } 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);

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.