簡単!フェードによる要素切り替え型スライダーにアニメーションを加えたプラグイン【 jQuerySlidein 】
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。今回のtipsは【簡単!フェードによる要素切り替え型スライダーにアニメーションを加えたプラグイン jQuerySlidein 】。自分で作ったプラグインになります。設置も簡単で通常のスライダーより少し変わった動きができますので、ご活用いただければ幸いです。
設置方法
最低限必要なファイルはJQueryファイル、プラグインファイル、イージングファイルの3つになります。読み込ませ方は以下をご参照下さい。
読み込みファイル
<script src="jquery-1.7.2.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="jquery.slidein.min.js"></script>
jQuery
$(function(){
$(‘#sample’).slidein();
});
HTML
<div id="sample">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
CSS
不要かとも思いましたが、スライダーのみのページにする等の用途では以下のCSSを追加してください。
#sample{width: 840px;height: 560px;}
カスタム機能
動き等に関しましては以下のオプションが有ります。目的に合わせて使い分けていただければ幸いです。
オプション設定例
$(‘#sample’).slidein({
intval: 0,
speed: 1000,
vertical: 0,
horizontal: 500,
ease: ‘easeInOutExpo’,
pointer: true,
auto: true,
reverse: false
});
オプション概要
オプション名 | デフォルト | 内容 |
intval | 1000 | スライドショーの切り替えスピードの調整 |
speed | 1000 | フェードスピードの調整 |
ease | easeInOutExpo | イージングの設定 |
vertical | 0 | 縦方向へのアニメーション距離 |
horizontal | 500 | 横方向へのアニメーション距離 |
pointer | true | 装飾されたページングの使用 |
auto | true | スライドショーの自動切り替え |
reverse | false | スライダーの表示順 |
対応プラウザ
現時点ではIE6,IE7,IE8,IE9,chrome,firefox,safari,Operaになっています。(※IE6のみ透過pngのポインターNG,JPG等に差し替えてください)
ダウンロード
デモ : jquery.slidein
通常版 : jquery.slidein.js
コンプレス版 : jquery.slidein.min.js
フルセット版 : slidein.zip