Having trouble making Knockout and jCarouselLite t

问题:

I have this knockoutjs code that loads images:

self.getStudents = function (country) {
    $.getJSON("/home/getStudents?country=" + country, function (result) {
        if (result.data.length > 0) {
            self.properties.removeAll();
            ko.utils.arrayMap(result.data, function (s) {
                self.properties.push({
                    id: property.Item.Id,
                    address: s.address,
                    city: s.city,
                    state: s.state,
                    country: s.country,
                    image: s.image
                });
            });

            //alert(self.properties().length);

            jQuery(".feature-slider").jCarouselLite({
                btnNext: ".slider-btn.next",
                btnPrev: ".slider-btn.prev",
                mouseWheel: true,
                visible: 8,
            });

            var c_window = jQuery(this).width();
            if (c_window <= 767) {
                jQuery(".house-row").jCarouselLite({
                    btnNext: "#item-next",
                    btnPrev: "#item-prev",
                    visible: 4,
                    speed: 1450
                });
            } else {
                jQuery(".house-row").jCarouselLite({
                    btnNext: "#item-next",
                    btnPrev: "#item-prev",
                    visible: 4,
                    mouseWheel: true,
                    auto: 2000,
                    speed: 6000,
                    hoverPause: true
                });
            }
        }
    });
};

and the HTML that loads it inside the div that jCarouselLite will use:

<div class="house-row">
    <div class="house-row-nav"><a href="javascript:void(0)" id="item-prev"></a></div>
    <div class="house-row-nav"><a href="javascript:void(0)" id="item-next"></a></div>


    <ul>
        <!-- ko foreach: properties -->
        <li>
            <div class="house-row-box nopadding-left nopadding-right">
                <div class="image-wrapper">
                    <img data-bind="attr: { src: image }" alt="image">
                    <i class="icon-bg arrow-bg"><img src="~/Areas/Consumer/Assets/images/arrow-bg.png"></i>+
                    <i class="icon-bg arrow-bg-hover"><img src="~/Areas/Consumer/Assets/images/arrow-bg-hover.png"></i>
                </div>
                <div class="detais-area">

                    <h6 class="box-title"><span data-bind="text: address"></span></h6>
                    <h6><span data-bind="text: country"> </h6>
                    <hr>
                    <div class="pull-left"><div class="bed-count"><i class="icon icon-bed"></i>3</div></div>
                    <div class="pull-right price-box"><h4>约12, 095万元</h4></div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </li>
        <!-- /ko -->
    </ul>
</div>

But the carousel won't work. It displays the image in a top-down manner and doesn't move. When I use static images, everything works properly.

Maybe someone has encountered this and is able to help me? It will really be appreciated. Thanks.