6. 前の手順で追加した </style> 終了タグの後に、以下の jQuery スクリプトを追加して wijcarousel ウィジェットを初 期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijcarousel0").wijcarousel({
display: 1, showTimer: false });
});
function changeProperties() { var animationOptions = { queue: $('#chkQueue').val(), easing: $('#selEasing').val() };
$('#wijcarousel0').wijcarousel({
animation: animationOptions });
}
</script>
これによりカルーセルが初期化され、アニメーションが追加されます。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、チェックボックスを ON にしてイージングスタイルを選択し、〈適 用〉ボタンをクリックして選択したスタイルを適用します。 スタイルを適用すると、〈Previous〉または
〈Next〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。
3. 依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。 これらは ページの <head> タグ内に配置されている必要があります。 Wijmo の最新バージョンの依存関係は
http://wijmo.com/downloads/cdn/ で確認できます。
4. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<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="Word6" /><span>キャプション 6</span></li>
<li>
<img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word7" /><span>キャプション 7</span></li>
<li>
<img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word8" /><span>キャプション 8</span></li>
<li>
<img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word9" /><span>キャプション 9</span></li>
<li>
<img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word10" /><span>キャプシ ョン 10</span></li>
</ul>
</div>
<div id="wijcarousel1">
<ul>
<li>
<img alt="1" src="http://lorempixum.com/200/150/abstract/1" title="Word" /><span>キャプショ ン 1</span></li>
<li>
<img alt="2" src="http://lorempixum.com/200/150/abstract/2" title="Word2" /><span>キャプショ ン 2</span></li>
<li>
<img alt="3" src="http://lorempixum.com/200/150/abstract/3" title="Word3" /><span>キャプショ ン 3</span></li>
<li>
<img alt="4" src="http://lorempixum.com/200/150/abstract/4" title="Word4" /><span>キャプショ ン 4</span></li>
<li>
<img alt="5" src="http://lorempixum.com/200/150/abstract/5" title="Word5" /><span>キャプショ ン 5</span></li>
<li>
<img alt="6" src="http://lorempixum.com/200/150/abstract/6" title="Word6" /><span>キャプショ ン 6</span></li>
<li>
<img alt="7" src="http://lorempixum.com/200/150/abstract/7" title="Word7" /><span>キャプショ ン 7</span></li>
<li>
<img alt="8" src="http://lorempixum.com/200/150/abstract/8" title="Word8" /><span>キャプショ ン 8</span></li>
<li>
<img alt="9" src="http://lorempixum.com/200/150/abstract/9" title="Word9" /><span>キャプショ ン 9</span></li>
<li>
<img alt="10" src="http://lorempixum.com/200/150/abstract/10" title="Word10" /><span>キャプ ション 10</span></li>
</ul>
</div>
このマークアップは、２つのカルーセルウィジェットのコンテンツをページに追加します。 次の手順では、カルー セルの向きを設定します。
5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを 初期化し、orientation オプションを設定します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijcarousel0").wijcarousel({
display: 3, step: 2,
orientation: "horizontal"
}); $("#wijcarousel1").wijcarousel({
display: 3, step: 2,
orientation: "vertical"
});
});
</script>
<style type="text/css">
#wijcarousel0 {
width: 390px;
height: 90px;
margin-bottom: 1em;
} #wijcarousel1 {
width: 120px;
height: 300px;
margin-bottom: 1em;
}
</style>
１つのカルーセルが縦向きに表示され、もう１つのカルーセルが横向きに表示されます（デフォルト）。
このトピックの作業結果
[F5]を押してアプリケーションを実行し、１つのカルーセルが縦向きに表示され、もう１つのカルーセルが横向き に表示されることを確認します。