# @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 :

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

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

<!-- @gemeosagency/splide -->
<script src="https://unpkg.com/@gemeosagency/splide@3.0.2/dist/index.js"></script>
```

## Types de Sliders

### 1. Carrousel
Idéal pour les galeries d'images avec navigation et pagination.
```html
<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.
```html
<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.
```html
<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é
```html
<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é
```html
<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
```html
<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 :

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

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