Author: | bonarja |
---|---|
Views Total: | 735 views |
Official Page: | Go to website |
Last Update: | April 27, 2019 |
License: | MIT |
Preview:

Description:
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 => { // ... });