Basic Image Carousel With Pure JavaScript – siema.js

Category: Javascript , Slider | December 6, 2016
Author: pawelgrzybe
Views Total: 247
Official Page: Go to website
Last Update: December 6, 2016
License: MIT

Preview:

Basic Image Carousel With Pure JavaScript – siema.js

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,