Papaslider NPM

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

Option	Type	Default	Description
container	string	papa-container	Your container class name.
items	string	papa-item	Your item class name.
timeInterval	string	3000	After this time, the next slide appears. Pass the string in miliseconds.
animationType	string	fade	Options are: 1) 'fade' - works like fadeIn / fadeOut. 2) 'slide' - works like slide to left.
type	string	auto	Options are: 1) 'auto' - automatically changes the slide. 2) 'self' - The slide is changed by the arrows.