Skip to content

Latest commit

 

History

History
102 lines (77 loc) · 4.51 KB

README.md

File metadata and controls

102 lines (77 loc) · 4.51 KB
Raw

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.