@kilokilo/ewz-slider
v2.1.0
Published
## HTML ```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="vi
Downloads
26
Readme
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
}
Options
- dots: HTMLElement[]
- useWheel: boolean
- autoEnable: boolean
- callback: (id: string) => void
- itemActiveClass: string
- dotActiveClass: string
Copyright © 2019 KiloKilo GmbH