开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

/!\ This project is currently unmaintained

If you're interested in maintaining this project and triaging bugs chime in on this issue.

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

Elements

The following are element classes accessible under the elements object.

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') // get current slide index
$('#slides').superslides('next')    // get next slide index
$('#slides').superslides('prev')    // get previous slide index

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