README

dom-slideshow

Examples

Basic
Events

as a module

import DOMSlideshow from 'dom-slideshow';

in browser

Pick dist/dom-slideshow.min.js and place in your HTML:

<script src="path/to/dom-slideshow.min.js"></script>

markup

Make a wrapper <div> with height. Then place DOMSlideShow divs.

<div style="height: 500px">
    <div class="DOMSlideshow">
        <ul class="DOMSlideshow__Inner">

            <li class="DOMSlideshow__Item -zoomin">
                <div class="DOMSlideshow__ItemContent">content 1</div>
                <div class="DOMSlideshow__ItemEffect" style="background-image: url( img/1.jpg );"></div>
            </li>

            <li class="DOMSlideshow__Item -rtol">
                <div class="DOMSlideshow__ItemContent">CONTENT 2</div>
                <div class="DOMSlideshow__ItemEffect" style="background-image: url( img/2.jpg );"></div>
            </li>

            <li class="DOMSlideshow__Item -zoomout">
                <div class="DOMSlideshow__ItemContent">content 3</div>
                <div class="DOMSlideshow__ItemEffect" style="background-image: url( img/3.jpg );"></div>
            </li>

            <li class="DOMSlideshow__Item -ltor">
                <div class="DOMSlideshow__ItemContent">CONTENT 4</div>
                <div class="DOMSlideshow__ItemEffect" style="background-image: url( img/4.jpg );"></div>
            </li>

        </ul>
    </div>
</div>

There are 5 effect types. Set a modifier class to apply.

ClassName	Effect
`-zoomin`	zoom in
`-zoomout`	zoom out
`-rtol`	right to left
`-ltor`	left to right
no class	just fade out

then run it

new DOMSlideshow( document.querySelector( '.DOMSlideshow' ) );

if you dont want to write JS, just set data-dom-slideshow-autostart attribute. See the Basic demo.

events

See the Events demo.

Usage no npm install needed!