@kilokilo/ewz-slider NPM

ewz-slider

HTML

        <div class="video-list__items js-slider-container">
            <div class="video-list__items-track js-slider-track">
                <div class="video-list__item js-slider-item" data-id="id-1"></div>
                <div class="video-list__item js-slider-item" data-id="id-2"></div>
                <div class="video-list__item js-slider-item" data-id="id-3"></div>
                <div class="video-list__item js-slider-item" data-id="id-4"></div>
                <div class="video-list__item js-slider-item" data-id="id-5"></div>
                <div class="video-list__item js-slider-item" data-id="id-6"></div>
                <div class="video-list__item js-slider-item" data-id="id-7"></div>
            </div>
            <div class="video-list__stepper">
                <div class="video-list__step js-slider-dot"></div>
                <div class="video-list__step js-slider-dot"></div>
                <div class="video-list__step js-slider-dot"></div>
                <div class="video-list__step js-slider-dot"></div>
                <div class="video-list__step js-slider-dot"></div>
                <div class="video-list__step js-slider-dot"></div>
                <div class="video-list__step js-slider-dot"></div>
            </div>
        </div>

JavaScript

    const container = document.querySelector('.js-slider-container')
    const track = container.querySelector('.js-slider-track')
    const dots = [...container.querySelectorAll('.js-slider-dot')]

    const slider = new Slider(container, track, {dots, useWheel: true, callback: onClick})

    onResize()
    requestAnimationFrame(update)

    function onResize() {
        slider.onResize()
    }

    function update(time) {
        requestAnimationFrame(update)
        TWEEN.update(time)
        slider.update(time)
    }

    function onClick(id) {
        //DO something
    }