Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A fullscreen, hardware accelerated slider for jQuery.
JavaScript CSS

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
config
demo
dist
libs
scss
src
test
.gitignore
.rvmrc
CONTRIBUTING.md
Gemfile
Gemfile.lock
LICENSE-MIT
README.md
changelog.md
grunt.js
package.json
superslides.jquery.json

README.md

Superslides - changelog

Superslides is a full screen slider for jQuery heavily influenced by Nathan Searles' SlidesJS. It's designed to be flexible, while maintaining a reasonable code base and good browser compatibility.

Usage

Check out the demo for an interactive example. Use like your standard jQuery plugin:

$('#slides').superslides(options_hash)

Options

There are a few configurable options (these are the defaults):

play: false // Milliseconds for delay
slide_speed: 'normal'
slide_easing: 'linear'
pagination: true
hashchange: false
scrollable: true // Allow scrollable content inside slide
classes:
  preserve: 'preserve' // Prevent an image from being resized
  nav: 'slides-navigation'
  container: 'slides-container'
  pagination: 'slides-pagination'

Events

Superslides triggers a few events that you can bind to.

started.slides
init.slides     // On first load, will fire instead of `animated`
animated.slides
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')
$('#slides').superslides('prev')

If add slides after it's initialized (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 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>

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.

Something went wrong with that request. Please try again.