Name: slim-slider
Owner: Namshi
Description: Light-weight, Non-jquery and RTL-supported Slider
Created: 2017-02-09 06:38:18.0
Updated: 2018-03-02 15:33:40.0
Pushed: 2018-02-22 11:35:21.0
Size: 408
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
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.
Slider = new SlimSlider({
selector: '.slim-slides',
childsClassName :'.slim-slide',
dir: 'ltr',
showPointers : true,
available options to pass to initialize SlimSlider.
t defaults = {
ming : 400, // Integer: represents the animation value between slides
ildsClassName : '.slim-slide', // String : slider child slides elements
r: 'ltr', // String: Slider direction
reshold: 10, // Integer: refer to hammerjs docs
owButtons:false, // Boolean: show or hide Next / Prev buttons
finite:false, // Boolean: startover when the slider reaches the end.
owPointers : true, // Boolean: show or hide pager pointers.
owThumbnails:true, // Boolean: show or hide Thumbnails.
toPlay: false, // Boolean: Slides will automatically transition.
toPlayTimer: 3000, // Integer: autoplay interval timeout.
emsPerSlide : 1, // Integer: how many item per slide.
data-thumbfor now you can provide thumbs through data attribute, check the demo.
this.goToNext, this.goToPrevious Slider = new Slider({...})
der.goToNext()
der.goToPrevious()
setPan() to temporarly stop the slider.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.
ouselElem.addEventListener('after.slim.slide', (e) => {
console.log(e) // e.details : {current: 2}
;