Simpleslider-ssjs NPM

Simple Slider

Demo

Overview

npm bundle size

NPM

GitHub commit activity

GitHub all releases

npm

What is Simple Slider

Simple Slider is a basic Vanilla JS carousel

Quick Start

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);

When slide changes, the carousel will trigger the handler function. This event could be usefull when you want to know which slide is seen by user or want to manipulate the DOM.

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);
    }

if you want to manipulate slider from other elements click events etc. this event could be usefull. This event accepts integer and > < strings as a parameter. If you prefer to set true noControl option you can handle next prev and navigation buttons by this method. < means previous slide and > means next slide.

getActiveSlide:

    import { simpleSlider } from 'simpleslider-ssjs';
    
    ... initial code blocks

    console.log(slider.getActiveSlide());

You can get active index with this event

Parameters (options)

Option	Type	Is Parent	Default	Is Needed	Description
container	HTML ELEMENT	✓	null	Yes	This parameter need to be supplied for initialization. This must to be your main slider container
imgList	Array of strings	✓	[]	Only if there is no child element in container or didn't supplied itemList	Img url list
itemList	Array of HTML ELEMENTS	✓	undefined	Only if there is no child element in container or didn't supplied imgList	Html elements array
createCustomControls	Boolean	✓	undefined	No	This is experimental till getting improved not to use is better
noControl	Boolean	✓	undefined	No	For creating yout custom next prev buttons etc. set this to true
controls	Object	✓	{ next: false, prev: false, navigation: false, }	Only needed if createCustomControls is true	This is connected with createCustomControls so same with it
next	HTML ELEMENT	Child of controls	false	Only needed if createCustomControls is true	--
prev	HTML ELEMENT	Child of controls	false	Only needed if createCustomControls is true	--
navigation	HTML ELEMENT	Child of controls	false	Only needed if createCustomControls is true	--
autoPlay	Boolean	✓	true	No	If don't you set it false slides will change in every 4 seconds.
autoPlayDuration	Number	✓	4000	No	If you set the autoplay option to true and prefer to change the autoplay duration you can set this
style	Object	✓	{ boxSizing: 'border-box', border: '1px solid gray', borderRadius: '12px', }	No	This option created for flexibility. You can set every key about css styles and all of them will applied to container element dynamically. For example width height marginTop borderRadius... There are only two things you can not set with this option. 1.) display (flex as default) and 2.) overflow hidden as default
slidePerPage	Number	✓	1	No	How many slides do you want to show to user ?
gap	String or Number	✓	0	No	This is the gap between each slide. This will get applied if slidePerPage option is bigger than 1. You can set it as integer or '1rem' \|\| 12 \|\| "15px". *only px and rem supportted. If it is number then it'll agreed as px*