Slider

A responsive slider or carousel with touch support, autoplay, thumbnails and looping behavior.

Import

import { Slider } from "@schukai/monster/source/components/layout/slider.mjs";

Source

View source code

Package

@schukai/monster

Since

3.74.0

SLIDE 1

SLIDE 2

SLIDE 3

SLIDE 4

SLIDE 5

Introduction

The Monster Slider is a carousel-style layout for sequential slides, previews or media sets. Use it when one item should be prominent while neighboring items remain part of the same collection.

When to use Slider

Use it for media galleries and short slide sets: Images, product previews and compact tours fit well.
Use it when touch interaction matters: The control is built for swiping and responsive slide movement.
Do not use it for critical dense information: Carousels hide content and are poor for long lists of equally important data.

Typical mistakes

Keep autoplay and looping purposeful. When a slider moves content without clear benefit, it becomes harder to read and easier to ignore.

Slider Simple

This is a simple slider component that allows users to interact with content smoothly and intuitively. The Monster Slider is designed to enhance user experience by providing an interactive and engaging way to interact with web content. Whether you are developing a simple website or a complex enterprise application, the Monster Slider is designed to improve user interaction and satisfaction.

The default behavior of a slider is always the carousel mode, where the images are displayed one after another. If you want to disable this and have a simple manual slider, the attribute data-monster-option-features-carousel must be set to false.

To prevent the slider from automatically switching through the images, the attribute data-monster-option-features-autoPlay must be set to false. By default, the attribute is set to true.

Thumbnails can also be disabled by setting the attribute data-monster-option-features-thumbnails to false.

Finally, the drag behavior can also be disabled by setting the attribute data-monster-option-features-drag to false.

SLIDE 1

SLIDE 2

SLIDE 3

Javascript

import "@schukai/monster/source/components/layout/slider.mjs";

HTML

<monster-slider style="height:360px"
                data-monster-option-features-carousel="false"
                data-monster-option-features-autoPlay="false"
                data-monster-option-features-thumbnails="false"
                data-monster-option-features-drag="false">
    <div slot="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
             class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
            <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
        </svg>
    </div>
    <div slot="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
             class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
            <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
        </svg>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
    </div>
</monster-slider>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Slider Carousel

In this example, all the default features are enabled. This means that the images automatically cycle, thumbnails are displayed, and drag functionality is enabled. Additionally, the images are shown in carousel mode.

SLIDE 1

SLIDE 2

SLIDE 3

SLIDE 4

Javascript

import "@schukai/monster/source/components/layout/slider.mjs";

HTML

<monster-slider style="height:360px">
    <div slot="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
             class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
            <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
        </svg>
    </div>
    <div slot="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
             class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
            <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
        </svg>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-tertiary-1); color: var(--monster-color-tertiary-1)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 4</div>
    </div>
</monster-slider>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Slider Multiple

In this example, there is a special feature: multiple slides are displayed simultaneously. This can be useful when there is more space available, allowing multiple slides to be shown at once. It enhances the user experience and makes the presentation of content more engaging.

To achieve this, you need to set the option data-monster-option-slides-0. In this example, the option is set to 3, which means 3 slides will be displayed starting from a width of 0px.

If you want to define additional breakpoints, you need to do so using JavaScript. For this, pass an object containing the breakpoints and the corresponding slide values to the slides option.


const slider = document.querySelector('monster-slider');
slider.setOption('slides', {
    0: 1,
    600: 2,
    1200: 3,
    1800: 4
});

SLIDE 1

SLIDE 2

SLIDE 3

SLIDE 4

Javascript

import "@schukai/monster/source/components/layout/slider.mjs";

HTML

<monster-slider style="height:360px"
                data-monster-option-slides-0="3"
>
    <div slot="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
             class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
            <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
        </svg>
    </div>
    <div slot="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
             class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
            <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
        </svg>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
    </div>
    <div class="slide" style=";background-color: var(--monster-bg-color-tertiary-1); color: var(--monster-color-tertiary-1)">
        <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 4</div>
    </div>
</monster-slider>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The Monster Slider component is built using the Shadow DOM to encapsulate its structure and styles. This ensures that its behavior remains consistent and isolated from the rest of the page. The slider supports a variety of features such as autoplay, drag interactions, thumbnails, and a carousel mode for smooth transitions between slides.

Shadow DOM and Accessibility

Thanks to the Shadow DOM, the internal structure of the Monster Slider is protected from external interference. Accessibility features, such as ARIA roles and focus management, ensure that the slider is usable with assistive technologies. Users can navigate through slides using buttons, touch gestures, or keyboard controls, providing an inclusive experience.

Customizing Through Exported Parts

The Monster Slider component exposes specific exported parts for easy customization using CSS. These parts allow developers to modify the appearance of the control panel, slides, navigation buttons, and thumbnail container while maintaining encapsulation.

Available Part Attributes

control: Represents the entire slider container, including slides, navigation buttons, and thumbnails.
slides: Targets the main area where slides are displayed.
prev: Refers to the "Previous" navigation button.
next: Refers to the "Next" navigation button.
thumbnails: Represents the container for thumbnail navigation.

Below is an example of how to style the slider's navigation buttons and slide area using the CSS part selector:


monster-slider::part(control) {
    background-color: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
}

monster-slider::part(slides) {
    transition: transform 0.5s ease;
}

monster-slider::part(prev),
monster-slider::part(next) {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

monster-slider::part(thumbnails) {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

Explanation of the Example

monster-slider::part(control): Styles the entire slider container with a light background and rounded corners.
monster-slider::part(slides): Adds smooth transition effects to slide movements.
monster-slider::part(prev) and next: Customizes the navigation buttons with background and hover effects.
monster-slider::part(thumbnails): Styles the thumbnail container and highlights the current thumbnail with a border.

Accessibility

The Monster Slider is designed with accessibility in mind:

Keyboard Navigation: Users can navigate between slides using the arrow keys.
ARIA Roles: The component provides ARIA roles for slides and navigation buttons to enhance screen reader support.
Focus Management: Focus is managed when interacting with the slider, ensuring a smooth user experience.

With these features, the Monster Slider is usable by all users, including those relying on assistive technologies.

HTML Structure

<monster-slider></monster-slider>

JavaScript Initialization

const element = document.createElement('monster-slider');
document.body.appendChild(element);

Exported

Slider

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

features

object

Features

features.carousel

boolean

true

Carousel feature (infinite looping)

features.autoPlay

boolean

true

Auto play feature

features.thumbnails

boolean

true

Thumbnails feature

features.drag

boolean

true

Drag feature (touch and mouse)

slides

object

Slides configuration, an object with breakpoints and the number of slides to show

slides.0

object

undefined

Number of slides to show at 0px

slides.600 3.109.0

object

undefined

Number of slides to show at 600px

slides.1200 3.109.0

object

undefined

Number of slides to show at 1200px

slides.1800 3.109.0

object

undefined

Number of slides to show at 1800px

carousel

object

Carousel configuration

carousel.transition

number

250

Duration (ms) of the carousel 'jump' animation when looping.

autoPlay

object

Auto play configuration

autoPlay.delay

number

1500

Delay in ms between slide transitions

autoPlay.startDelay

number

1000

Delay in ms before autoplay starts

autoPlay.direction

string

Direction of the autoplay ("next" or "prev")

autoPlay.mouseOverPause

boolean

true

Pause on mouse over

autoPlay.touchPause

boolean

true

Pause on touch

classes

object

undefined

CSS classes

disabled

boolean

false

Disabled state

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

moveTo(index)

Parameters

index {number}: - The slide index to move to.

Returns

{void}

Moves the slider to the given index.

next()

Returns

{void}

Shows the next slide.

previous()

Returns

{void}

Shows the previous slide.

startAutoPlay()

Returns

{void}

Starts the auto play.

stopAutoPlay()

Returns

{void}

Stops the auto play.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Layout.Slider

disconnectedCallback()

Called when the element is removed from the DOM. Cleans up intervals, observers, and event listeners to prevent memory leaks.

Events

The component emits the following events:

monster-slider-resized
Fired when the slider's dimensions change.
monster-slider-moved
Fired when the slider moves to a new slide.

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.