A repository of over 1000 quality jQuery plugins

jQuery Superslides

Superslides is a jQuery Sliders & Carousels plugin.

Created by Nicinabox

A fullscreen, hardware accelerated slider for jQuery.

Not what you're looking for? Click here to view more Sliders & Carousels jQuery plugins

Superslides

Superslides is a full screen, hardware accelerated slider for jQuery. I wasn't happy with the state of full screen sliders, so naturally I built my own.

Usage

Check out the demo for an interactive example or the examples folder for individual cases. Use like your standard jQuery plugin:

$('#slides').superslides()

Options

Option Default Description
play 0 [number] Milliseconds before progressing to next slide automatically. Use a falsey value to disable.
animation 'slide' [string] slide or fade. This matches animations defined by fx engine.
animation_speed 'normal' [string] Animation speed.
animation_easing 'linear' [string] Animation easing.
inherit_width_from window [object] or [string] Accepts window or element selector. Use to constrain slider to an element's width.
inherit_height_from window [object] or [string] Accepts window or element selector. Use to constrain slider to an element's height.
pagination true [boolean] Generate pagination. Add an id to your slide to use custom pagination on that slide.
hashchange false [boolean] Enable hashchange support in url.
elements (see Elements below) [object] A hash of element classes used in generated html.

Elements

The following are element classes accessible under the elements object.

preserve '.preserve' [string] Add this class to images in your content that you don't want to be resized like the background images.
nav '.slides-navigation' [string] Class surrounding next/previous buttons.
container '.slides-container' [string] Container class that must be present with original markup.
pagination '.slides-pagination' [string] Pagination class added to pagination container.

Events

Superslides triggers a few events that you can bind to.

started.slides
init.slides
animating.slides // Before slide animation begins
animated.slides  // After slide animation ends
updated.slides

API

$('#slides').superslides('start')
$('#slides').superslides('stop')
$('#slides').superslides('animate' [, index|'next'|'prev'])
$('#slides').superslides('size')
$('#slides').superslides('destroy')
$('#slides').superslides('current')
$('#slides').superslides('next') // go to next slide
$('#slides').superslides('prev') // go to previous slide

If adding slides after initialization (a la ajax), be sure to call update.

Styling

All styling required for functionality is handled in the JavaScript. Additional and optional styling is provided in dist/stylesheets/superslides.css

Markup

Markup is pretty straightforward. At minimum it looks something like this:

<div id="slides">
  <div class="slides-container">
    <img src="http://flickholdr.com/1000/800" alt="">
    <img src="http://flickholdr.com/1000/800" alt="">
  </div>
</div>

You could even use a UL as the slides-container

<div id="slides">
  <ul class="slides-container">
    <li>
      <img src="http://flickholdr.com/1000/800" alt="">
      <div class="container">
        Slide one
      </div>
    </li>
    <li>
      <img src="http://flickholdr.com/1000/800/space" alt="">
      <div class="container">
        Slide two
      </div>
    </li>
    <li>
      <img src="http://flickholdr.com/1000/800/tech" alt="">
      <div class="container">
        Slide three
      </div>
    </li>
  </ul>
  <nav class="slides-navigation">
    <a href="#" class="next">Next</a>
    <a href="#" class="prev">Previous</a>
  </nav>
</div>

Custom Animations

I realize that you might want to do something unique in your application. That's why I've added the ability to extend the existing animations with your own. See examples/custom-fx.html.

$.fn.superslides.fx = $.extend({
  flip: function(orientation, complete) {
    console.log(orientation);
    complete();
  }
}, $.fn.superslides.fx);

Hardware Acceleration

Superslides is compatible with the jQuery Animate Enhanced plugin. Simply include it before this plugin and it will automatically smooth out transitions using CSS instead of JavaScript.

Contributing

Check contributing.md.

Changelog

Changelog

Bitdeli Badge



You might also like these other Sliders & Carousels jQuery Plugins

  • Turntable.js

    Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or […]

  • A responsive slider jQ...

    A responsive slider jQuery plugin with CSS animations. This plugin use CSS3 animations, because performance matters. No need to calculate...

  • Easy Ticker

    jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with […]