Lightweight And Simple Carousel In Pure JavaScript | siema.js

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>

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() {});

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

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.