sorry to be this forward, but I need to see a working example of Knockoutjs working with jCarouselLite (in jsFiddle please). I can't seem to make it work. Here is an earlier question for me regarding this:
Having trouble making Knockout and jCarouselLite to work
Now, what I did was try it out bare bones outside of my actual project. Here is the code I have:
the HTML:
<h2>Index</h2>
<div id="index-root">
<div class="house-row" data-bind="slide: true">
<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 data-bind="foreach: images">
<li>
<div class="house-row-box nopadding-left nopadding-right">
<div class="image-wrapper">
<img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
And the KOjs:
$(document).ready(function () {
var model = new IndexViewModel();
model.init();
ko.applyBindings(model, document.getElementById("index-root"));
});
var IndexViewModel = function () {
var self = this;
self.images = ko.observableArray();
//
// Custom bindings
//
//ko.bindingHandlers.slide = {
// init: function (element) {
// },
// update: function (element, valueAccessor) {
// $(element).jCarouselLite({
// btnNext: ".next",
// btnPrev: ".prev",
// visible: 3,
// speed: 1450,
// mouseWheel: true
// });
// }
//};
//
// Methods
//
self.init = function () {
self.images.push({
image: "/Images/1.png"
});
self.images.push({
image: "/Images/2.png"
});
self.images.push({
image: "/Images/3.png"
});
self.images.push({
image: "/Images/4.png"
});
self.images.push({
image: "/Images/5.png"
});
//$(".house-row").jCarouselLite({
// btnNext: ".next",
// btnPrev: ".prev",
// visible: 3,
// speed: 1450,
// mouseWheel: true
//});
};
};
$(document).ready(function () {
$(".house-row").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
speed: 1450,
mouseWheel: true
});
});
The commented $(".house-row").jCarouselLite... and ko.bindingHandlers.slide... are the locations I tried initializing jCarouselLite.
A sample in a jsfiddle would really help me clear this.
Here's a first stab at it. I had to put the initial call inside a timer because it was being called before the foreach
binding had happened, so the carousel didn't have any contents. A more advanced design would probably incorporate the foreach
binding as part of the slide
.
The setup call is in the init
section because it only happens once. I suggested the update
section in your previous thread because I thought there would be a need to handle repeated actions on the carousel and bind its selection to an observable or something. We don't do that here.
ko.bindingHandlers.slide = {
init: function(element) {
setTimeout(function() {
$(element).jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
speed: 1450,
mouseWheel: true
});
}, 0);
},
update: function(element, valueAccessor) {}
};
$(document).ready(function() {
var model = new IndexViewModel();
model.init();
ko.applyBindings(model, document.getElementById("index-root"));
});
var IndexViewModel = function() {
var self = this;
self.images = ko.observableArray();
//
// Methods
//
self.init = function() {
self.images.push({
image: "/Images/1.png"
});
self.images.push({
image: "/Images/2.png"
});
self.images.push({
image: "/Images/3.png"
});
self.images.push({
image: "/Images/4.png"
});
self.images.push({
image: "/Images/5.png"
});
};
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgit.com/ganeshmax/jcarousellite/master/jquery.jcarousellite.min.js"></script>
<h2>Index</h2>
<div id="index-root">
<div class="house-row" data-bind="slide: true">
<button class="prev">«</button>
<button class="next">»</button>
<ul data-bind="foreach: images">
<li>
<div class="house-row-box nopadding-left nopadding-right">
<div class="image-wrapper">
<img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>