Lite Slider

See the README.md for more information.

Example Slider with elements with links

If elements have links then they are focusable so you may want to add tabindex="-1" to the button elements so that a keyboard user doesn't need to tab over them.

Previous Next

Example Slider with pager

To add pager / dot style navigation you just need to add an extra div with the class 'slider-pager'.

This example also includes some styling to place the buttons at either end of teh slider. To get that styling you need to wrap the buttons and slider-inner with a div with a class of slider-button-flex

Previous Next

Example with custom settings

Previous Next

Example with custom settings

Example with custom settings 2

Previous Next

Example Slider where buttons hidden on desktop

In this example the buttons will remain hidden on desktop as there are only four elements in the slider (which all show in the viewport on desktop with the default settings).

Previous Next

Example with 'card' style content