Basic Image Carousel With Pure JavaScript – siema.js

Preview:

Description:

siema.js is a minimal vanilla JavaScript plugin used for generating a basic yet customizable and draggable slider/carousel without any 3rd dependencies.

How to use it:

First you need to load the siema.js in the webpage.

<script src="dist/siema.min.js"></script>

Add a group of html elements to the slider.

<div class="siema mySiema">
  <div><img src="1.jpg"></div>
  <div><img src="2.jpg"></div>
  <div><img src="3.jpg"></div>
</div>

Create a new Siema instance and pass the options as the first parameter to the Siema object like this:

var mySiema = new Siema({
    selector: '.mySiema'
});

Add next/prev controls to the slider.

<button class="btn js-prev">prev</button>
<button class="btn js-next">next</button>

document.querySelector('.js-prev').addEventListener('click', function() {mySiema.prev()});
document.querySelector('.js-next').addEventListener('click', function() {mySiema.next()});

All default options to customize the slider.

// slider selector
selector: '.siema',
// animation duration
duration: 200,
// easuing function
easing: 'ease-out',
// how many slides per page
perPage: 1,
// start index
startIndex: 0,
// enable draggable
draggable: true,
// dragging threshold in pixels.
threshold: 20,
// infinite loop
loop: false,

Changelog:

v1.5.1 (05/31/2018)

• Bug Fixes