sli

sliderplex

A simple and responsive jQuery content slider plugin

Showing:

Popularity

Downloads/wk

0

GitHub Stars

6

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100