A simple, low-config, jQuery-based slideshow.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.jshintrc
LICENSE
README.md
bower.json
jquery.simple.slideshow.js
package.json

README.md

jquery-simple-slideshow

Latest version Downloads total License

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.