wijcarousel ウィジェットでは、ユーザーはビデオコンテンツを表示できます。 例については、Web サイト ( http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Videos) にアクセスし、MVC コントロールエクスプローラの Carousel > Videos サンプルのライブデモをご覧ください。
ビデオコンテンツを取り込むには、以下の手順を実行します。
- ASP.NET MVC 5 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>終了タグの後に、以下の 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>上記のスクリプトとマークアップはカルーセルを初期化します。
このトピックの作業結果
[F5] を押してアプリケーションを実行し、カルーセルウィジェットにビデオが表示されることを確認します。 現在表示されているビデオを変更するには、〈Previous〉または〈Next〉ボタンを押します。