Wijmo Carousel Knockout

by ian_smithz

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.6.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.6.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.6.min.js"></script>
<script src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
<script src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
<div data-role="page" id="carouseltest">
        <div data-role="header" data-id="mpheader" data-position="fixed">
            This is the header
        </div>
        <div data-role="content">
            <div id="wijcarousel0" data-bind="wijcarousel: {step: step, display: display, showCaption: showCaption, showTimer: showTimer, showPager: showPager, loop: loop, data: data}">
            </div>
        </div>
        <div data-role="footer" data-position="fixed" class="footer">
            This is the footer
        </div>
        <!-- footer -->
    </div>
    <!-- carouseltest -->

CSS

#wijcarousel0
        {
            width: 610px;
            height: 115px;
        }

JavaScript

$(document).ready(function () {

            var vm = new CarouselViewModel();
            ko.applyBindings(
                    vm,
                    $("#carouseltest")[0]);


            

            function carouselData(img) {
                this.imageUrl = img,
                this.caption = "<span>Word Caption 1</span>"
            }

            function CarouselViewModel() {
                var self = this;
                self.step = ko.observable(1);
                self.display = ko.observable(3);
                self.showCaption = ko.observable(true);
                self.showTimer = ko.observable(false);
                self.showPager = ko.observable(false);
                self.loop = ko.observable(false);
                self.data = ko.observableArray();

                self.data.push(new carouselData("http://lorempixum.com/200/150/sports/1"));

            }
    
    vm.data.push(new carouselData("http://lorempixum.com/200/150/sports/2"));
            vm.data.push(new carouselData("http://lorempixum.com/200/150/sports/3"));
            vm.data.push(new carouselData("http://lorempixum.com/200/150/sports/4"));
            vm.data.push(new carouselData("http://lorempixum.com/200/150/sports/5"));
            vm.data.push(new carouselData("http://lorempixum.com/200/150/sports/6"));
        });