Lumens

Tiny vanilla JavaScript carousel

Lumens is a lightweight JavaScript slideshow which works without any dependencies like JQuery or other bloated libraries. It doesn't rely on a own CSS so you have nothing messing with your personal styling.

Lumens was built for developers. It doesn't add any navigation or pagination but gives you all the tools to add them yourself. This way you have full control over what happens, and when it does so.

Normal slider

A very basic slider, with no configuration. It doesn't get more simple than that. Just drag the slider to... well, slide.

var defaultslider = new Lumens(".defaultslider")

Infinite Loop

Swipe me as long as you want, you'll never reach an end.

var infiniteslider	= new Lumens(".infiniteslider", {
	infinite: true
})

Autoplay

Will change slides in a configurable interval. When dragging the interval will be paused. (duh)

var autoplay = new Lumens(".autoplay", {
	autoplay: 2500
})

Prevent click

In this example the slides contain a Link. If you drag them, the click will not be triggered.

I'm a link
but actually
the proper term
is anchor
var preventclick = new Lumens(".preventclick", {
	preventClickDistance: 50
})

Responsive

Using the "responsive"-Options you can define different settings for different screensizes.

var responsiveslider = new Lumens(".responsiveslider", {
	slidesPerPage: 2,
	margin: 10,
	responsive: [
		{
			breakpoint: 1024,
			settings: {
				slidesPerPage: 1
			}
		}
	]
})

Callbacks

Lumens provides you with callback functions for changing slides or changing the breakpoints during resizing.

Try swiping to trigger a callback.

 

var callbackslider = new Lumens(".callbackslider")

callbackslider.beforeChange(() => {
	//SLIDE CHANGE BEGAN
})

callbackslider.afterChange(() => {
	//SLIDE CHANGED
})

There are also a couple of other callbacks which you can use to further customize Lumens. Check out the complete list below:

beforeChange

This will be called when a change in the slideshow occured, but the animation is not yet finisehd.

afterChange

This will be called when a change in the slideshow occured, and the animation has finisehd.

beforeDragging

This will be called as soon as the user attempts to drag the slideshow. (aka "holds the mouse down")

dragging

This will be called when the user drags the Slideshow around

afterDragging

This will be called when the user releases the mouse or finger on the slideshow and stops dragging

changeBreakpoint

This will be called when the user resizes the screen so that the slideshow reaches a new breakpoint and changes it's settings.

Functions

Use the given functions to control slideshow just as you want it to

apislider = new Lumens(".apislider", {
	draggable: false
})

document.getElementById("next").addEventListener("click", () => {
	apislider.gotoNext()
})

document.getElementById("prev").addEventListener("click", () => {
	apislider.gotoPrev()
})

Arrow-keys

You can also configure the slideshow to be swipeable using the arrow-keys.

var arrowslider = new Lumens(".arrowslider", {
	arrowControls: true
})

Variable slidewidth

If you don't want to have fixed widths in your slides. Lumens can take care of that aswell

var keepsize = new Lumens(".keepsize", {
	keepSlideSize: true
})

Free Scroll

Lumens can also be used as a horizontal srollbar, just use the options freeScroll and keepSlideSize combined.

var freescroll = new Lumens(".freescroll", {
	keepSlideSize: true,
	freeScroll: true
})