@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 ), ajoutez :

``html









`

Types de Sliders

$3


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

Précédent

Suivant

`

$3

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

`

$3

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

←

→

`

Configuration

$3

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

$3

| Attribut | Description | Exemple |
|----------|-------------|---------|
| splide-gap | Espacement entre les slides | splide-gap="20" |
| splide-gap-mobile | Espacement sur mobile | splide-gap-mobile="10" |

$3

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

$3

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

$3

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

Exemples Webflow

$3

`html

splide-gap="20"
splide-gap-mobile="10"
splide-interval="5000"
splide-autoscroll="true"
splide-transition-duration="600ms">

Slide 1

Slide 2

←

→

`

$3

`html

splide-autoscroll-speed="2"
splide-gap="30"
splide-direction="rtl">

Item 1

Item 2

Item 3

`

$3

`html

splide-interval="3000"
splide-fade-speed="800"
splide-autoscroll="true"
splide-direction="ltr"
splide-transition-duration="600ms">

Slide 1

Slide 2

Slide 3

← Précédent

Suivant →

`

Gestion Programmatique

$3

Pour détruire proprement une instance de slider :

`javascript
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

$3

- 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

$3

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

$3

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