Carousel Sliders

Default Carousel

Basic version of the carousel slider that comes with default styling and functionality.

NOTE: the .is-active class is used to show which slide is currently active. In this example, the active slide is using the same color as the .hpu-bg-6th. Please refer to HPU Colors for usage. The .is-active can be ignored especially when having an image carousel slider.

Also, the splide classes use double underscore: splide__track, splide__list, and splide__slide.

/* Custom styles for .is-active slide */
hpu-bg-gray.is-active {
    background: #fed402;
}

<div class="hpu-slider splide" aria-label="Carousel 1" data-hpu="slider">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>
        </ul>
    </div>
</div>

Image Carousel with Text Overlay and Image Lazyload

In the example below, the text is applied on the slider along with background color overlay and lazyLoad background image. Please refer to HPU Colors for usage guides.

Lazy loading is a technique used to defer the loading of images on a webpage until they are needed.

By default, lazyLoad option is enabled with 'nearby' mode, which loads only the images near the active slide. Additionally, the img tag must use the data-splide-lazy attribute instead of the src attribute. This effect can be seen in the browser's developer feature.

Also, cover is set to true by default to let the image to cover up the entire area of the carousel slider.

More info about the options mentioned above are available in the options table.

/* Custom styles for .is-active slide for displaying text */
<style>
    #slide2 .splide__slide .hpu-overlay-black {
        opacity: 0;
        transition: opacity .5s ease-out;
    }

    #slide2 .splide__slide.is-active .hpu-overlay-black {
        opacity: 1;
    }
</style>

<div class="hpu-slider color-theme-white splide" id="slide2" aria-label="Carousel 2" data-hpu="slider">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img data-splide-lazy="..." alt="...">

                <div class="hpu-overlay-black hpu-h100pc hpu-w100pc hpu-d-flex flex-col flex-jc-center hpu-p-7rem">
                    <h1 class="display-3">...</h1>

                    <p>...</p>

                    <div class="hpu-mt-4">
                        <button type="button" class="hpu-btn btn-bg-6th">...</button>
                    </div>
                </div>
            </li>

            ...
        </ul>
    </div>
</div>

Carousel Controls and Indicator Themes

Adjust the controls and indicator colors by adding color classes to the wrapper, ensuring optimal content contrast: .hpu-slider .color-theme-{color} .splide. Please refer to HPU Colors for usage guides.

<div class="hpu-slider splide" aria-label="Slide 3a" data-hpu="slider">
    ...
</div>

<div class="hpu-slider color-theme-1st splide" aria-label="Slide 3b" data-hpu="slider">
    ...
</div>

<div class="hpu-slider color-theme-white splide" aria-label="Slide 3d" data-hpu="slider">
    ...
</div>

Programmatic Carousel Sliders

Sliders can be activated programmatically with options available to customize their behavior. When using this approach, simply add the id to the parent wrapper, then remove the data-hpu attribute, then call the id value into your script.

<div class="hpu-slider splide" id="slider4" aria-label="Carousel 4">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">
                <p class="display-1 hpu-font-bold">
                    ...
                </p>
            </li>

            ...
        </ul>
    </div>
</div>

let slider4 = new HPU.Slider('#slider4');

// Manually enable the defined slider
slider4.slide();

Carousel Options

Set of configurable parameters that define the behavior and functionality of a carousel slider. To change the slider's behavior, simply add an option right next to the selector as shown:

let slider = new HPU.Slider('#sliderId', {options});

Carousel Methods

When a slider is set programmatically to define options, the method defines what to do to the slider.

let slider = new HPU.Slider('#id', {options});
slider.slide();

Multiple Slides Carousels

Featuring different variety of multiple slides carousels.

Examples below have height:'10rem' and gap:'.5rem' for compact examples.

<div class="hpu-slider color-theme-dark-gray splide" id="slide3a aria-label="Slide 3a">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">...</li>

            ...
        </ul>
    </div>
</div>

let slide5a = new HPU.Slider('#slide5a', {
    gap : '.5rem',
    height : '10rem',
    perPage : 3
});

// Manually enable the defined slider
slide5a.slide();

<div class="hpu-slider color-theme-dark-gray splide" id="slide5b aria-label="Slide 5b">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">...</li>

            ...
        </ul>
    </div>
</div>

let slide5b = new HPU.Slider('#slide5b', {
    gap : '.5rem',
    height : '10rem',
    perMove : 1,
    perPage : 3,
    type : 'loop'
});

// Manually enable the defined slider
slide5b.slide();

<div class="hpu-slider color-theme-dark-gray splide" id="slide5c aria-label="Slide 5c">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">...</li>

            ...
        </ul>
    </div>
</div>

let slide5c = new HPU.Slider('#slide5c', {
    focus : 0,
    gap : '.5rem',
    height : '10rem',
    perPage : 3
});

// Manually enable the defined slider
slide5c.slide();

<div class="hpu-slider color-theme-dark-gray splide" id="slide5d aria-label="Slide 5d">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">...</li>

            ...
        </ul>
    </div>
</div>

let slide5d = new HPU.Slider('#slide5d', {
    focus : 'center',
    gap : '.5rem',
    height : '10rem',
    perPage : 3,
    type : 'loop'
});

// Manually enable the defined slider
slide5d.slide();

<div class="hpu-slider color-theme-dark-gray splide" id="slide5e aria-label="Slide 5e">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">...</li>

            ...
        </ul>
    </div>
</div>

let slide5e = new HPU.Slider('#slide5e', {
    drag : 'free',
    focus : 'center',
    gap : '.5rem',
    height : '10rem',
    perPage : 3,
    type : 'loop'
});

// Manually enable the defined slider
slide5e.slide();

<div class="hpu-slider color-theme-dark-gray splide" id="slide5f aria-label="Slide 5f">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center hpu-px-1">...</li>

            ...
        </ul>
    </div>
</div>

let slide5f = new HPU.Slider('#slide5f', {
    autoWidth : true,
    focus : 'center',
    gap : '.5rem',
    height : '10rem',
    perPage : 3,
    type : 'loop'
});

// Manually enable the defined slider
slide5f.slide();

Vertical Carousel Slider with Mouse Wheel

Slides move vertically (up and down) instead of horizontally (left and right). To prevent the slides from changing too quickly, you can enable the waitForTransition by setting it to true. This ensures that the mouse wheel waits for the current slide transition to complete before moving to the next slide.

<div class="hpu-slider color-theme-dark-gray splide" id="slide6" aria-label="Slide 6">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide hpu-bg-gray hpu-d-flex flex-ai-center flex-jc-center">...</li>

            ...
        </ul>
    </div>
</div>

let slide6 = new HPU.Slider('#slide6', {
    direction : 'ttb',
    waitForTransition : true,
    wheel : true
});

// Manually enable the defined slider
slide6.slide();

Thumbnail Carousel Slider With Responsive Behavior

Carousel sliders can be synchronized, with the main slider on top and a thumbnail navigation slider below. For both of the sliders, pagination must be set to false, and for the top slider, arrows must also be set to false.

In the example below, the carousel type is set to 'fade', allowing seamless looping with the fade transition. Responsive behavior is configured also using the breakpoints option to specify when and how the carousel should adapt to different device sizes.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

/* Custom styles for .is-active thumbnail pagination at the bottom */
#slide7Thumbnail .splide__slide {
    position: relative;
}

#slide7Thumbnail .splide__slide::before {
    background: rgba(0, 0, 0, 0.75);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: background .3s ease-out;
    width: 100%;
}

#slide7Thumbnail .splide__slide.is-active::before {
    background: transparent;
    content: '';
}

<!-- Top Main Slider-->
<div class="hpu-slider splide hpu-mb-1" id="slide7Main" aria-label="Slide 7 Main">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img data-splide-lazy="..." alt="...">
            </li>

            ...
        </ul>
    </div>
</div>

<!-- Bottom Thumbnail Slider-->
<div class="hpu-slider color-theme-6th splide" id="slide7Thumbnail" aria-label="Slide 7 Thumbnail">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img data-splide-lazy="..." alt="...">
            </li>

            ...
        </ul>
    </div>
</div>

// Top Main Slider
let slide7Main = new HPU.Slider('#slide7Main', {
    arrow : false,
    breakpoints : {
        768 : {
            height : '35vh'
        }
    },
    pagination : false,
    type : 'fade'
});

// Bottom Thumbnail Slider
let slide7Thumbnail = new HPU.Slider('#slide7Thumbnail', {
    breakpoints : {
        768 : {
            perPage : 3
        }
    },
    focus : 'center',
    gap : '.25rem',
    isNavigation : true,
    pagination : false,
    perPage : 10,
    type : 'loop'
});

// Manually enable the main slider
slide7Main.slide();

// Manually enable the thumbnail slider
slide7Thumbnail.slide();

// Finally, add the following to sync the 2 sliders:
slide7Main.sync(slide7Thumbnail);

Carousel Accessibility

Carousel sliders are a visually appealing way to present content compactly. However, they can pose accessibility challenges that need careful attention. SplideJS offers a solid foundation with built-in accessibility features, but additional enhancements are necessary to ensure the carousel is fully accessible to all users.

One essential enhancement is adding the aria-label attribute to every carousel slider container. This provides a clear description of the carousel's content, improving the experience for users relying on assistive technologies:

<div class="splide" id="..." aria-label="The Great Slider">
    ...
</div>

The aria-label can also be defined by referencing the title of the carousel slider. Instead of using aria-label, it's recommended to use aria-labelledby assigning the id of the title as its value. This approach allows screen readers to announce the title directly, providing a more descriptive and contextually relevant experience for users:

<div class="splide" id="..." aria-labelledby="theSlider">
    <h1 id="theSlider">
        ...
    </h1>
</div>

Finally, the default autoplay interval is set to 5000 milliseconds, providing a comfortable pacing for most users. For an optimal experience, intervals between 5000 and 10000 milliseconds are recommended, as shorter durations can feel rushed.

For more accessibility information, check out the SplideJS Accessibility Guides.