mySlider is yet another jQuery slideshow plugin
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitattributes
.gitignore add bower support, update git ignore Oct 22, 2013
LICENSE.txt first commit Jan 11, 2013
README.md
bower.json add bower support, update git ignore Oct 22, 2013
jquery.mySlider.css fix unselectable image Sep 18, 2013
jquery.mySlider.js rename files to camel case Sep 13, 2013
slider-next.png first commit Jan 11, 2013
slider-prev.png

README.md

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;
<div class="slideshow-container">
	<div class="slideshow">
		<div class="slide">
			<img src="slide1.jpg" alt="">
		</div>
		<div class="slide">
			<img src="slide2.jpg" alt="">
		</div>
		<div class="slide">
			<img src="slide3.jpg" alt="">
		</div>
	</div>
</div>

Note: you should be able to use any tag instead of <div> but it depends on your reset styles

Javascript

Just call the plugin on the slideshow element.

$(".slideshow").mySlider();

You can pass the classic JSON to mySlider() with some options. They are quite self explanatory:

{
    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