A lightweight JS/CSS Slider with focus on native mobile touch controls
This plugin is still in the works and will need some additional adaptions and features before reaching 1.0.0. Please do NOT use this for production in its current state!!
Either install the npm package via Node.js by running
or clone the repository and use the Slider.min.js from the /dist folder.
ls-slider is initialized by passing the elements and options to a JS class.
For example:
import Slider from "ls-slider";
const slider = document.querySelector(".slider-element");
const options = { infinite: true };
new Slider(slider, options);
Type |
Default |
Description |
Number |
1 |
The amount of slides that should be visible in the slider |
Type |
Default |
Description |
Number |
0 |
The slide index that will initially be displayed |
Type |
Default |
Description |
String |
"" |
A class that will be added to the individual slider elements next to ls-element |
Type |
Default |
Description |
Boolean |
true |
This enables native touch controls, which allow native swiping to switch slides. This setting will only affect touch devices |
Type |
Default |
Description |
Boolean |
false |
Toggle for automatic sliding |
Type |
Default |
Description |
Number |
5000 |
Interval for the automatic sliding in ms |
Type |
Default |
Description |
SlideDirection ("left", "right") |
SlideDirection.Right ("right") |
The direction of the automatic slide |
Type |
Default |
Description |
String |
"" |
<button class="ls-previous-button"></button> |
Type |
Default |
Description |
String |
"" |
<button class="ls-next-button"></button> |
Type |
Default |
Description |
Boolean |
false |
Toggle for infinite styling |
Type |
Default |
Description |
Boolean |
true |
Toggle for indicators |