Include Video Content

The wijcarousel widget allows users to display video content. See the Carousel > Videos sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Videos for an example.

Complete the following steps to include video content:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<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" width="600" height="338" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/33372959?byline=0&portrait=0&color=ffffff" width="600" height="338" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/29960529?byline=0&portrait=0&color=ffffff" width="600" height="338" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/30761131?byline=0&portrait=0&color=ffffff" width="600" height="338" frameborder="0"></iframe>
        </li>
        <li>
            <iframe src="http://player.vimeo.com/video/29340355?byline=0&portrait=0&color=ffffff" width="600" height="338" frameborder="0"></iframe>
    </li></ul>
</div>

This markup will add one carousel widget with five videos to the page. In the next step, you'll initialize the carousel.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijcarousel widget:

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

The above script and markup initializes the carousel.

What You've Accomplished

Press F5 to run the application, and notice that videos are displayed in the carousel widget. Press the Next or Previous buttons to change the current video displayed.