@webhandle/shiner

A slideshow plugin. It takes a set of slides and changes the classes on them, visible and invisible. It updates the classes on "dots" as well, adding current to the current dot. If a dot is clicked on, that slide will be moved to. It will even create dots if none exist.

It listens for clicks on next and previous buttons. It also listens for swipes.

The slides will auto advance is "run" is called.

Unlike other sorts of components that extend @webhandle/backbone-view, the render function does not create the html, it mearly attaches to existing html.

After rendering, the transitions-on class is added to the root element.

Install

npm install @webhandle/shiner

Usage

On the server side:

import setupShiner from "@webhandle/shiner/initialize-webhandle-component.mjs"
await setupShiner(webhandle)

On the client side:

The HTML is expected to be something like the following. Each slide can be whatever you want with whatever you want inside.

<div class="shiner-show">
	<div class="slides">
		<div class="slide" >
		</div>

		<div class="slide" >

		</div>

		<div class="slide" >

		</div>

		<div class="slide" data-delay="1000">
		</div>

		<div class="advance">
			&gt;
		</div>
		<div class="previous">
			&lt;
		</div>
	</div>
	<div class="dots">

	</div>
</div>

Including these styles will make it immediately functional, but likely your styling will be different.

<link rel="stylesheet" href="/@webhandle/shiner/files/css/shiner.css">

On the page itself the code must be called.

	<script type="module">
		import { Shiner } from "@webhandle/shiner"
		let shinerShows = document.querySelectorAll('.shiner-show')
		shinerShows.forEach(show => {
			let shiner = new Shiner({
				el: show
			})
			shiner.render()
			shiner.run()
		})
	</script>