YurbaSlider

<link rel="stylesheet" href="/dist/yurba-slider.min.css">
<script src="/dist/yurba-slider.min.js"></script>

Give the slider the element whose children are the slides. It keeps its own classes and gap, and is wrapped in .y-slider.

<div class="cards">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
</div>

const slider = new YurbaSlider('.cards', {
    slidesPerView: 3,
    spaceBetween: 16,
    loop: true,
})

slider.on('change', (index) => console.log('now at', index))

Slides added to the element later are picked up by themselves. A second slider on the same element destroys the first one.

With native: true the row scrolls natively: the browser's own swipe on touch, plus mouse drag and snapping. Best for long rows such as stories, shelves and tabs. The arrows step by a page.

new YurbaSlider(row, { native: true, snap: false, prevLabel: 'Back', nextLabel: 'Next' })

Keys are minimum window widths. Every breakpoint the window has passed is applied on top of the base options.

new YurbaSlider('.cards', {
    slidesPerView: 1,
    breakpoints: {
        600: { slidesPerView: 2, slidesPerGroup: 2 },
        900: { slidesPerView: 3, slidesPerGroup: 3 },
    },
})

One, two or three in view by the window width, a whole group per step.

Centred slides in an endless loop, moving every 3 seconds. Hover to pause.

No snapping: a flick glides on and slows down.

With arrows: true the slider draws its own arrows over the slides, shown on hover and hidden at the ends and on touch screens. To use your own buttons, pass them as elements or selectors: they get disabled at the ends. arrows: false leaves them out.

new YurbaSlider('.cards', {
    arrows: { prev: '.cards-prev', next: '.cards-next' },
})

An element or a selector gives dots. An object picks the type.

new YurbaSlider('.cards', {
    pagination: { el: '.cards-pages', type: 'fraction' },
})

slider.next()
slider.prev()
slider.goTo(4)
slider.goToPage(2)
slider.goTo(0, 0)

speed is in ms; 0 moves at once.

The slider of an element, or null.

YurbaSlider.get('.cards')?.next()

Subscribe with on(name, handler), or pass handlers in the on option. off(name, handler?) removes them. Every handler gets the slider as its last argument.

progress runs from 0 at the first step to 1 at the last one, frame by frame.

slider.on('move', (progress) => {
    bar.style.transform = `scaleX(${progress})`
})

velocity is in pixels per millisecond, positive forward.

slider.on('dragStart', () => video.pause())
slider.on('dragEnd', (velocity) => console.log(velocity))

The built-in arrows take any HTML: an icon font, an SVG, an image. By default they are chevron_left and chevron_right from Material Symbols Rounded, which the page loads itself. Keys left out keep the default.

new YurbaSlider('.cards', {
    icons: {
        prev: '<span class="material-symbols-rounded">arrow_back</span>',
        next: '<svg viewBox="0 0 24 24" width="20" height="20"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
    },
})

Your own buttons passed in arrows keep their own content.

Accessible names, English by default. {index} and {total} are filled in.

new YurbaSlider('.cards', {
    labels: {
        prev: 'Назад',
        next: 'Далі',
        carousel: 'Новини',
        slide: '{index} з {total}',
        page: 'До слайда {index}',
    },
})

With reduced motion on, moves are instant and autoplay is off.