Full Width Responsive Image Slider with JavaScript – Gallry.js

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 );