simple-slider

Extremely lightweight JavaScript carousel micro library

Small size

Very small footprint at under 1.2kb gzipped and minified.

JS centric

Uses the requestAnimationFrame API to perform js animations for each transition, allowing to animate any numeric css property.

UMD Support

Distribution files have UMD support, allowing for usage along with RequireJS, webpack or just plain browser import.

Simple to use

Just import the script and make a call to the initialization function!

<div style="width: 100%; padding-bottom: 25%" data-simple-slider>
	<img src="https://unsplash.it/640/160?random=1"/>
	<img src="https://unsplash.it/640/160?random=2"/>
	<img src="https://unsplash.it/640/160?random=3"/>
</div>
<script src="https://rawgit.com/ruyadorno/simple-slider/master/dist/simpleslider.min.js"></script>
<script>
	simpleslider.getSlider();
</script>

Many options can be used to help you customize your slider. Take a look at all the possible values in the Docs or head to the Examples page to get some inspiration.

Well documented

Extensive documentation on how to customize your slider and control it using an intuitive API.

Tons of ready-to-use examples are also available.

Can I just have an element?

Sure thing! There is an Angular directive and a Web component implementation that just wraps this library into ready-to-use elements for these frameworks. Please visit their specific pages for more info on how to use those.

Free and Open Source

All the code is open source under the MIT license and free for any use.