@miraidesigns/slider NPM

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

mirai designs framework slider

@miraidesigns/base @miraidesigns/button @miraidesigns/fx @miraidesigns/helpers @miraidesigns/theme @miraidesigns/utils

@infinitebrahmanuniverse/nolb-_mir @everything-registry/sub-chunk-607 @zalastax/nolb-_mir

1.0.0

4 years ago