@miraidesigns/slider

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