Absurdly Simple Slider

A really simple javascript slider.

Images used in this project come from Lorem Picsum, which pulls from Unsplash. Thanks to the developers and photographers!

And thanks to RoyalSlider by Dmitry Semenov for being a hugh inspiration for this project and an awesome slider too.

Examples

The examples below show basic usage and configuration of the slider. For the complete source code and documentation, check out the repository.

Default slider

Slider with autoplay and custom options

This slider has captions This slider has bullets This slider has autoplay 

const sliderInstance = new AsSlider("#your-slider-id", {
	// options
	captions: true,
	autoplay: true,
	autoplayDelay: 4000,
	stopAtAction: true, // stops autoplay on user interaction
	bulletsNav: true
})
.init();
				

<div id="your-slider-id">
	<img src="images/800x600.jpg" alt="">
	<div>
		<p>Hello!</p>
	</div>

	<!-- rest of your slides -->
</div>

Slider with captions

Image Description Text from 'alt' attribute

Hello!


<div id="slider-with-captions">
	<img src="images/data-caption-example.jpg" alt="Image Description" data-caption="Text from 'data-caption' attribute">
	<img src="images/701-800x600.jpg" alt="Text from 'alt' attribute">
	<div data-caption="This is a div element with 'data-caption' attribute">
		<p>Hello!</p>
	</div>
</div>
				

const sliderWithCaptions = new AsSlider("#slider-with-captions", {
	captions: true
})
.init();