カルーセルへのビデオコンテンツの取り込み

wijcarousel ウィジェットでは、ユーザーはビデオコンテンツを表示できます。例については、Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Videos) にアクセスし、MVC コントロールエクスプローラの Carousel > Videos サンプルのライブデモをご覧ください。

ビデオコンテンツを取り込むには、以下の手順を実行します。

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

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

ソースビュー	コードのコピー
<div id="wijcarousel0" class="ui-corner-all ui-widget-content"> <ul><li> <iframe src="http://player.vimeo.com/video/33693734?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> </li> <li> <iframe src="http://player.vimeo.com/video/33372959?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> </li> <li> <iframe src="http://player.vimeo.com/video/29960529?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> </li> <li> <iframe src="http://player.vimeo.com/video/30761131?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> </li> <li> <iframe src="http://player.vimeo.com/video/29340355?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> </li></ul> </div>

ソースビュー

コードのコピー

<div id="wijcarousel0" class="ui-corner-all ui-widget-content">
    <ul><li>
            <iframe src="http://player.vimeo.com/video/33693734?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/33372959?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/29960529?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/30761131?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/29340355?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe>
    </li></ul>
</div>

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

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ showContorlsOnHover: true }); }); </script> <style type="text/css"> #wijcarousel0 { width: 600px; height: 338px; } </style>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijcarousel0").wijcarousel({
            showContorlsOnHover: true
        });
    });
</script>
<style type="text/css">
    #wijcarousel0
    {
        width: 600px;
        height: 338px;
    }
</style>

上記のスクリプトとマークアップはカルーセルを初期化します。

このトピックの作業結果

[F5] を押してアプリケーションを実行し、カルーセルウィジェットにビデオが表示されることを確認します。現在表示されているビデオを変更するには、〈Previous〉または〈Next〉ボタンを押します。