pap

papaslider

Papa Slider - JS Library

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
Package no longer supported. Contact support@npmjs.com for more info.

Readme

Papa slider

A light and simple Javascript slider library ( ~2.5KB size ). This library is still maintained.

Recomended by alt text

Support

Works on IE11, so it works everywhere.

Demo

Live demo

Usage

Install by npm

    npm install papaslider --save

Add HTML elements

    <div class="papa-container">
        <div class="prev"> < </div> <!-- If you add type: 'self' - changing slides by arrows -->
        <div class="papa-item"></div>
        <div class="papa-item"></div>
        <div class="papa-item"></div>
        <div class="papa-item"></div>
        <div class="papa-item"></div>
        <div class="next"> > </div> <!-- If you add type: 'self' - changing slides by arrows -->
    </div>

Include Papa Slider's code in your HTML at the end of body tag

    <script src="dist_folder/papa-slide.min.js"></script>

Call the plugin in your main.js file ( every option has default value more in table )

    document.addEventListener("DOMContentLoaded", function() {
        let papa = new PapaSlider({
            container: 'papa-container',
            items: 'papa-item',
            timeInterval: '3000',
            animationType: 'fade',
            type: 'auto',
        });
    });

Styling

You can find default css styles in papaslider folder.

Settings

OptionTypeDefaultDescription
containerstringpapa-containerYour container class name.
itemsstringpapa-itemYour item class name.
timeIntervalstring3000After this time, the next slide appears. Pass the string in miliseconds.
animationTypestringfadeOptions are: 1) 'fade' - works like fadeIn / fadeOut. 2) 'slide' - works like slide to left.
typestringautoOptions are: 1) 'auto' - automatically changes the slide. 2) 'self' - The slide is changed by the arrows.

License

MIT License

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
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial