Applying Slidesjs slide on Knockout binded image list

Question

When I try to apply Slidesjs (carousel-like) slide animation on an image list (shown below), an error appears and images are like stacked over themselves with no slide animation. Anyone tried an image slider on Knockout binded image list fed by Web Api?

uncaught typeerror cannot read property 'style' of undefined (at slidesControl[0].style[transform] below)

 if (this.data.vendorPrefix) {
      prefix = this.data.vendorPrefix;
      transform = prefix + "Transform";
      duration = prefix + "TransitionDuration";
      timing = prefix + "TransitionTimingFunction";
      ERROR LINE-->slidesControl[0].style[transform] = "translateX(" + direction + "px)";
      ...[Script goes on]

Error occurs because there is no style attribute on slidesContainer[0], there is no slidesContainer either beacuse it is set as:

slidesControl = $(".slidesjs-control", $element)

So the problem is why slidesjs-control is not generated by Slidesjs plugin. Any idea?

EDIT (A Hint)

I have discovered that when slidesjs plugin initializes, there are NO element in #slider div. But Knockout should have filled it before slidesjs starts. Because Knockout code comes first. This is what I get when I typed $("#slider") on console in Init method of SlidesJs and hit Enter:

<div id="slider" data-bind="foreach: banners" style="overflow:hidden;"></div>

My HTML:

<div class="webTV">
  <div class="slideBox">
    <div id="slider" data-bind="foreach: banners">
      <a data-bind="attr: { href: $data.Href, target: $data.Target }">
        <img data-bind="attr: { src: $data.ImageUrl }" width="728" height="288" alt="" />
      </a>
    </div>
  </div>
</div>

My Slidesjs Script:

$(window).load(function() {
  $('#slider').slidesjs({
    width: 728,
    height: 288
  });
});

My Knockout Script:

function BannerViewModel() {
  var self = this;
  self.banners = ko.observableArray([]);
  var baseUri = '/api/Home/GetSliderBanners';
  $.getJSON(baseUri, function (data) {
    self.banners(data.SliderBanners);
  });
}

$(document).ready(function () {
  ko.applyBindings(new BannerViewModel(), document.getElementById('slider'));
});

Answer 1

When the slider script is called inside getJSON (right after the data is retrieved from the service) it worked.

The problem was, when slider script initializes sliding, it receives #slider HTML (input) as empty. So it tries to create elements for each child of slider and then calls the style attribute of a non-existing element, which generates this error: cannot read property 'style' of undefined

function BannerViewModel() {
  var self = this;
  self.banners = ko.observableArray([]);
  var baseUri = '/api/Home/GetSliderBanners';
  $.getJSON(baseUri, function (data) {
    self.banners(data.SliderBanners);
    $('#slider').slidesjs({
      width: 728,
      height: 288
    });
  });
}

Answer 2

I would try the following and see if you can get the data first and pass it in as a constructor to the view model.

function BannerViewModel(sliderBanners) {
  var self = this;
  self.banners = ko.observableArray(sliderBanners);
}

$(document).ready(function () {
  var baseUri = '/api/Home/GetSliderBanners';
  var sliderBanners;
  $.getJSON(baseUri, function (data) {
    sliderBanners = data.SliderBanners);
  });
  ko.applyBindings(new BannerViewModel(sliderBanners), document.getElementById('slider'));
});

getJSON is asynchronous so you may have to check it returns data before applyBindings.