gre-slider v1.0.0
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 | null | The width of the slider (in pixles). </br(if>(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. |
| selectedDotsColor | String | '#9e9e9e' | Change the color of the current slide dot. |
| arrowColor | String | '#ccc' | Change the color of left & right arrows. |
| 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. |
| theme | String | 'default' | The theme of the slider. You can use the following themes:(default, inlineBottom) |
| autoPlay | Boolean | false | If you set this option to true the slider will start navigating automatically |
| done | 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.
4 years ago