Git Product home page Git Product logo

slideshow-js's Introduction

TODO

  • Need to add demo and examples. Please get in touch to know the usage.

SlideshowJS

A utility to create slideshows out of any sequence of HTML elements
It works by using javascript to transition each element smoothly (60fps) from display: none to display: block

To setup slideshow on your HTML, the following config needs to be set on the DOM elements

Assumptions:

Given a root element, the slideshow will include *all* siblings in slideshow until it encounters, data-slide-end='true'

HTML Config:

`data-ns-slide=true` - Indicates that the element is a participant in slideshow, note that
                     all of the elements with this attribute will have their display CSS property set to none;
                     It can cause some unintended side-effect, for example if used in conjunction with
                     `data-start-slide-show`
`data-auto-schedule=true`  - Signifies that the HTML element will appear on screen for some time and automatically
                          transition to next sibling.
`data-step-into=CSSSelector`  - Signifies that the element's children (that qualify the CSS Selector specified)
                               will be shown one at a time before moving on to next element. (Can be nested)
`data-slide-end=true`  - Signifies end of slideshow
`data-start-slide-show=true`  - This element will be considered the starting element of slideshow if no argument is passed to
                              QPSlideshow constructor.

Events:

Emits the following custom events to indicate status of the slideshow

`ns-slide-show-next` - When a transition from one slide to another is complete
`ns-slide-show-end` - When slideshow ends

slideshow-js's People

Contributors

s4san avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.