Skip to content

abizit/stackingslider

Repository files navigation

Stack Slider

JavaScript Stacking and unstacking slider.

Main

dist/
├── stackslider.css
├── stackslider.js 

Getting started

Installation

npm i stack-slider

In browser:

<link  href="/path/to/stackslider.css" rel="stylesheet">
<script src="/path/to/stackslider.js"></script>

Usage

Syntax

var container = document.getElementById('op-container');
new OPSlider(container, 1000); 
  • element

    • Type: HTMLElement
    • The target id of the slider.
  • options

    • Type: Number
    • Transition time in milliseconds

Example

<section id="op-container">
    <div class="op-wrapper">
        <section id="slide-1" class="slide-item">
            {{content}}            
        </section>
        <section id="slide-2" class="slide-item">
            {{content}}            
        </section>
    </div>
</section>
/* Ensure the slider fits perfectly */
 html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

Notes

  • There should atleast be 2 items in the slider.

Browser support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Opera (latest)
  • Edge (latest)
  • Internet Explorer 9+

Contribute

Contribute

License

MIT © Studio Matrix

About

JavaScript Stacking and unstacking slider.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published