https://github.com/matthiasmullie/jquery-simple-slideshow
A simple, low-config, jQuery-based slideshow.
https://github.com/matthiasmullie/jquery-simple-slideshow
Last synced: about 1 month ago
JSON representation
A simple, low-config, jQuery-based slideshow.
- Host: GitHub
- URL: https://github.com/matthiasmullie/jquery-simple-slideshow
- Owner: matthiasmullie
- License: mit
- Created: 2013-06-16T11:36:17.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2016-01-25T17:09:00.000Z (over 9 years ago)
- Last Synced: 2025-04-11T17:35:56.974Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 4
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery-simple-slideshow
[](https://www.npmjs.com/package/jquery-simple-slideshow)
[](https://www.npmjs.com/package/jquery-simple-slideshow)
[](https://github.com/matthiasmullie/jquery-simple-slideshow/blob/master/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:
$('#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
});
```
### Example 2
* Image-specific controls
* Image paths tossed in as data-attribute
Looks like:
$('#slideshow').simpleSlideshow({
bindSpecific: $('.controls'), // bind image-specific buttons
});
```
## 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](https://www.npmjs.org/):
```sh
npm install jquery-simple-slideshow
```
Or simply copy jquery.simple.slideshow.js into your project.
## License
jquery-simple-slideshow is [MIT](http://opensource.org/licenses/MIT) licensed.
