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!!
Pre-release To-Do's
fix indicator scroll animation
fix infinite scroll on mobile
fix initial slide position when infinite are active
add visible slides functionality
consider accessibility (might be done after initial release)
code cleanup
Post-release To-Do's
add lazy loading
Setup
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);
Options
visibleSlides
Type
Default
Description
Number
1
The amount of slides that should be visible in the slider
startingIndex
Type
Default
Description
Number
0
The slide index that will initially be displayed
sliderElementClass
Type
Default
Description
String
""
A class that will be added to the individual slider elements next to ls-element
touchControls
Type
Default
Description
Boolean
true
This enables native touch controls, which allow native swiping to switch slides. This setting will only affect touch devices