Slideshow Demo

Create a background slideshow by using the following options:


					var slideshowEl = document.querySelector('.slideshow');
					Slideshow(slideshowEl, {
					allowSwipe: false,
					autoplay: true,
		  		navArrows: false,
		  		transitionTime: 800
		  		});

Then style the slideshow to your specifications.

This page is meant to showcase a few working examples of the Slideshow library. For documentation please reference the readme on Github

Example with nav arrows and indicators placed below the slideshow/carousel.


					var slideshowEl = document.querySelector('.slideshow');
					Slideshow(slideshowEl, {
					controlsBelow: true,
					showIndicators: true,
		  		transitionEffect: "slide"
		  		});

Users can navigate to different slides by:

Using the arrow navigation buttons
Clicking the indicator buttons on the lower right
Swiping the slide left or right

By default the nav arrows are not displayed below the slides but rather directly on top of the slides. The example below also showcases what happens when the loopSlides setting is set to true.


					var slideshowEl = document.querySelector('.slideshow');
					Slideshow(slideshowEl, {
		  		loopSlides: true,
					showIndicators: true,
		  		transitionEffect: "slide"
		  		});

When showIndicators is set to true and there are enough slides that the 'dot' indicators would overflow, an input indicator will be shown instead. To navigate to a specific slide simply enter the slide number you want to view in the input field and then unfocus the field.


					var slideshowEl = document.querySelector('.slideshow');
					Slideshow(slideshowEl, {
					autoplay: true,
					controlsBelow: true,
					pauseOnUserNav: true,
					playButton: true,
					showIndicators: true,
		  		transitionEffect: "slide"
		  		});