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" />
次のスクリプトを使用し、これらの 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 製品マニュアルをご覧ください。
wijcarousel
Wijcarousel チュートリアル チュートリアル
以下のチュートリアルでは、複数の画像を表示するカルーセルを含む MVC プロジェクトの作成手順について説明します。
注意：注意：: このチュートリアルでは、MVC Classicバープロジェクトを作成済みであることを前提にしています。詳細について は、MVC Classic プロジェクトの作成 「MVC Classic プロジェクトの作成」 トピックを参照してください。
手順 手順 1 ：ビューの設定 ：ビューの設定
この手順では、最初にビューを設定します。コンテンツをカルーセルに追加します。
注意：注意：: この手順では、MVC Classicバープロジェクトを作成済みであることを前提にしています。詳細については、
「MVC Classic プロジェクトの作成」トピックを参照してください。
以下の手順を実行します。
1. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックし てファイルを開きます。
2. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
ソースビュー
<div id="wijcarousel0">
<ul>
<li><img src="http://lorempixum.com/750/300/sports/1" alt="スポーツ 1" />
<span>キャプション 1</span></li>
<li><img src="http://lorempixum.com/750/300/sports/2" alt="スポーツ 2" />
<span>キャプション 2</span></li>
<li><img src="http://lorempixum.com/750/300/sports/3" alt="スポーツ 3" />
<span>キャプション 3</span></li>
<li><img src="http://lorempixum.com/750/300/sports/4" alt="スポーツ 4" />
<span>キャプション 4</span></li>
<li><img src="http://lorempixum.com/750/300/sports/5" alt="スポーツ 5" />
<span>キャプション 5</span></li>
<li><img src="http://lorempixum.com/750/300/sports/6" alt="スポーツ 6" />
<span>キャプション 6</span></li>
<li><img src="http://lorempixum.com/750/300/sports/7" alt="スポーツ 7" />
<span>キャプション 7</span></li>
<li><img src="http://lorempixum.com/750/300/sports/8" alt="スポーツ 8" />
<span>キャプション 8</span></li>
</ul>
</div>
このマークアップはカルーセルのコンテンツをページに追加します。
この手順では、ビューを作成しました。次の手順 「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウィジェットを初期 化します。
手順 手順 2 ：ウィジェットの初期化 ：ウィジェットの初期化
前の手順では、マークアップを追加し、カルーセルに表示するコンテンツを追加しました。この手順では、ウィジェットを初期化 するために必要な jQuery スクリプトを追加します。
以下の手順を実行します。
1. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを初期化 します。
ソースビュー
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijcarousel0").wijcarousel(
{
display: 1, showTimer: true, showPager: true, loop: true,
pagerType: "dots",
showContorlsOnHover: false }
);
});
</script>
このスクリプトはウィジェットを初期化します。
2. 前の手順で追加した終了の </script> タグの後に、以下のマークアップを追加して、wijcarousel ウィジェットをスタイ リングします。
ソースビュー
<style type="text/css">
#wijcarousel0 {
width: 750px;
height: 300px;
}
</style>
このマークアップはウィジェットをスタイリングします。
アプリケーションを作成して、wijcarousel ウィジェットを追加して初期化しました。次の手順 「手順 3：プロジェクトの実行」で は、ウィジェットの実行時のインタラクティブ操作を表示します。
手順 手順 3 ：プロジェクトの実行 ：プロジェクトの実行
前の手順では、アプリケーションを作成し、wijcarousel ウィジェットを追加して初期化しました。この手順では、ウィジェットの 実行時のインタラクティブ操作を確認します。
以下の手順を実行します。
1. [F5 を押して、アプリケーションを実行します。アプリケーションと wijcarousel は次のように表示されます。
2. 画像とキャプションの下のドットの１つを押して、別の画像に移動します。
3. 左右の矢印を押して、前または次の画像に移動します。
4. 右上隅の〈Play〉ボタンを押して、画像をスライドショーで再生します。
このチュートリアルでは、wijcarousel ウィジェットをアプリケーションに追加して、実行時のウィジェットを観察しました。
カルーセルへのアニメーションの適用 カルーセルへのアニメーションの適用
wijcarousel ウィジェットはアニメーションをサポートします。 この機能を利用するには、単に animated オプションを設定しま す。 Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Animation) にアクセスし、MVC コント ロールエクスプローラの Carousel > Animation サンプルのライブデモをご覧ください。.
1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックし てファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
ソースビュー
<div id="wijcarousel0" 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>
<li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/6"
title="Word" /><span>キャプション 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/7"
title="Word2" /><span>キャプション 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/8"
title="Word3" /><span>キャプション 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/9"
title="Word4" /><span>キャプション 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/10"
title="Word5" /><span>キャプション 5</span></li>
</ul>
</div>
このマークアップは、カルーセルウィジェットのコンテンツをページに追加します。 次の手順では、カルーセルのアニ メーションを設定します。
4. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加して animated オプションを設定します。
ソースビュー
<div><input id="chkQueue" type="checkbox" /></div>
<div><label for="chkQueue"> Animation Settings: Queue </label></div>
<div><label for="selEasing">Easing:</label></div><div>
<select id="selEasing">
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInElastic">easeInElastic</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easeInOutElastic">easeInOutElastic</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
<option value="easeInOutBack">easeInOutBack</option>
<option value="easeInBounce">easeInBounce</option>
<option value="easeOutBounce">easeOutBounce</option>
</select></div>
<div><input type="button" value="適用" onclick="changeProperties()" /></div>
</div>
</div>
これにより wijcarousel のアニメーションをカスタマイズする要素が追加されます。 実行時に、イージングスタイルを選 択できます。〈適用適用〉ボタンをクリックして選択したスタイルを適用します。 スタイルを適用すると、〈Previous〉または
〈Next〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。
5. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加してスタイルのオプションを設定します。
ソースビュー
<style type="text/css">
#wijcarousel0 {
width:750px;
height:300px;
}
</style>
これにより wijcarousel ウィジェットのサイズが設定されます。
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〉ボタンを使用して画像をナビゲートし、選 択したアニメーションを表示できます。