簡単!フェードによる要素切り替え型スライダーにアニメーションを加えたプラグイン【 jQuerySlidein 】

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回の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