全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」

全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」サンプル 全画面スライドをさせられるとサイトの遷移が面白くなり、ユーザーを惹きつけることができます。 :: Alessandro Ferrini :: FerroSlider jQuery Pluginはこれを簡単に実現できます。
また簡単にプレゼンにも流用できそうです。

使用方法 :: Alessandro Ferrini :: FerroSlider jQuery Pluginからファイル一式をダウンロード。
<link rel="stylesheet" href="jquery.ferro.ferroSlider.css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.ferro.ferroSlider.min.js"></script>
<script>
$(function(){
$('.slidingSpaces').ferroSlider({
easing : 'easeOutExpo', //easingプラグインの設定
createMap : true, //いま何枚目かを表示するかどうか
mapPosition : 'bottom_center', //現在地を表示する場所
feedbackArrows: true //どこに遷移したかを表示するか
});
});
</script>

あとは下記を記述すれば完成です。
また設定により、上下だったり画像をフルで見せることも可能です。 <div id="div1" class="slidingSpaces" title="Page 1">
first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
second page
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
third page
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
fourth page
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
fifth page
</div>

全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」サンプル

sponsors

「全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」」をシェアする

記事作成:
記事URL:

TOP > > 全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」