Full Screen Slider Plugin For jQuery - Superslides

File Size: 2.07 MB
Views Total: 24315
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Full Screen Slider Plugin For jQuery - Superslides

Superslides is a flexible and Full Screen Slider Plugin built with jQuery. 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).

Related Plugins:

Basic Usage:

1. Include necessary javacripts and jquery library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="javascripts/jquery.easing.1.3.js"></script>
<script src="javascripts/jquery.animate-enhanced.min.js"></script>
<script src="../dist/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/application.js"></script>

2. Call the plugin


3. Html

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

<!--You could even use a UL as the slides-container-->

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

4. Options

delay: 5000
play: false
slide_speed: 'normal'
slide_easing: 'linear'
nav_class: 'slides-navigation'
container_class: 'slides-container'
pagination: true
hashchange: true

5. Events

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


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


// An additional event is fired when an item is appended to the slider.


// Binding to events:

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

// You can also control the slider by triggering the respective events:


// Alternatively, use the API to control the slider

$('#slides').superslides('animate', 3) // where 3 is a slide number
$('#slides').superslides('append', $jqueryObj)

Change Log:

v0.6.3 (2013-12-19)

  • update to the latest version.

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