sliderplex
v1.0.0-beta.4
Published
A simple and responsive jQuery content slider plugin
Downloads
12
Maintainers
e200Readme
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: trueContributing
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.