Sliders

Sliders allow you to create a carousel of elements, usually used to display images or other media elements.

HTML

<section class="mdf-slider" aria-roledescription="carousel" aria-label="Slider preview">
    <div id="slider-items" class="mdf-slider__slides" aria-live="polite">
        <div class="mdf-slider__slide" role="group" aria-roledescription="slide" aria-label="1 of 3">
            <img class="mdf-slider__media" src="1.jpg" alt="Picture #1">
        </div>

        <div class="mdf-slider__slide" role="group" aria-roledescription="slide" aria-label="2 of 3">
            <img class="mdf-slider__media" src="2.jpg" alt="Picture #2">
        </div>

        <div class="mdf-slider__slide" role="group" aria-roledescription="slide" aria-label="3 of 3">
            <img class="mdf-slider__media" src="3.jpg" alt="Picture #3">
        </div>
    </div>

    <button class="mdf-slider__control mdf-slider__control--prev" data-slider-action="prev" aria-controls="slider-items" aria-label="Previous slide">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#arrow-keyboard"></use>
        </svg>
    </button>

    <button class="mdf-slider__control mdf-slider__control--next" data-slider-action="next" aria-controls="slider-items" aria-label="Next slide">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#arrow-keyboard"></use>
        </svg>
    </button>
</section>

Sass

// Include default styles without configuration
@forward '@miraidesigns/slider/styles';

// Configure appearance
@use '@miraidesigns/slider' with (
    $variable: value
);

@include slider.styles();

TypeScript

import { MDFSlider } from '@miraidesigns/slider';

new MDFSlider(document.querySelector('.mdf-slider'));

Implementation

Attributes

Please see the WAI-ARIA page for attributes and best practices regarding carousels.

| Name | Element | Description | | --------------------------- | ---------- | --------------------------------- | | data-slider-action="prev" | <button> | Action to show the previous slide | | data-slider-action="next" | <button> | Action to show the next slide |

Classes

| Name | Type | Description | | ------------------------------ | -------------- | ------------------------------------------------------------------------------------------ | | mdf-slider | Parent | Contains the slider elements | | mdf-slider--is-dragging | Modifier | Changes cursor appearance while dragging a slide | | mdf-slider--has-nav-top | Modifier | Moves the navigation to the top of the slider | | mdf-slider__slides | Parent / Child | Contains the slides. Child to .mdf-slider | | mdf-slider__slide | Parent / Child | Contains any content you want to display for a given slide. Child to .mdf-slider__slides | | mdf-slider__media | Child | Used for images and videos to display correctly. Child to .mdf-slider__slide | | mdf-slider__control | Child | Used to show the previous or next slide. Child to .mdf-slider | | mdf-slider__control--prev | Modifier | Styling for the previous element | | mdf-slider__control--next | Modifier | Styling for the next element | | mdf-slider__nav | Parent / Child | Holds the navigation bullets | | mdf-slider__nav-item | Child | Navigation item element. Added by script based on how many slides we have | | mdf-slider__nav-item--active | Modifier | Styling for the active item element |

Events

| Name | Data | Description | | ------------------- | ------------------------------------ | -------------------------------------------------------------------------------- | | MDFSlider:changed | {index: number, item: HTMLElement} | Fires whenever the active slide changes. Includes the slide itself and its index |

Properties

| Name | Type | Description | | -------------------- | ----------------------- | ----------------------------------------------------- | | .slides | HTMLElement[] | Returns an Array holding all slides | | .slider | HTMLElement | Returns the slider element | | .content | HTMLElement | Returns the slides container element | | .getCurrentSlide() | (): HTMLElement | Returns the active slide | | .getSlide(index) | (number): HTMLElement | Returns the slide with the given index (starts at 0). |

Options

| Name | Type | Default | Description | | ------------------ | ------------ | ------- | ------------------------------------------------------------------------------------------ | | onChange | () => void | null | Function will run whenever the slide changes | | defaultSlide | number | 0 | Index of the first visible slide (starts at 0) | | enableNavigation | boolean | true | Enable slider bullet navigation. Dynamically creates navigation items based on # of slides | | enableSwipe | boolean | true | Enable changing slides by swiping left or right on touch devices | | enableDrag | boolean | true | Enable changing slides by dragging the mouse left or right |