Slider

Provides a responsive, touch-enabled slider or carousel component with features like autoplay, thumbnails, and looping.

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 robust and customizable component designed to enhance user interaction by providing smooth and engaging slide transitions. Whether you are working on a small project or a large-scale application, the Monster Slider can be integrated to improve the presentation of web content in a visually appealing and interactive way.

Key Features

Autoplay: The slider can automatically move between slides, creating a dynamic and engaging experience for users.
Responsive Design: The slider adjusts to different screen sizes, ensuring that users on all devices have a consistent and optimized experience.
Drag and Drop Interaction: Allows users to drag slides for more intuitive interaction, improving usability and engagement.
Customizable Controls: The slider can be customized to include previous and next buttons, thumbnails, and other UI elements to match your design.
Carousel Mode: Supports looping of slides, allowing for infinite scrolling and a seamless presentation of content.
Thumbnails: Add thumbnails for easy navigation between slides, enhancing the user experience.
Accessibility: Fully supports accessibility features to ensure that all users can navigate and interact with the slider efficiently.
Programmatic API: Provides methods for moving to specific slides, starting/stopping autoplay, and more, giving developers full control over the component.

User Experience Enhancements

The Monster Slider is designed to provide a more engaging and interactive user experience by offering smooth transitions and intuitive controls. Its features, such as autoplay, drag interaction, and thumbnail navigation, ensure that users can explore content with minimal effort.

By using the Monster Slider, developers can significantly improve the overall interactivity of their websites, leading to increased user satisfaction and engagement.

Streamlined Development

The Monster Slider is built with ease of integration in mind. It is compatible with standard web technologies like HTML5, CSS, and JavaScript, making it simple to incorporate into any project. Developers can quickly customize its appearance and behavior through configuration options, reducing development time and ensuring consistency across applications.

Whether you are building a small web page or a large enterprise application, the Monster Slider provides a flexible and efficient way to manage and present content interactively.

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

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

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

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.