Easy Carousel With Promises – SlidePage.js

SlidePage.js is a pure JavaScript carousel library to infinitely slides through a series of HTML elements with Promises support.

How to use it:

Just load the minified version of the SlidePage.js library and we’ re ready to go.

<script src="./slidepage.min.js"></script>

Insert slides to the carousel.

<div class="myCarousel">
  <div class="sp_page">Page 1</div>
  <div class="sp_page">Page 2</div>
  <div class="sp_page">Page 3</div>
</div>

Initialize the carousel by calling the function on the top container.

var instance = new SLIDEPAGE({
    el: ".myCarousel"
});

API methods.

// back to the previous slide
instance.prev();
// go to the next slide
instance.next();
// go to a specific slide
instance.go(index);
// show a specific slide
instance.show(index);

Enable/disable the infinite looping. Default: false.

var instance = new SLIDEPAGE({
    el: ".myCarousel",
    repeat: true
});

Set the direction. Default: x (horizontal).

var instance = new SLIDEPAGE({
    el: ".myCarousel",
    direction: "y"
});

Set the transition speed in milliseconds. Default: 300ms.

var instance = new SLIDEPAGE({
    el: ".myCarousel",
    transition: 500
});

Force the original direction when reaching the last slide. Default: true.

var instance = new SLIDEPAGE({
    el: ".myCarousel",
    forceDirection: false
});

Set the index of slides. True: index 1 = slide 1.

var instance = new SLIDEPAGE({
    el: ".myCarousel",
    realNumber: true
});

Set the display property of slides.

var instance = new SLIDEPAGE({
    el: ".myCarousel",
    display: "block"
});

Promises.

myInstance.go(2).then(data => {
  // ...
});