Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stefanotorresi/myslider
mySlider is yet another jQuery slideshow plugin
https://github.com/stefanotorresi/myslider
Last synced: 18 days ago
JSON representation
mySlider is yet another jQuery slideshow plugin
- Host: GitHub
- URL: https://github.com/stefanotorresi/myslider
- Owner: stefanotorresi
- License: mit
- Created: 2013-01-11T15:32:37.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-04-07T17:01:12.000Z (over 9 years ago)
- Last Synced: 2024-10-03T16:23:46.661Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 203 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
mySlider
===
Description
---
**mySlider** is yet another jQuery slideshow plugin, initially designed to slide through absolutely positioned widescreen background images inside a fixed height HTML block, and then readapted to also fit responsive layouts.
Requirements
---
* jQuery 1.8.3 (it most likely works on older versions but I haven't tested it)
Usage
---
### HTML
1. Add `slideshow-container` class to the block you want to add the slideshow to.
2. Append a child with `slideshow` class to the block.
3. Put your slides blocks ( default class is `slide` ) inside the `slideshow` block;
```html
```
*Note: you should be able to use any tag instead of `
` but it depends on your reset styles*
### Javascript
Just call the plugin on the `slideshow` element.
```javascript
$(".slideshow").mySlider();
```
You can pass the classic JSON to `mySlider()` with some options.
They are quite self explanatory:
```javascript
{
interval: 5000,
speed: 1000,
slideSelector: '.slide',
autoStart: true,
controls: true,
fadeControls: true,
pauseOnHover: false,
pager: true
}
```
### Using the slideshow as a background
You can append/prepend any content inside the `slideshow-container` element and absolutely position it to make the `slideshow` block behave as an animated background.
### Examples
http://jsfiddle.net/bUUmX/
Copyright and license
--
Copyright 2013 Stefano Torresi
Released under the MIT license. You can find a copy of this license in LICENSE.txt or at:
http://opensource.org/licenses/MIT
Credits
--
Most of the code is inspired by [Twitter Bootstrap's Carousel](http://twitter.github.com/bootstrap/javascript.html#carousel)