Slider JS

@use '@natachah/vanilla-frontend/scss/components/slider';

Syntax

The slider is using the a <div> tag with the class .slider.

Each slide must be a <div> with role="tabpanel" and aria-hidden="true" attributes.

html

<div id="slider" class="slider">
    <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
    <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
    <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
</div>
<button aria-controls="slider" data-slider-prev>previous</button>
<div aria-controls="slider" role="tablist">
    <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
    <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
    <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
</div>
<button aria-controls="slider" data-slider-next>next</button>

css properties

--slider-columns
--slider-gap

js

import Slider from "@natachah/vanilla-frontend/js/_slider"
const slider = document.getElementById('slider')
if (slider) const mySliderObj = new Slider(slider, {loop: true})

Indicators

You can create some indicators with a <div> tag with the aria-controls="IdOfSlider" and role="tablist" attributes.

Inside you must insert each slides indicators as <button> tag with role="tab", aria-controls="IdOfSlide" and aria-selected="false" attributes.

<div aria-controls="slider" role="tablist">
    <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
    <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
    <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
</div>

Navigation

You can create some prev/next navigation with some <button> tag with the aria-controls="IdOfSlider" and data-slider-prev or data-slider-next attributes.

<button aria-controls="slider" data-slider-prev>previous</button>
<button aria-controls="slider" data-slider-next>next</button>

You must add the play and pause <button> if you use the autoplay version of the slider.

<button aria-controls="slider" data-slider-play>play</button>
<button aria-controls="slider" data-slider-pause>pause</button>

Javascript

To work properly the slider required some javascript.

Options

Name	Description	Value
behavior	The scroll behavior inside the slider	smooth as string can be auto, smooth or instant
loop	If set to true, the slider will work as a carousel	false as boolean
autoplay	If set to true, the slider will automatically cycling	false as boolean

new Slider(mySliderDiv, {
    behavior: 'smooth',
    loop: false,
    autoplay: false
})

Methods

Method	Description
goTo(index)	Go to a specific slide by index starting by 0
next()	Go to the next slide
prev()	Go to the previous slide

Events

Event name	Description	Value
slider:changed	This event is fired when the slide has been changed	current as a index number

document.getElementById('mySliderId').addEventListener('slider:changed', (e) => {
    const theCurrentIndexSlide = e.detail.current
})