Simple Slider

Demo

Overview

npm bundle size

NPM

GitHub commit activity

GitHub all releases

npm

What is Simple Slider

First install the package

npm i simpleslider-ssjs

Then go to example.html and browse example.

As an alternative you can browse React Example

Getting started

    
        <html>
            <head>
            </head>
            <body>
                <div id="mySlider">
                    place your elements here..
                </div>
                <script type="module">
                    import { simpleSlider } from 'simpleslider-ssjs';
                    const options = {
                        ... specialize the options or you can prefer to use defaults
                        .. you can see the all options on  #Parameters section
                    }

                    const SimpleSlider = simpleSlider.init(options);
                </script>
            </body>
        </html>

That's all. Now you can manipulate simpleSlider by using your SimleSlider constant.

Events

on:

    
        const handler = (index) => { 
            console.log('active slide is:', index+1); 
        }

        slider.on('changed', handler);

IMPORTANT NOTE: If you set more than 1 slide per page in options this event will return only the first slide's index which seen by user

Methods

init:

this is the most basic method to initialize your container element

           import { simpleSlider } from 'simpleslider-ssjs';
            simpleSlider.init(options)

goToSlide:

            import { simpleSlider } from 'simpleslider-ssjs';
       
           ...initial code blocks
       
           const nextButtonHandler = () => { 
               slider.goToSlide('>');
           }
       
           const previousButtonHandler = () => { 
               slider.goToSlide('<');
           }
           
           const navigationButtonHandler = (index) => { 
               slider.goToSlide(index);
           }

getActiveSlide:

    
        ... initial code blocks

        console.log(slider.getActiveSlide());