chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2014/07/30

[jQuery]15種類以上!多彩な動きのスライドアニメーションが選べるjQueryスライダー「desoSlide」

15種類以上のスライドアニメーションが用意されているjQueryプラグイン「desoSlide」をご紹介致します。
対応ブラウザはIE9以上,Firefox5以上,Chrome.Opera,Safariとなっています。

desoSlide

15種類以上のスライドアニメーションが用意されているjQueryスライダー「desoSlide」

CSS3のtransitionsプロパティを使用しており、様々な動きを実現しています。

l8emZ2LfKj

このような拡大しつつフェードアウトし、フェードインしつつ元サイズになるなど多彩な動きが用意されております。

 

アニメーションの種類

アニメーションの種類ですが、Effect providerというのものでanimate,magicの2つに分類されております。

animate,magicで読み込むCSSが異なります。

animateで用意されているもの

  • fade
  • flipX
  • flipY
  • fun
  • light
  • roll
  • rotate
  • rotateBig
  • sideFade
  • sideFadeBig
  • slide
  • random

 

magicで用意されているもの

  • foolish
  • perspective
  • puff
  • swap
  • swash
  • tin
  • twister
  • random

使用方法

html

<!--head部分-->
<!-- CSS読み込み -->
<link href="css/jquery.desoslide.min.css" rel="stylesheet">
<!-- jsコアファイル,プラグイン読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.desoslide.min.js"></script>
<!-- animateのスライドエフェクトを使用する場合読み込む -->
<link href="css/animate.min.css" rel="stylesheet">
<!-- magicのスライドエフェクトを使用する場合は読み込む -->
<link href="css/magic.min.css" rel="stylesheet">
<!-- head部分終わり -->

js

$('#slideshow').desoSlide({
  thumbs: $('a.thumb')
});

オプション

イベント以外をまとめました。詳細はドキュメントをご覧ください。

$('#slideshow').desoSlide({
   thumbs: null, // サムネイル画像の a アンカーを指定
   imageClass: 'img-responsive', // 画像に付けるクラス
   auto: {
     load: true, // 画像をプリロードするかしないか
     start: false // オートスタートをするかしないか
   },
   first: 0, // スライドの初期位置
   interval: 3000, // 画像が切り替わる時間
   effect: {
     provider: 'animate', // エフェクトの種類 animateかmagic
     name: 'fade' // エフェクトの名前
   },
   overlay: 'always', // 表示する際のオーバーレイ ('always', 'hover', 'none')
   controls: {
     show: true, // 次へ、スタート/ストップなどのコントローラーを表示するかしないか
     keys: false // キーボードの左キーで前へ、右キーで次へ、スペースバーでストップを有効にするかしないか
   }
});

 

まとめ

様々なアニメーションや、オート再生機能やサムネイル対応、イベントなど一般的なスライダーの機能は入っておりちょっとしたアクセントにはぴったりのスライダーではないでしょうか。

 

デモサイト: http://sylouuu.github.io/desoslide/doc/demo.html

ダウンロード: http://sylouuu.github.io/desoslide/doc/

 

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加