@{
    ViewBag.Title = "Content";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}

@section header
{
    <script id="scriptInit" type="text/javascript">
         $(document).ready(function () {
             $("#wijcarousel").wijcarousel();
         });
    </script>
    <style type="text/css">
        #wijcarousel
        {
            width: 680px;
            height: 195px;
        }
        
        #wijcarousel img
        {
            float: left;
            background: #fafafa;
            border: solid 1px #999DB2;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: 5px;
            margin: 0 1em 0 0;
        }
        #wijcarousel li
        {
            padding: 1em 2em;
        }
        #wijcarousel .image-shadow
        {
            float: left;
            padding-bottom: 9px;
        }
        #wijcarousel p
        {
            font-style: italic;
        }
    </style>
}
<h2>
    Overview</h2>
<div class="main demo">
  <!-- Begin demo markup -->
            <div>
                <div id="wijcarousel" class="ui-corner-all ui-widget-content">
                    <ul>
                        <li>
                            <div class="image-shadow">
                                <img src="http://lorempixum.com/200/150/city/1" alt="City 1" />
                            </div>
                            <h3>
                                Lorem Ipsum</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida, justo
                                in fringilla cursus, dui orci ornare augue, at placerat odio lectus vitae lorem.
                                Duis consequat mauris erat, vel vulputate velit. </p>
                        </li>
                        <li>
                            <div class="image-shadow">
                               <img src="http://lorempixum.com/200/150/city/2" alt="City 2" />
                            </div>
                            <h3>
                                Vestibulum</h3>
                            <p>
                                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                                Curae; Integer lobortis venenatis porttitor. Phasellus semper orci vel nibh aliquam
                                sed tempor felis cursus.</p>
                        </li>
                        <li>
                            <div class="image-shadow">
                                <img src="http://lorempixum.com/200/150/city/3" alt="City 3" />
                            </div>
                            <h3>
                                Phasellus</h3>
                            <p>
                                Phasellus ornare nulla quis tellus euismod sit amet tincidunt nulla tincidunt. In
                                hac habitasse platea dictumst. Integer et eros in quam mollis tempor. Duis facilisis
                                vestibulum arcu.</p>
                        </li>
                        <li>
                            <div class="image-shadow">
                                <img src="http://lorempixum.com/200/150/city/4" alt="City 4" />
                            </div>
                            <h3>
                                Venenatis</h3>
                            <p>
                                Vestibulum venenatis faucibus eros, vitae vulputate ipsum tempor ut. Donec ut ligula
                                a metus volutpat sagittis. Duis sodales, lorem nec suscipit imperdiet, sapien metus
                                tempor nibh, dapibus pulvinar lorem lacus molestie lacus.
                            </p>
                        </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 how to customize the content of wijcarousel item.
    </p>
}
