シンプルなスクリプトで実装は手軽
この連載の第18回で解説したとおり、UIZE Frameworkは複数のモジュールで構成されており、必要なモジュールをその都度読み込んで利用します。今回のカルーセルパネルには以下の2つのモジュールを使います。
- Uize.Widget.Page
- Uize.Widget.Scrolly
この2つのモジュールをrequiredで読み込みます（関連記事）。
required:[
'Uize.Widget.Page',
'Uize.Widget.Scrolly'
]
次に、ウィジェットを表示するためのスクリプトを書きます。といっても、わずか3行で終わりです。前回も説明したとおり、ウィジェットはpage.wireUi()で表示します。
var page = window.page = new Uize.Widget.Page();
var scrolly = page.addChild ('scrolly',Uize.Widget.Scrolly);
page.wireUi();
サンプル1が実際のプログラムです。ナビゲーションボタンをクリックすると画像がスライドして切り替わります。
左右のナビゲーションボタンをクリックすると画像がスライドする
<!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>
<div class="carouselFrame" style="left:600px;">
<img src="photo/2.jpg">
</div>
<div class="carouselFrame" style="left:1200px;">
<img src="photo/3.jpg">
</div>
<div class="carouselFrame" style="left:1800px;">
<img src="photo/4.jpg">
</div>
<div class="carouselFrame" style="left:2400px;">
<img src="photo/5.jpg">
</div>
<div class="carouselFrame" style="left:3000px;">
<img src="photo/6.jpg">
</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>
</div>
<script type="text/javascript"><!--
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Scrolly'
],
builder:function () {
var page = window.page = new Uize.Widget.Page();
var scrolly = page.addChild ('scrolly',Uize.Widget.Scrolly);
page.wireUi();
}
});
// --></script>
</body>
</html>
