Responsive & Scalable jQuery Slider Carousel Plugin - Skate

Skate is a responsive, touch-enabled, flexible jQuery slider plugin for creating an image slideshow/carousel/rotator with ease.

More features:

• 3 Animation types: slide, cards, crossfade.
• Autoplay on page loaded.
• CSS3 transitions supported.
• Keyboard/touch controls.
• Dots/left/right navigation.
• Supports any html elements not just images.
• Auto resizes the container to fit the slide.
• Callback events supported, of course.

Basic Usage:

1. Include the required jQuery Skate's CSS in the header.

<link rel="stylesheet" href="css/skate.css">

2. Create the html.

<section class="my-skate-container crossfade-animation">
<ul class="skate skate-css" data-skate="crossfade">
<li id="slide-b-1"> <a href="javascript:alert('Link 1!');void(0);">
<div>
<div>
<h1>Node 1</h1>
</div>
</div>
</a>
<nav>
<ul class="skate-next-prev">
<li><a href="#slide-b-5" class="skate-prev" title="Previous">❬</a></li>
<li><a href="#slide-b-2" class="skate-next" title="Next">❭</a></li>
</ul>
</nav>
</li>
<li id="slide-b-2"> <a href="javascript:alert('Link 1!');void(0);">
<div>
<div>
<h1>Node 2</h1>
</div>
</div>
</a>
<nav>
<ul class="skate-next-prev">
<li><a href="#slide-b-1" class="skate-prev" title="Previous">❬</a></li>
<li><a href="#slide-b-3" class="skate-next" title="Next">❭</a></li>
</ul>
</nav>
</li>
<li id="slide-b-3"> <a href="javascript:alert('Link 2!');void(0);">
<div>
<div>
<h1>Node 3</h1>
</div>
</div>
</a>
<nav>
<ul class="skate-next-prev">
<li><a href="#slide-b-2" class="skate-prev" title="Previous">❬</a></li>
<li><a href="#slide-b-4" class="skate-next" title="Next">❭</a></li>
</ul>
</nav>
</li>
<li id="slide-b-4">
<div>
<div>
<h1>Node 4</h1>
</div>
</div>
<nav>
<ul class="skate-next-prev">
<li><a href="#slide-b-3" class="skate-prev" title="Previous">❬</a></li>
<li><a href="#slide-b-5" class="skate-next" title="Next">❭</a></li>
</ul>
</nav>
</li>
<li id="slide-b-5">
<div>
<div>
<h1>Node 5</h1>
</div>
</div>
<nav>
<ul class="skate-next-prev">
<li><a href="#slide-b-4" class="skate-prev" title="Previous">❬</a></li>
<li><a href="#slide-b-1" class="skate-next" title="Next">❭</a></li>
</ul>
</nav>
</li>
</ul>
<nav>
<ul class="skate-slide-navigation">
<li><a href="#slide-b-1" title="Go To Slide 1">●</a></li>
<li><a href="#slide-b-2" title="Go To Slide 2">●</a></li>
<li><a href="#slide-b-3" title="Go To Slide 3">●</a></li>
<li><a href="#slide-b-4" title="Go To Slide 4">●</a></li>
<li><a href="#slide-b-5" title="Go To Slide 5">●</a></li>
</ul>
</nav>
</section>

3. Custom CSS to style the slider.

/* Required to set a height and width. */
.my-skate-container .skate {
height: 500px;
width: 100%;
}
/* Custom classes to make it all look right. */

.my-skate-container {
margin-bottom: 20px;
}
.my-skate-container .skate {
background: #000;
}
.my-skate-container > ul > li > a {
display: block;
height: 100%;
width: 100%;
}
.my-skate-container > ul > li > div, .my-skate-container > ul > li > a > div {
display: table;
color: rgb(243, 236, 220);
height: 100%;
line-height: 1;
text-align: center;
text-shadow: 0px 0px 10px #000;
width: 100%;
}
.my-skate-container > ul > li > div > div, .my-skate-container > ul > li > a > div > div {
display: table-cell;
vertical-align: middle;
}
.my-skate-container > ul > li > a > div > div, .my-skate-container > ul > li > div > div {
padding: 0px 30px;
}
.my-skate-container > ul > li > div h1, .my-skate-container > ul > li > a > div h1 {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 20px;
text-transform: uppercase;
}
.my-skate-container > ul > li > div p, .my-skate-container > ul > li > a > div p {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-size: 60px;
font-weight: bold;
}
.my-skate-container > ul > li > div p+p, .my-skate-container > ul > li > a > div p+p {
background: black;
display: inline-block;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 14px;
margin-top: 20px;
padding: 20px 30px;
text-transform: uppercase;
}
.my-skate-container > ul > li:first-child > a > div, .my-skate-container > ul > li:first-child > div {
background: #000 url(../images/slide1.jpg) center;
background-size: cover;
}
.my-skate-container > ul > li:first-child + li > div, .my-skate-container > ul > li:first-child + li > a > div {
background: #000 url(../images/slide2.jpg) center;
background-size: cover;
}
.my-skate-container > ul > li:first-child + li + li > div, .my-skate-container > ul > li:first-child + li + li > a > div {
background: #000 url(../images/slide3.jpg) center;
background-size: cover;
}
.my-skate-container > ul > li:first-child + li + li + li > div, .my-skate-container > ul > li:first-child + li + li + li > a > div {
background: #000 url(../images/slide4.jpg) center;
background-size: cover;
}
.my-skate-container > ul > li:first-child + li + li + li + li > div, .my-skate-container > ul > li:first-child + li + li + li + li > a > div {
background: #000 url(../images/slide5.jpg) center;
background-size: cover;
}
.my-skate-container nav a {
color: rgb(243, 236, 220);
font-size: 80px;
text-decoration: none;
}
.my-skate-container .skate-slide-navigation {
bottom: 1em;
left: 0;
text-align: center;
width: 100%;
}
.my-skate-container .skate-slide-navigation li a {
font-size: 20px;
opacity: .5;
}
nav {
text-shadow: 0px 0px 10px #000;
}
/* Customized Transitions */

.my-skate-container .skate.skate-no-js > .skate-target ~ :last-child div div, .my-skate-container .skate.skate-no-js > :target ~ :last-child div div, .my-skate-container .skate.skate-no-js > * div div {
opacity: 0;
-webkit-transform: translateY(-500px);
-moz-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
-moz-transition: opacity 1s ease, -moz-transform 1s ease;
transition: opacity 1s ease, transform 1s ease;
z-index: 1;
}
.my-skate-container .skate.skate-no-js > :last-child div div {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
z-index: 2;
}
.my-skate-container .skate.skate-no-js > .skate-target div div, .my-skate-container .skate.skate-no-js > :target div div {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
z-index: 3;
}
body > div > section {
display: none;
}
body > div > section.crossfade-animation {
display: block;
}splay: block;
}
.my-skate-container .skate > * {
height: 500px;
}
.my-skate-container .skate > *:nth-child(even) {
height: 550px;
}

4. Include jQuery library and jQuery Skate's javascript in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skate.js"></script> 

5. Initialize the slider with options..

$('.crossfade-animation .skate').skate({
animation: 'crossfade'
});

6. All available options.

'debug': false,// Whether to show debug messages.
'autoplay': true,// Whether to autoplay the slide show.
'animation': 'crossfade', // Animation types: slide, cards, crossfade, or none.
'delay': 5,// How long to show a single slide.
'transition': .5,// How long it should take to transition between slides.
'slides': '> *',// Query to get slide elements relative to container.
'first': ':first-child',// Filter slides and use this as the first slide.
'css': true,// Whether to use CSS3 transitions when available.
'keyboard': true,// Whether this slider has keyboard control capability.
'touch': true,// Whether this slider has touch control capability.
'heightmatch': true// Whether to resize the container to fit the slide.

Change log:

2014-04-18

• Fix for created nav not updating active bullet classes
• Fix for next/prev missing arrows on create

2014-03-24

• Fix for recalculating height when resizing window

2014-03-22

• Fixing issue with nav line heights

2014-02-28

• Fix for heightmatch weirdness on production site

2014-02-27

• Initial create navigation support

2014-02-22

• Fixes for swipe heightmatch animation bugs

---

This awesome jQuery plugin is developed by robertbrodrecht. For more Advanced Usages, please check the demo page or visit the official website.