SliderPlex
A simple and responsive jQuery content slider plugin. See a demo.
Table of contents
Installation
Install it using one of the follow options:
-
Using Git:
git clone git://github.com/e200/SliderPlex.git
-
Using Bower:
bower install sliderplex
-
Using npm:
npm install sliderplex
in a terminal/prompt in your project folder, then add jQuery and SliderPlex files (CSS & JavaScript) to your page:
<head> <link rel="stylesheet" href="src/css/SliderPlex.min.css"> <!-- jQuery must be before SliderPlex --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="src/SliderPlex.min.js"></script> </head>Usage
First, setup your slider structure:
<div id="slider"> <ul> <li><img src="images/slides1.jpg"></li> <li><img src="images/slides2.jpg"></li> <li><img src="images/slides3.jpg"></li> <li><img src="images/slides4.jpg"></li> <li><img src="images/slides5.jpg"></li> </ul> </div>Sets how many slides you want. Then, initialize the SliderPlex before the body close tag:
<script> $('#slider').SliderPlex(); </script>Full usage code:
<!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SliderPlex example</title> <link rel="stylesheet" href="src/css/SliderPlex.min.css"> !-- jQuery must be before SliderPlex --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="src/SliderPlex.min.js"></script> </head> <body> <div id="slider"> <ul> <li><img src="images/slides1.jpg"></li> <li><img src="images/slides2.jpg"></li> <li><img src="images/slides3.jpg"></li> <li><img src="images/slides4.jpg"></li> <li><img src="images/slides5.jpg"></li> </ul> </div> <script> $('#slider').SliderPlex(); </script> </body> </html>And... That's it!!! :)
Options
You can pass an object containing options to the SliderPlex initialization method:
$('.slider').SliderPlex({ autoPlay: false, animation: 'fade' });Available options:
autoPlay | default: true slideInterval | default: 8 (sec) animation | default: 'fade' [fade, zoom, slide] animationTime | default: .5 (sec) direction | default: 'right' arrows | default: true nonFocusArrows | default: false pauseOnMouseOver | default: false pauseOnMouseDown | default: true fillSpace | default: true Contributing
To contribute, please, read contributing.
Bugs
Please, open an issue, or report to: [email protected].
Credits
- Eleandro Duzentos and contributors.
License
The SliderPlex is licensed under the MIT license. See License file for more information.
