キャプションやナビゲーションをカスタマイズ
カルーセルで表示する画像にはキャプションを付けられます。キャプションは、<div class="carouselFrame">～</div>内に「carouselFrameTitle」というスタイルシートクラス名を付けたdiv要素を用意して記述します。これで画像と一緒にキャプションもスライドします。
<div class="carouselFrame" style="left:0px;">
<img src="photo/1.jpg">
<div class="carouselFrameTitle">松本城</div>
</div>
画像の上にキャプションが表示される
1枚ずつ画像を切り替えるナビゲーションに加えて、番号で画像を切り替えるナビゲーションも付けられます。その場合はset()を使い、pageXプロパティに表示したい画像の番号を指定します。番号は最初の画像が0、次の画像が1、その次が2……というように連番になっています。
scrolly.set({ pageX : 0 })
サンプル2は画像に対応したナビゲーションボタンを用意したものです。
画像の下に番号が表示されクリックすると対応する画像までスライドする
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UIZE カルーセルサンプル</title>
<link rel="stylesheet" href="css/page.content.css">
<link rel="stylesheet" href="css/widget.slideshow.css">
<link rel="stylesheet" href="css/carousel.css">
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<div class="scrollyCarousel">
<div id="page_scrolly-view" class="scrollyView">
<div class="carouselFrame" style="left:0px;">
<img src="photo/1.jpg">
<div class="carouselFrameTitle">松本城</div>
</div>
<div class="carouselFrame" style="left:600px;">
<img src="photo/2.jpg">
<div class="carouselFrameTitle">浅間山噴火</div>
</div>
<div class="carouselFrame" style="left:1200px;">
<img src="photo/3.jpg">
<div class="carouselFrameTitle">高ボッチ高原</div>
</div>
<div class="carouselFrame" style="left:1800px;">
<img src="photo/4.jpg">
<div class="carouselFrameTitle">三九郎（どんど焼き）</div>
</div>
<div class="carouselFrame" style="left:2400px;">
<img src="photo/5.jpg">
<div class="carouselFrameTitle">冬景色（長野県）</div>
</div>
<div class="carouselFrame" style="left:3000px;">
<img src="photo/6.jpg">
<div class="carouselFrameTitle">浅間温泉街</div>
</div>
</div>
<a id="page_scrolly_left" href="#" class="navButton" style="left:10px;"><div class="arrow towardsFirst gotoPrevious"></div></a>
<a id="page_scrolly_right" href="#" class="navButton" style="right:10px;"><div class="arrow towardsLast gotoNext"></div></a>
<br>
</div>
<div class="scrollyNavi">
[<a href="#" onclick="scrolly.set({ pageX : 0 })">0</a>]
[<a href="#" onclick="scrolly.set({ pageX : 1 })">1</a>]
[<a href="#" onclick="scrolly.set({ pageX : 2 })">2</a>]
[<a href="#" onclick="scrolly.set({ pageX : 3 })">3</a>]
[<a href="#" onclick="scrolly.set({ pageX : 4 })">4</a>]
[<a href="#" onclick="scrolly.set({ pageX : 5 })">5</a>]
</div>
<script type="text/javascript"><!--
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Scrolly'
],
builder:function () {
var page = window.page = new Uize.Widget.Page();
scrolly = page.addChild ('scrolly',Uize.Widget.Scrolly);
page.wireUi();
}
});
// --></script>
</body>
</html>
画像がスライドする時間を変更したい場合は、以下のようにset()を使ってdurationプロパティにミリ秒で指定します。
scrolly = page.addChild ('scrolly', Uize.Widget.Scrolly);
scrolly.fade.set({ duration:8000 }); // 切り替え時間
◆
後編では、複数の画像を切り替えて表示するカルーセルを作成します。
