Light-weight, Non-jquery and RTL-supported Slider.
Initializing by creating a new
instance, saving it in a variable is optional i'e let slider = new SlimSlider({...})
, but can come in handy as you will see later.
let Slider = new SlimSlider({
selector: '.slim-slides',
childsClassName :'.slim-slide',
dir: 'ltr',
showPointers : true,
})
available options to pass to initialize SlimSlider.
const defaults = {
timing : 400, // Integer: represents the animation value between slides
childsClassName : '.slim-slide', // String : slider child slides elements
dir: 'ltr', // String: Slider direction
threshold: 10, // Integer: refer to hammerjs docs
showButtons:false, // Boolean: show or hide Next / Prev buttons
infinite:false, // Boolean: startover when the slider reaches the end.
showPointers : true, // Boolean: show or hide pager pointers.
showThumbnails:true, // Boolean: show or hide Thumbnails.
autoPlay: false, // Boolean: Slides will automatically transition.
autoPlayTimer: 3000, // Integer: autoplay interval timeout.
itemsPerSlide : 1, // Integer: how many item per slide.
}
for now you can provide thumbs through data attribute, check the demo.
let Slider = new Slider({...})
Slider.goToNext()
Slider.goToPrevious()
A method that disables panning on the slider so another party can take over the control.
i.e: we've been using SlimSlider alongside with PhotoViewJs and we want in some situation to give control to it of Panning, so simply you can setPan(false)
to turn off (without destroying) slider, and setPan(true)
to give control back to it.
after.slim.init
: fires after slider initiation.
after.slim.slide
: fires after each slide.
on the event object, SlimSlider
pushes details wich has current
that tells the current slide number.
carouselElem.addEventListener('after.slim.slide', (e) => {
console.log(e) // e.details : {current: 2}
});
#TODOS
- decouple class naming and functionality.
- Dispatch Events with currentSlide.
- implement the pagination out of the box.
- Image resizing and initalizing to be done internally.
- Minimal Styles.
- Publish it!