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.