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:

• Simple Fullscreen Image Slideshow Plugin - fullsizable
• Stunning Fullscreen Photo Wall Gallery
• jQuery Fullscreen Background Slideshow - MaxImage
• Fullscreen Background Slideshow with Audio
• Animated Fullscreen Background Image Slideshow
• jQuery Plugin For Responsive Full Screen Image Slider - bgswitcher
• Supersized Fullscreen Slideshow Plugin

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

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

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="">
  </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>

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):

slides.initialized
slides.animated

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

slides.image_adjusted
slides.sized

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

slides.updated

// Binding to events:

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

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

$('#slides').trigger('slides.start')
$('#slides').trigger('slides.stop')
$('#slides').trigger('slides.play')
$('#slides').trigger('slides.next')
$('#slides').trigger('slides.prev')

// Alternatively, use the API to control the slider

$('#slides').superslides('start')
$('#slides').superslides('stop')
$('#slides').superslides('play')
$('#slides').superslides('prev')
$('#slides').superslides('next')
$('#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.