yomotsu / dom-slideshow

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.