jQuery

【jQuery】jQuery用のフルスクリーンスライダープラグインSuperslides

November 29, 2018
Superslides

Superslidesは、jQuery用のフルスクリーンスライダープラグインです。

Usage

$('#slides').superslides()

Options

  1. play
  2. animation
  3. animation_speed
  4. animation_easing
  5. inherit_width_from
  6. inherit_height_from
  7. pagination
  8. hashchange
  9. elements

Elements

  1. preserve
  2. nav
  3. container
  4. pagination

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

Markup

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

$.fn.superslides.fx = $.extend({
  flip: function(orientation, complete) {
    console.log(orientation);
    complete();
  }
}, $.fn.superslides.fx);

MIT