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.

    Install

    npm i sliderplex

    DownloadsWeekly Downloads

    1

    Version

    1.0.0-beta.4

    License

    MIT

    Last publish

    Collaborators

    • e200