@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijcarousel0").wijcarousel({
                display: 1,
                showTimer: true,
                showPager: true,
                loop: true,
                pagerType: "dots",
                showContorlsOnHover: false
            });
        });
    </script>
    <style type="text/css">
        #wijcarousel0
        {
            width: 750px;
            height: 300px;
        }
    </style>
}
<h2>
    Overview</h2>
<div class="main demo">
    <!-- Begin demo markup -->
    <div>
        <div id="wijcarousel0">
            <ul>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/1" alt="Sports 1" />
                    <span>
                        <h3>
                            Word Caption 1</h3>
                        Word Caption 1</span> </li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/2" alt="Sports 2" />
                    <span>Word Caption 2</span></li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/3" alt="Sports 3" />
                    <span>Word Caption 3</span></li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/4" alt="Sports 4" />
                    <span>Word Caption 4</span></li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/5" alt="Sports 5" />
                    <span>Word Caption 5</span></li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/6" alt="Sports 6" />
                    <span>Word Caption 6</span></li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/7" alt="Sports 7" />
                    <span>Word Caption 7</span></li>
                <li>
                    <img src="http://lorempixum.com/750/300/sports/8" alt="Sports 8" />
                    <span>Word Caption 8</span></li>
            </ul>
        </div>
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
        <!-- End options markup -->
    </div>
</div>
@section description
        {
    <p>
        This sample illustrates the default wijcarousel, which is useful for displaying
        images or other content in a list. The carousel has next/prev button to navigate
        images, it can also be played automatically. 
    </p>
}
