siema.js is a lightweight carousel plugin (only 3KB) with no dependencies or design. It is free to use on personal and commercial projects.

Browser support

• IE10
• Chrome 12
• Firefox 16
• Opera 15
• Safari 5.1
• Android Browser 4.0
• iOS Safari 6.0

How to make use of it:

1. First, you need to load siema.js into the web page.

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

2. Add a bunch 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>

3. 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'
});

4. Add next/previous 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()});

5. All default options for customizing 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,

Other implementations

• Angular version by Lex Zhukov
• React version by Mantas Kaveckas
• Vue version by Carlos Nogueira
• Siema-rails by Naggi Goishi

image carousel with pure javascript, siema Plugin/Github

See Demo And Download

Official Website(pawelgrzybek): Click Here

This superior jQuery/javascript plugin is developed by pawelgrzybek. For extra advanced usage, please go to the official website.