wijcarousel

The wijcarousel widget allows you to display a list of images in a virtualizing carousel. The wijcarousel widget is created by the jquery.wijmo.wijcarousel.js library.

You can include images in the widget, such as in the following example:

<div>
    <div id="wijcarousel0">
        <ul>
            <li>
                <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word" /><span>Word Caption 1</span></li>
            <li>
                <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word2" /><span>Word Caption 2</span></li>
            <li>
                <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word3" /><span>Word Caption 3</span></li>
            <li>
                <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word4" /><span>Word Caption 4</span></li>
            <li>
                <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word5" /><span>Word Caption 5</span></li>
            <li>
                <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word" /><span>Word Caption 6</span></li>
            <li>
                <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word2" /><span>Word Caption 7</span></li>
            <li>
                <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word3" /><span>Word Caption 8</span></li>
            <li>
                <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word4" /><span>Word Caption 9</span></li>
            <li>
                <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word5" /><span>Word Caption 10</span></li>
        </ul>
    </div>
</div>

You can initialize either of these DOM element structures with the following script.

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijcarousel0").wijcarousel({
                display: 3,
                step: 2,
                orientation: "horizontal"
            }); 
        });
    </script>
And add some CSS styling:
<style type="text/css">
    #wijcarousel0
    {
        width: 1050px;
        height: 300px;
    }
</style>

The markup and script featured here results in a similar carousel:

For more information about wijcarousel, click one of the following external links to view our Wijmo wiki documentation: