Preview Content

The wijcarousel widget allows users to preview the previous and next content element. Simply set the preview option to take advantage of this feature. See the Carousel > Preview sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Preview for an example.

Complete the following steps to preview carousel 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">
    <ul>
    <li>
        <img src="http://lorempixum.com/750/300/sports/1" alt="Sports 1" />
        <span>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>

This markup will add one carousel widget 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 and set the preview option:

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
    $("#wijcarousel0").wijcarousel({
    display: 1,
    showTimer: false,
    showPager: false,
    loop: false,
    showContorlsOnHover: false,
    preview: true
});
$("#Button1").click(function () {
$("#div1").css({ opacity: "" });
});
});
</script>
<style type="text/css">
#wijcarousel0
{
    width: 500px;
    height: 300px;
}
</style>

The above script and markup initializes the carousel, and sets the preview and style of the carousel.

What You've Accomplished

Press F5 to run the application, and notice that the previous and next elements in the carousel are previewed in the carousel widget. Press the Next or Previous buttons to change the current and previewed images.