Author: | bwynn |
---|---|
Views Total: | 9,150 views |
Official Page: | Go to website |
Last Update: | December 8, 2015 |
License: | MIT |
Preview:

Description:
Gallry.js is a JavaScript library for building a fully responsive image slider with a subtle sliding effect based on Velocity.js animation engine.
How to use it:
Load the needed Velocity.js JavaScript library from a CDN.
script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
Download and load the gallry.css & gallry.js in the document.
<link rel="stylesheet" href="gallry.css"> <script src="gallry.js"></script>
Create a container for the image slider.
<div id="attach"> </div>
Create a new gallery object.
var gallery = new Gallery(); var slides = []; // slides array stores slide objects
Set element declaration to with element to append gallery to.
var el = document.getElementById("attach");
Add images to the slider.
// addSlide along with slide name, image path, and project array gallery.addSlide("slide1", "1.jpg", slides ); gallery.addSlide("slide2", "2.jpg", slides ); gallery.addSlide("slide3", "3.jpg", slides ); gallery.addSlide("slide4", "4.jpg", slides ); gallery.addSlide("slide5", "5.jpg", slides );
Initialize the image slider.
gallery.init( gallery, slides, el );
Set preferences.
gallery.preferences( 450, "easeInOut", true );