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.
npm install @gemeosagency/splideUne 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.
Dans les paramètres de votre projet Webflow, section "Custom Code" (avant la balise
), ajoutez :
``html
`
Idéal pour les galeries d'images avec navigation et pagination.
`html`
Précédent
Suivant
Pour un défilement continu et infini, parfait pour les bannières ou les logos.
`html`
Pour des transitions en fondu entre les slides avec personnalisation avancée.
`html`
←
→
| 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" |
| Attribut | Description | Exemple |
|----------|-------------|---------|
| splide-gap | Espacement entre les slides | splide-gap="20" |splide-gap-mobile
| | Espacement sur mobile | splide-gap-mobile="10" |
| Attribut | Description | Exemple |
|----------|-------------|---------|
| splide-autoscroll-speed | Vitesse du défilement (plus le nombre est grand, plus c'est rapide) | splide-autoscroll-speed="1" |
| Attribut | Description | Exemple |
|----------|-------------|---------|
| splide-fade-speed | Vitesse spécifique du fade (ms) | splide-fade-speed="500" |splide-direction
| | Direction des transitions | splide-direction="ltr" |
- designer : À ajouter à votre liste de slides dans Webflowsplide__list
- : Conteneur des slidessplide__slide
- : Classe pour chaque slide
`html`
splide-gap="20"
splide-gap-mobile="10"
splide-interval="5000"
splide-autoscroll="true"
splide-transition-duration="600ms">
←
→
`html`
splide-autoscroll-speed="2"
splide-gap="30"
splide-direction="rtl">
`html`
splide-interval="3000"
splide-fade-speed="800"
splide-autoscroll="true"
splide-direction="ltr"
splide-transition-duration="600ms">
← Précédent
Suivant →
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);
`
- 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
- Personnalisation complète : Vitesse, direction, autoplay
- Navigation/Pagination : Support complet des boutons de contrôle
- Configuration flexible : Mêmes options que le carrousel
- 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
Ajoutez ?splide-debug` à l'URL de votre page pour activer les messages de debug dans la console.
Pour toute question ou problème, veuillez contacter l'équipe Gemeos Agency.