カルーセルコンテンツのプレビュー

wijcarousel ウィジェットでは、ユーザーは前および次のコンテンツ要素をプレビューできます。この機能を利用するには、単に preview オプションを設定します。例については、Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Preview) にアクセスし、MVC コントロールエクスプローラの Carousel > Preview サンプルのライブデモをご覧ください。

カルーセルコンテンツをプレビューするには、以下の手順を実行します。

ASP.NET MVC 4 Wijmo アプリケーションを作成します。
ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div id="wijcarousel0"> <ul> <li> <img src="http://lorempixum.com/750/300/sports/1" alt="スポーツ１" /> <span>キャプション 1</span> </li> <li> <img src="http://lorempixum.com/750/300/sports/2" alt="スポーツ２" /> <span>キャプション 2</span></li> <li> <img src="http://lorempixum.com/750/300/sports/3" alt="スポーツ３" /> <span>キャプション 3</span></li> <li> <img src="http://lorempixum.com/750/300/sports/4" alt="スポーツ４" /> <span>キャプション 4</span></li> <li> <img src="http://lorempixum.com/750/300/sports/5" alt="スポーツ５" /> <span>キャプション 5</span></li> <li> <img src="http://lorempixum.com/750/300/sports/6" alt="スポーツ６" /> <span>キャプション 6</span></li> <li> <img src="http://lorempixum.com/750/300/sports/7" alt="スポーツ７" /> <span>キャプション 7</span></li> <li> <img src="http://lorempixum.com/750/300/sports/8" alt="スポーツ８" /> <span>キャプション 8</span></li> </ul> </div>

ソースビュー

コードのコピー

<div id="wijcarousel0">
    <ul>
    <li>
        <img src="http://lorempixum.com/750/300/sports/1" alt="スポーツ １" />
        <span>キャプション 1</span> </li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/2" alt="スポーツ ２" />
        <span>キャプション 2</span></li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/3" alt="スポーツ ３" />
        <span>キャプション 3</span></li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/4" alt="スポーツ ４" />
        <span>キャプション 4</span></li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/5" alt="スポーツ ５" />
        <span>キャプション 5</span></li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/6" alt="スポーツ ６" />
        <span>キャプション 6</span></li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/7" alt="スポーツ ７" />
        <span>キャプション 7</span></li>
    <li>
        <img src="http://lorempixum.com/750/300/sports/8" alt="スポーツ ８" />
        <span>キャプション 8</span></li>
    </ul>
</div>

このマークアップは、１つのカルーセルウィジェットをページに追加します。次の手順では、カルーセルを初期化します。

前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを初期化し、preview オプションを設定します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ display: 1, showTimer: false, showPager: false, loop: false, showContorlsOnHover: false, preview: true }); $("#Button1").click(function () { $("#div1").css({ opacity: "" }); }); }); </script> <style type="text/css"> #wijcarousel0 { width: 500px; height: 300px; } </style>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
    $("#wijcarousel0").wijcarousel({
    display: 1,
    showTimer: false,
    showPager: false,
    loop: false,
    showContorlsOnHover: false,
    preview: true
});
$("#Button1").click(function () {
$("#div1").css({ opacity: "" });
});
});
</script>
<style type="text/css">
#wijcarousel0
{
    width: 500px;
    height: 300px;
}
</style>

上記のスクリプトとマークアップはカルーセルを初期化し、カルーセルのプレビューとスタイルを設定します。

このトピックの作業結果

[F5] を押してアプリケーションを実行し、カルーセル内の前と次の要素がカルーセルウィジェットでプレビューされることを確認します。現在およびプレビューされている画像を変更するには、〈Previous〉または〈Next〉ボタンを押します。