FR | EN
Install
Documentation

Documentation - Carousel.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Carousel

Marssel offers a flexible and customizable carousel (carousel) system for creating image or content slideshows with navigation, indicators and optional autoplay.

Basic setup

The CarouselManager is automatically initialized: 

const marssel = new Marssel();
// The CarouselManager is ready to use

Basic setup

The CarouselManager is automatically initialized: 

<!-- Simple carousel -->
<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 with captions

Add captions with the data-caption attribute:

Preview
Slide 1
Slide 2
Slide 3 
<div class="carousel-container" style="height: 400px;">
    <div class="carousel-slide" data-caption="First 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="Second 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="Third image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 3">
    </div>
</div>

Autoplay

Enable autoplay with data-autoplay:

Preview
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="First 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="Second 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="Third image">
        <img src="https://placehold.co/300x200" class="w-[100%] h-[100%] object-fit-[cover]" alt="Slide 3">
    </div>
</div>

Options available 

<div class="carousel-container"
    data-autoplay="true"           <!-- Autoplay -->
    data-interval="5000"            <!-- Interval in ms (default: 5000) -->
    data-pause-on-hover="true"     <!-- Pause on hover (default: true) -->
    style="height: 400px;">
    <!-- Slides -->
</div>

Touchscreen navigation

The carousel automatically supports swipe gestures on mobile and tablet.

Customizing styles

Style your carousel with Marsel classes:

Preview
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="First 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="Second image">
        <img src="https://placehold.co/300x200" class="w-[100%]+h-[100%]+object-[cover]+opacity-[0.8]" alt="Slide 2">
    </div>
</div>

Carousel with personalized content

Use any content in the slides: 

<div class="carousel-container" style="height: 400px;">
    <!-- Slide with text -->
    <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]">Welcome</h2>
            <p class="font-size-[18px]">Discover our product</p>
        </div>
    </div>

    <!-- Slide with image and text -->
    <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]">The technology of tomorrow</p>
        </div>
    </div>

    <!-- Slide with video -->
    <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>

Customizing buttons

Style the navigation buttons: 

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

Customizing Indicators

Style the indicator points: 

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

JavaScript API

Control the carousel programmatically: 

// Retrieve a carousel by its ID
const carouselId = container.dataset.carouselId;
const carousel = marssel.carouselManager.carousels.get(carouselId);

// Navigation
carousel.nextSlide();
carousel.prevSlide();
carousel.goToSlide(2); // Go to slide 2

// Autoplay control
carousel.startAutoplay();
carousel.stopAutoplay();

Responsive carousel

Adapt the height according to the screen size: 

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

Customizing styles

Style your carousel with Marsel classes:

Preview
Technology
Design
Performance 
<!-- Complete carousel with all elements -->
<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>
    /* Custom buttons */
    .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);
    }

    /* Custom Indicators */
    .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;
    }

    /* Custom captions */
    .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>
← Previous Popover
Next → Progress Bar

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).