❤
npm
Sign UpSign In

sliderplex

1.0.0-beta.4 • Public • Published

SliderPlex

A simple and responsive jQuery content slider plugin. See a demo.

Table of contents

Installation

Install it using one of the follow options:

  1. Using Git:

    git clone git://github.com/e200/SliderPlex.git

  2. Using Bower:

    bower install sliderplex

  3. 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: eleandro@inbox.ru.

Credits

License

The SliderPlex is licensed under the MIT license. See License file for more information.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i sliderplex

    Repository

    github.com/e200/SliderPlex

    Homepage

    github.com/e200/SliderPlex

    Weekly Downloads

    0

    Version

    1.0.0-beta.4

    License

    MIT

    Last publish

    Collaborators

    • e200
    Try on RunKit
    Report malware