タイル状エフェクトのスライダー

se_ka05
se_ka05

[jq-tiles]はタイル状のエフェクトが選べるjQueryプラグインです。

まず[jq-tiles]からjQueryプラグイン等をダウンロードします。

cssを<head>内に設定します。
</body>の直前にJavaScriptを設定します。
そして<body>内にコードを記述します。

オプション


$(function(){
$('.slider').tilesSlider({
x			: 4, //x軸のタイルの数 20個まで
y			: 4, //y軸のタイルの数 20個まで
effect		: 'default',//※エフェクトの種類
fade		: false,// スライダーの切り替えをスライドではなくフェイドインにするか。
random		: false,// trueにすると決まった順にエフェクトされます。
reverse		: false,
backReverse	: false,
rewind		: false,
auto		: false,
loop		: false,
slideSpeed	: 3500, //スライドのスピード
tileSpeed	: 800, // 全てのタイルが消えるまでのスピード
cssSpeed	: 300, // css3 transitionのスピード [100,200,300,400,500,600,700,800,900,1000],
nav			: true, //ナビゲーションを追加するか。
navWrap		: null,
bullets		: true,
thumbs		: true,
thumbSize	: 25,
timer		: true // タイムバーを表示するかどうか
});
});

HTML


<head>
<link rel="stylesheet" href="jquery.tiles.min.css"/>
</head> <body>
<div class="slider">
<img src="img1.jpg"/><!-説明なし->
<img src="img2.jpg"/><p>説明画像2</p>
<img src="img3.jpg"/><p>説明画像3</p>
</div >
</body>

CSS


.slider{
width:1000px;
height:400px;
}

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.tiles.min.js"></script>
<script type="text/javascript">
$(function(){
$('.slider').tilesSlider({ random: true })
</script>

エフェクト


default
simple
left
up
leftright
updown
switchlr
switchud
fliplr
flipud
reduce
360

関連記事