印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」

面白い動きで印象に残る画像スライダー「FancyMoves a new jQuery Product Slider」を紹介します。
ECサイトなど商品を見せる時に有効ではないでしょうか。
印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」サンプル

使用方法
FancyMoves a new jQuery Product Sliderからファイル一式をダウンロードします。
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script>
$(function () {
$('#Button1').click(function() {
location.reload();
});
});
</script>

上記のように記述したら後は、下記ルールに基づき画像を記述していけば完成です。
<div id="slider-outer">
<div id="slider">
<img class="scrollButtons left" src="arrow-left.png" />
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<!-- ここから画像1枚目 -->
<div class="panel" id="panel_1">
<div class="inside">
<img src="画像パス1" />
</div>
</div>
<!-- ここまで画像1枚目 -->
<!-- ここから画像2枚目 -->
<div class="panel" id="panel_2">
<div class="inside">
<img src="画像パス2" />
</div>
</div>
<!-- ここまで画像2枚目 -->
<!-- 枚数分idを変え追加してください -->
</div>
<img class="scrollButtons right" src="arrow-right.png" alt="right" />
</div>
</div>

印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」サンプル

sponsors

「印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」」をシェアする

記事作成:
記事URL:

TOP > > > 印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」