wijcarousel ウィジェットでは、仮想化カルーセルに画像のリストを表示できます。wijcarousel ウィジェットは、jquery.wijmo.wijcarousel.js ライブラリによって作成されます。
次の例のように、画像をウィジェットに組み込むことができます。
| ソースビュー |
コードのコピー
|
|---|---|
<div>
<div id="wijcarousel0">
<ul>
<li>
<img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word" /><span>キャプション 1</span></li>
<li>
<img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word2" /><span>キャプション 2</span></li>
<li>
<img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word3" /><span>キャプション 3</span></li>
<li>
<img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word4" /><span>キャプション 4</span></li>
<li>
<img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word5" /><span>キャプション 5</span></li>
<li>
<img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word" /><span>キャプション 6</span></li>
<li>
<img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word2" /><span>キャプション 7</span></li>
<li>
<img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word3" /><span>キャプション 8</span></li>
<li>
<img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word4" /><span>キャプション 9</span></li>
<li>
<img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word5" /><span>キャプション 10</span></li>
</ul>
</div>
</div>
|
|
次のスクリプトを使用し、これらの DOM 要素構造体のいずれかを初期化できます。
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijcarousel0").wijcarousel({
display: 3,
step: 2,
orientation: "horizontal"
});
});
</script>
|
|
CSS スタイルを追加します：
| ソースビュー |
コードのコピー
|
|---|---|
<style type="text/css">
#wijcarousel0
{
width: 1050px;
height: 300px;
}
</style>
|
|
ここで取り上げたマークアップとスクリプトは、同様なカルーセルになります。
関連項目：
wijcarousel の詳細については、Wijmo 製品マニュアルをご覧ください。
関連トピック