jquery-simple-slideshow

This is a simple jQuery-based slideshow. It will not require a pre-defined complex HTML structure. All that is needed is for 1 original to be added to the HTML. 2 Clones will be created at exactly the place of the original image, and will start iterating the images according to the desired config.

Usage

Example 1

• 10 second display time
• 1 second fade time
• previous & next buttons
• 3 images, all clickable to 3 links
• random images

Looks like:

<img id="slideshow" src="path/to/initial/file.jpg" />
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>

<script src="jquery.min.js" /> <!-- path to jQuery -->
<script src="jquery.simple.slideshow.js" /> <!-- path to slideshow script -->
<script>
	$('#slideshow').simpleSlideshow({
		fadeTime: 10000,
		fadeSpeed: 1000,
		bindPrevious: $('#prev'), // bind button to previous image
		bindNext: $('#next'), // bind button to next image
		images: [
			'path/to/initial/file.jpg',
			'path/to/second/file.jpg',
			'path/to/another/file.jpg',
		],
		links: [
			'http://www.mullie.eu',
			'http://www.twitter.com/matthiasmullie',
			'http://www.linkedin.com/in/matthiasmullie',
		],
		random: true
	});
</script>

Example 2

• Image-specific controls
• Image paths tossed in as data-attribute

Looks like:

<img id="slideshow" src="path/to/initial/file.jpg" data-images="path/to/initial/file.jpg,path/to/second/file.jpg,path/to/another/file.jpg" />
<a href="#" class="controls">1</a>
<a href="#" class="controls">2</a>
<a href="#" class="controls">3</a>

<script src="jquery.min.js" /> <!-- path to jQuery -->
<script src="jquery.simple.slideshow.js" /> <!-- path to slideshow script -->
<script>
	$('#slideshow').simpleSlideshow({
		bindSpecific: $('.controls'), // bind image-specific buttons
	});
</script>

Options

Options can be passed in as a { key: value } object literal. Available options are:

property	default value	description
fadeTime	5000	The duration for which an image will be displayed, in milliseconds
fadeSpeed	'normal'	The animation time during which the image will fade out, in milliseconds
bindPrevious		jQuery element(s) that, when clicked, should display the previous image
bindNext		jQuery element(s) that, when clicked, should display the next image
bindSpecific		jQuery element(s) that, when clicked, should display a specific image. First element will be bound to first image, second element to second image, ...
images		Array of paths for image to be displayed. Paths can also be defined via the slideshow element's data-images attribute
links		Optional array of links to make images clickable, tied by index to the array of images. Paths can also be defined via the slideshow element's data-links attribute
random	false	Randomize the images' display order

Installation

Install this package via npm:

npm install jquery-simple-slideshow

Or simply copy jquery.simple.slideshow.js into your project.

License

jquery-simple-slideshow is MIT licensed.