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.
build
spec/javascripts
src
.gitignore
.rvmrc
Cakefile
Gemfile
Gemfile.lock
README.md

README.md

Superslides 0.2.1

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

It is 2kb minified (4.5kb uncompressed).

Usage

Check out the demo for a complete example. Basic usage is as follows. See options below for things you can change.

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

Options

Currently, Superslides has a few configurable options: auto play with a delay, slide transition speed, and slide easing (jQueryUI or the jQuery easing plugin required).

Listed as option: default_value

delay: 5000
play: false
slide_speed: 'normal'
slide_easing: 'linear'
nav_class: 'slides-navigation'

Events

Superslides triggers a few events that you can bind to (listed in the order they are fired):

slides.initialized
slides.animated

When the window is resized and on first load before slides.initialized:

slides.image_adjusted
slides.sized

Binding to events:

$('body').on('slides.initialized', '#slides', function(){
  console.log('Superslides initialized')
})

Markup

Markup is pretty straightforward. At the very least you'll need a ul with a container. Inside each li you're pretty much home free. I've included a completely optional .container.

A note on scaling images

Be sure to include the height and width attributes of the image in it's original size! These attributes will be removed when the slider is initialized, but they are need to quickly and simply calculate the original image dimensions.

<div id="slides">
  <ul>
    <li>
      <img src="http://flickholdr.com/1000/800" width="1000" height="800" alt="">
      <div class="container">
        Slide one
      </div>
    </li>
    <li>
      <img src="http://flickholdr.com/1000/800/space" width="1000" height="800" alt="">
      <div class="container">
        Slide two
      </div>
    </li>
    <li>
      <img src="http://flickholdr.com/1000/800/tech" width="1000" height="800" 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>

CSS

Not all of these styles are required, but most of them are. They've been written with much of the styling removed, and only the basic structural elements left in place. That said, it's likely you may need to tweak to your needs.

#slides {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#slides .slides-navigation {
  width: 988px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  top: -50%;
}
#slides .slides-navigation a {
  position: absolute;
  display: block;
}
#slides .slides-navigation a.prev {
  left: 0;
}
#slides .slides-navigation a.next {
  right: 0;
}
#slides ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
#slides ul li {
  margin: 0;
  padding: 0;
  float: left;
  position: relative;
  background: none;
}
#slides ul li.current {
  display: block;
  z-index: 1;
}
#slides ul li img {
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
}
#slides ul li .container {
  width: 988px;
  margin: 0 auto;
  position: relative;
  top: 38%;
  background: none;
}

Contributing

If you'd like to contribute by fixing bugs, adding features, or otherwise, you should know that Superslides is written in Coffeescript with Jasmine and Jasmine Headless Webkit. Write a test for your feature and submit a pull request :)

Known Bugs & Caveats

  • IE 7 & 8 don't scale the image nicely
Something went wrong with that request. Please try again.