ComponentOne Studio MVC5 Classic ヘルプ
カルーセルコンテンツのプレビュー
MVC Classic ウィジェット > Wijcarousel > カルーセルコンテンツのプレビュー

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

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

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 以下のマークアップを、@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>

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

  4. 前の手順で追加した </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>

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

このトピックの作業結果

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

 

 

Copyright © GrapeCity inc. All rights reserved.