FR | EN
Installer
Documentation

Documentation - Carousel.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Carousel

Marssel propose un système de carousel (carrousel) flexible et personnalisable pour créer des diaporamas d'images ou de contenu avec navigation, indicateurs et lecture automatique optionnelle.

Configuration de base

Le CarouselManager est automatiquement initialisé : 

const marssel = new Marssel();
// Le CarouselManager est prêt à l'emploi

Configuration de base

Le CarouselManager est automatiquement initialisé : 

<!-- Carousel simple -->
<div class="carousel-container" style="height: 400px;">
    <div class="carousel-slide">
        <img src="https://placehold.co/300x200" alt="Slide 1">
    </div>
    <div class="carousel-slide">
        <img src="https://placehold.co/300x200" alt="Slide 2">
    </div>
    <div class="carousel-slide">
        <img src="https://placehold.co/300x200" alt="Slide 3">
    </div>
</div>

Carousel avec légendes

Ajoutez des légendes avec l'attribut data-caption :

Aperçu
Slide 1
Slide 2
Slide 3 
<div class="carousel-container" style="height: 400px;">
    <div class="carousel-slide" data-caption="Première image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 1">
    </div>
    <div class="carousel-slide" data-caption="Deuxième image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 2">
    </div>
    <div class="carousel-slide" data-caption="Troisième image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 3">
    </div>
</div>

Lecture automatique

Activez la lecture automatique avec data-autoplay :

Aperçu
Slide 1
Slide 2
Slide 3 
<div class="carousel-container"
    data-autoplay="true"
    data-interval="3000"
    style="height: 400px;">
    <div class="carousel-slide" data-caption="Première image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 1">
    </div>
    <div class="carousel-slide" data-caption="Deuxième image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 2">
    </div>
    <div class="carousel-slide" data-caption="Troisième image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 3">
    </div>
</div>

Options disponibles 

<div class="carousel-container"
    data-autoplay="true"           <!-- Lecture automatique -->
    data-interval="5000"            <!-- Intervalle en ms (défaut: 5000) -->
    data-pause-on-hover="true"     <!-- Pause au survol (défaut: true) -->
    style="height: 400px;">
    <!-- Slides -->
</div>

Navigation tactile

Le carousel supporte automatiquement les gestes de swipe sur mobile et tablette.

Personnalisation des styles

Stylez votre carousel avec les classes Marssel :

Aperçu
Slide 1
Slide 2 
<div class="carousel-container [rounded-[12px]+shadow-[0_4px_12px_rgba(0_0_0_0.1)]+overflow-[hidden]]"
    style="height: 500px;">
    <div class="carousel-slide [bg-[000]" data-caption="Première image">
        <img src="https://placehold.co/300x200" class="w-[100%]+h-[100%]+object-[cover]+opacity-[0.8]" alt="Slide 1">
    </div>
    <div class="carousel-slide [bg-[000]]" data-caption="Deuxième image">
        <img src="https://placehold.co/300x200" class="w-[100%]+h-[100%]+object-[cover]+opacity-[0.8]" alt="Slide 2">
    </div>
</div>

Carousel avec contenu personnalisé

Utilisez n'importe quel contenu dans les slides : 

<div class="carousel-container" style="height: 400px;">
    <!-- Slide avec texte -->
    <div class="carousel-slide---[d-[flex]+items-[center]+justify-[center]+bg-[2563eb]]">
        <div class="text-align-[center] c-[ffffff] p-[40px]">
            <h2 class="font-size-[36px] mb-[16px]">Bienvenue</h2>
            <p class="font-size-[18px]">Découvrez notre produit</p>
        </div>
    </div>

    <!-- Slide avec image et texte -->
    <div class="carousel-slide pos-[relative]">
        <img src="image.jpg" class="w-[100%] h-[100%] object-fit-[cover]">
        <div class="pos-[absolute] top-[50%] left-[50%] transform-[translate[-50%,-50%]] c-[fff] text-align-[center]">
            <h3 class="font-size-[32px] mb-[12px]">Innovation</h3>
            <p class="font-size-[16px]">La technologie de demain</p>
        </div>
    </div>

    <!-- Slide avec vidéo -->
    <div class="carousel-slide">
        <video autoplay muted loop class="w-[100%]+h-[100%]+object-[cover]">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</div>

Personnalisation des boutons

Stylez les boutons de navigation : 

<div class="carousel-container" style="height: 400px;">
    <div class="carousel-slide">
        <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-slide">
        <img src="image2.jpg" alt="Slide 2">
    </div>
</div>

<style>
.carousel-prev,
.carousel-next {
    background-color: rgba(37, 99, 235, 0.8) !important;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(37, 99, 235, 1) !important;
}
</style>

Personnalisation des indicateurs

Stylez les points indicateurs : 

<style>
.carousel-indicator {
    width: 12px !important;
    height: 12px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.carousel-indicator.active {
    background-color: #2563eb !important;
    width: 30px !important;
    border-radius: 6px !important;
}
</style>

API JavaScript

Contrôlez le carousel programmatiquement : 

// Récupérer un carousel par son ID
const carouselId = container.dataset.carouselId;
const carousel = marssel.carouselManager.carousels.get(carouselId);

// Navigation
carousel.nextSlide();
carousel.prevSlide();
carousel.goToSlide(2); // Aller à la slide 2

// Contrôle de l'autoplay
carousel.startAutoplay();
carousel.stopAutoplay();

Carousel responsive

Adaptez la hauteur selon la taille d'écran : 

<div class="carousel-container h-[300px] md--h-[400px] lg--h-[500px]">
    <div class="carousel-slide">
        <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-slide">
        <img src="image2.jpg" alt="Slide 2">
    </div>
</div>

Personnalisation des styles

Stylez votre carousel avec les classes Marssel :

Aperçu
Technology
Design
Performance 
<!-- Carousel complet avec tous les éléments -->
<div class="carousel-container carousel-custom---[rounded-[16px]+overflow-[hidden]+shadow-[0_8px_24px_rgba(0,0,0,0.15)]]"
    data-autoplay="true"
    data-interval="4000"
    data-pause-on-hover="true"
    style="height: 500px;">

    <!-- Slide 1 -->
    <div class="carousel-slide" data-caption="Innovation technologique">
        <img src="https://placehold.co/300x200"
            alt="Technology"
            class="w-[100%] h-[100%] object-fit-[cover]">
    </div>

    <!-- Slide 2 -->
    <div class="carousel-slide" data-caption="Design moderne">
        <img src="https://placehold.co/300x200"
            alt="Design"
            class="w-[100%] h-[100%] object-fit-[cover]">
    </div>

    <!-- Slide 3 -->
    <div class="carousel-slide" data-caption="Performance maximale">
        <img src="https://placehold.co/300x200"
            alt="Performance"
            class="w-[100%] h-[100%] object-fit-[cover]">
    </div>
</div>

<style>
    /* Boutons personnalisés */
    .carousel-custom .carousel-prev,
    .carousel-custom .carousel-next {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(59, 130, 246, 0.9)) !important;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        transition: all 0.3s ease;
    }

    .carousel-custom .carousel-prev:hover,
    .carousel-custom .carousel-next:hover {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    }

    /* Indicateurs personnalisés */
    .carousel-custom .carousel-indicator {
        width: 10px !important;
        height: 10px !important;
        transition: all 0.3s ease;
    }

    .carousel-custom .carousel-indicator.active {
        background-color: #2563eb !important;
        width: 30px !important;
        border-radius: 5px !important;
    }

    /* Légendes personnalisées */
    .carousel-custom .carousel-caption {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
        padding: 30px 20px 20px !important;
        font-size: 18px;
        font-weight: 600;
    }
</style>
← Précédent Popover
Suivant → Progress Bar

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).