Author: | pawelgrzybe |
---|---|
Views Total: | 4,465 views |
Official Page: | Go to website |
Last Update: | May 31, 2018 |
License: | MIT |
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
how to remove left and right button if there are no items inside carousel
you are the best.. thank you!!!!!