【jQuery】Camera - スライダープラグインの使い方
公式サイト : http://www.pixedelic.com/plugins/camera/
GitHub : https://github.com/pixedelic/Camera
jQueryのスライドショー用プラグイン camera
jQueryで画像をスライドさせるプラグインは数多くありますが、こちらのcameraは本当に優秀です。
様々なオプションがあり、痒いところに手が届くプラグインとなっています。
使い方も簡単です。
使い方
使い方について説明します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Camera_demo</title>
<!-- javascript -->
<script type='text/javascript' src='./js/jquery.min.js'></script>
<script type='text/javascript' src='./js/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='./js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='./js/camera.min.js'></script>
<script>
$(function(){
$('#camera_demo').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true,
time: 2000
});
});
</script>
<!-- css -->
<link rel='stylesheet' id='camera-css' href='./css/camera.css' type='text/css' media='all'>
<style>
.container {
margin: 0 auto;
max-width: 1000px;
width: 90%;
}
</style>
</head>
<body>
<div class="container">
<div class="camera_wrap camera_magenta_skin" id="camera_demo">
<div data-thumb="http://placehold.jp/cc9999/333333/102x77.png" data-src="http://placehold.jp/cc9999/333333/1000x400.png">
<div class="camera_caption fadeFromBottom"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div>
</div>
<div data-thumb="http://placehold.jp/99cc99/333333/102x77.png" data-src="http://placehold.jp/99cc99/333333/1000x400.png">
<div class="camera_caption fadeFromBottom"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div>
</div>
<div data-thumb="http://placehold.jp/9999cc/333333/102x77.png" data-src="http://placehold.jp/9999cc/333333/1000x400.png">
<div class="camera_caption fadeFromBottom"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div>
</div>
<div data-thumb="http://placehold.jp/cccc99/333333/102x77.png" data-src="http://placehold.jp/cccc99/333333/1000x400.png">
<div class="camera_caption fadeFromBottom"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div>
</div>
<div data-thumb="http://placehold.jp/cc99cc/333333/102x77.png" data-src="http://placehold.jp/cc99cc/333333/1000x400.png">
<div class="camera_caption fadeFromBottom"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div>
</div>
<div data-thumb="http://placehold.jp/99cccc/333333/102x77.png" data-src="http://placehold.jp/99cccc/333333/1000x400.png">
<div class="camera_caption fadeFromBottom"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div>
</div>
</div>
</div>
</body>
</html>上記のデモページを用意したのでそちらで動作を確認してみてください。
デモページはこちら
他にもこのようなオプションを設定すると少し凝った動きになるのが分かるかと思います。