手順 1：ビューの設定

この手順では、最初にビューを設定します。コンテンツをカルーセルに追加します。

注意：: この手順では、MVC Classicバープロジェクトを作成済みであることを前提にしています。詳細については、「MVC Classic プロジェクトの作成」トピックを参照してください。

以下の手順を実行します。

ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

以下のマークアップを、@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>

ソースビュー

コードのコピー

<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：ウィジェットの初期化」では、スクリプトを追加し、ウィジェットを初期化します。