Carousel Markup and Scripting

The HTML markup for a wijCarousel widget looks like this.

Markup	Copy Code
<div id="wijcarousel0"> <ul> <li><img alt="1" src="Images\sports1.png" title="Word1" /> <span>Word Caption 1</span></li> <li><img alt="2" src="Images\sports2.png" title="Word2" /> <span>Word Caption 2</span></li> <li><img alt="3" src="Images\sports3.png" title="Word3" /> <span>Word Caption 3</span></li> <li><img alt="4" src="Images\sports4.png" title="Word4" /> <span>Word Caption 4</span></li> <li><img alt="5" src="Images\sports5.png" title="Word5" /> <span>Word Caption 5</span></li> <li><img alt="6" src="Images\sports6.png" title="Word6" /> <span>Word Caption 6</span></li> </ul> </div>

Markup

Copy Code

<div id="wijcarousel0">
    <ul>
        <li><img alt="1" src="Images\sports1.png" title="Word1" /> 
        <span>Word Caption 1</span></li>
        <li><img alt="2" src="Images\sports2.png" title="Word2" />
        <span>Word Caption 2</span></li>
        <li><img alt="3" src="Images\sports3.png" title="Word3" />
        <span>Word Caption 3</span></li>
        <li><img alt="4" src="Images\sports4.png" title="Word4" />
        <span>Word Caption 4</span></li>
        <li><img alt="5" src="Images\sports5.png" title="Word5" />
        <span>Word Caption 5</span></li>
        <li><img alt="6" src="Images\sports6.png" title="Word6" />
        <span>Word Caption 6</span></li>
    </ul>
</div>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20162.99", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcarousel"], function () { $(document).ready(function () { $("#wijcarousel0").wijcarousel({ display: 3, step: 2, orientation: "horizontal" }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20162.99",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcarousel"], function () {
        $(document).ready(function () {
            $("#wijcarousel0").wijcarousel({
                display: 3,
                step: 2,
                orientation: "horizontal"
            });
        });
    });
</script>

The markup and script featured here results in the following live widget. Click the buttons to scroll through the images.

KO

KO Carousel Binding

Reference