Slippity
A lightweight and simple jQuery slider/carousel plugin built with developers in mind and made to be extended.
Setup
Javascript
$("#some-slider").slippity();HTML
<div id="some-slider" class="slider"> <a class="left arrow"></a><a class="right arrow"></a> <div class="slide active"> <!-- Some Content --> </div> <div class="slide"> <!-- Some Content --> </div> <div class="slide"> <!-- Some Content --> </div> </div>CSS
.slider { overflow: visible !important; /* Have to add this due to jQuery adding overflow:hidden */ position: relative; } .slider .slide { display: none; opacity: 0; position: absolute; top: 0; width: 100%; } .slider .slide.active { display: block; opacity: 1; } .slider .arrow { background: url(slider-arrows.png) no-repeat; cursor: pointer; display: block; margin-top: -50px; position: absolute; top: 50%; width: 50px; height: 100px; z-index: 100; } .slider .arrow.left { left: 20px; } .slider .arrow.right { right: 20px; background-position: -50px 0; } .slider .dots { position: absolute; bottom: -35px; text-align: center; width: 100%; } .slider .dots a { background: #000; border-radius: 4em; display: inline-block; margin: 0 10px; opacity: 0.6; text-indent: -9999px; width: 15px; height: 15px; } .slider .dots a.active, .slider .dots a:hover { opacity: 1; }Options
| Name | Description | Type | Default |
|---|---|---|---|
arrowClass | The class name of the next/ previous slider arrow buttons. | String | ".arrow" |
slideClass | The class name of the actual slides in the slider container. | String | ".slide" |
dynamicHeight | Set whether or not the plugin will adjust the height of slider container based on what's inside. | Boolean | true |
animationTime | The time it takes for the slider to animate in/out from the left or right. | Integer or String | 500 |
start | Callback for when the slider starts sliding. | Function | none |
end | Callback for when the slider is finished animating/sliding | Function | none |
