GRE Image Slider (JS)

Description

This project made especially for making image slider feature easier. By giving a lightweight plugin for developers to customize almost any image slider they want.

Features

Support all browsers and devices.
SEO-Friendly.
Left & Right navigation arrows.
Responsive.
Very simple to setup and configure (no dependencies).
Multiple animations.
Multiple themes.
Full control of colors, sizes themes and animations.
Lightweight (31 KB).

Requirements

Jquery

Get Started

All you need to install this plugin is to include Jquery and gre-slider.min.js, before the closing of body tag of the page (</body>) as shown below:

<script src="js/jquery.js"></script>
<script src="js/gre-slider.min.js"></script>

then we will add our slider code and place it anywhere we want, the stracture of the code should be as following:

<div id="gre-slider">
    <div id="per-gre-slider" data-img="images/golden-gate-bridge.jpg"></div>
    <div id="per-gre-slider" data-img="images/utah.jpg"></div>
    <div id="per-gre-slider" data-img="images/road.jpg"></div>
    <div id="per-gre-slider" data-img="images/sky.jpg"></div>
    <div id="per-gre-slider" data-img="images/dawn.jpg"></div>
</div>

you can add images as you like but you've to change the "data-img" to the image link.

After completing all the previous steps, let's add this code before the end of the body tag of our page as following:

$(document).ready(() => {
	$('#gre-slider').greSlider({
		fullscreen: false,
		width: 700,
		height: 400,
		autoPlay: true
	});
});

Now the slider is ready to run on your page!

Options

You can use the following options as you need:

Option	Type	Default Value	Description
fullscreen	Boolean	true	Let the slider take the full width of the container
width	Int	700	The width of the slider (in pixles). (if fullscreen is true this option will be ignored).
height	Int	500	The height of the slider (in pixles).
borderRadius	Int	3	The border-radius of the slider
animation	String	'fadeIn'	The animation of slider. You can use these animations: (none, fadeIn, slideTop, slideBottom, slideLeft, slideRight, ripple, rotation, theater, slideTheater, triangle).
delay	Int	1000	Time (in millisecons) to wait before changing to the next slide.
dots	Boolean	true	Show the pagination over the slider.
dotsColor	String	'#ccc'	Change the color of pagination.
dotsStyle	String	'circle'	The dot shape style. You can set one of the following: (circle, dash, square)
dotsPosition	String	'bottomLeft'	The position of the pagination of the slider. You can set one of the following: (topLeft, topRight, bottomRight, bottomLeft, middleTop, middleBottom)
selectedDotsColor	String	'#9e9e9e'	Change the color of the current slide dot.
arrowColor	String	'#ccc'	Change the color of left & right arrows.
arrowsPosition	String	'middleSides'	The position of navigation arrows of the slider. You can set one of the following: (topSides, middleSides, bottomSides, topLeft, topRight, bottomLeft, bottomRight)
rippleColor	String	'#FFF'	Change the color of the ripple animation (it will be ignored if your animation is not ripple).
keyboard	Boolean	false	Enable left & right arrows of the keyboard to change the sliders.
autoPlay	Boolean	false	If you set this option to true the slider will start navigating automatically
onLoad	Function	null	You can set a function for this option to let you know when the slider has fully loaded.

Browsers

GRE Slider has been tested on the following browsers:

Google Chrome
Mozilla Firefox
UC Browser

Credits

GRE Slider was made by Ghadeer R. Majeed from GRE Development under MIT License.

gre-dev/gre-slider