$("#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]を押してアプリケーションを実行し、１つのカルーセルが縦向きに表示され、もう１つのカルーセルが横向き に表示されることを確認します。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<h3>数字</h3>
<br />
<div id="wijcarousel0">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/750/300/sports/1" title="Word"
/><span>キャプション 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/750/300/sports/2" title="Word2"
/><span>キャプション 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/750/300/sports/3" title="Word3"
/><span>キャプション 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/750/300/sports/4" title="Word4"
/><span>キャプション 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/750/300/sports/5" title="Word5"
/><span>キャプション 5</span></li>
</ul>
</div>
<br />
<h3>ドット</h3>
<br />
<div id="wijcarousel1" class="">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/750/300/city/1" title="Word" /><span>キャ プション 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/750/300/city/2" title="Word2" /><span>キ ャプション 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/750/300/city/3" title="Word3" /><span>キ ャプション 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/750/300/city/4" title="Word4" /><span>キ ャプション 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/750/300/city/5" title="Word5" /><span>キ ャプション 5</span></li>
</ul>
</div>
<br />
<h3>スライダー</h3>
<br />
<div id="wijcarousel2" class="">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word"
/><span>キャプション 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2"
/><span>キャプション 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3"
/><span>キャプション 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4"
/><span>キャプション 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5"
/><span>キャプション 5</span></li>
</ul>
</div>
このマークアップは、３つのカルーセルウィジェットのコンテンツをページに追加します。
4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを 初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { var options = {
display: 1, showTimer: false, showPager: true, buttonOffset: 16, pagerType: "numbers"
};
$("#wijcarousel0").wijcarousel(options);
$("#wijcarousel1").wijcarousel($.extend(options, { pagerType: "dots",
pagerPosition: { my: "center top", at: "center bottom", offset: "0 5"
}, start: 2 }));
$("#wijcarousel2").wijcarousel($.extend(options, { pagerType: "slider",
loop: false,
pagerPosition: { my: "center top", at: "center bottom"
}, start: 3 }));
});
</script>
<style type="text/css">
#wijcarousel0, #wijcarousel1, #wijcarousel2 {
width: 750px;
height: 300px;
}
</style>
３つのカルーセルのそれぞれが異なるページャスタイルを使用します。
このトピックの作業結果
[F5]を押してアプリケーションを実行し、３つのカルーセルのそれぞれが numbers、dots、および slider の異な るページャスタイルを使用していることを確認します。