Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript snippet to turn a LightSwitch List into a Slider.
/// <reference path="jquery-1.7.1.js" />
/// <reference path="jquery.mobile-1.1.1.js" />
/// <reference path="msls-1.0.0.js" />
(function ($) {
$.widget("switchtory.lightswitchSlider", {
options: {
timerInterval: 4000
},
_create: function () {
},
_init: function () {
this.totalChildren = 0;
this.currentIndex = 0;
this.elementsToSlide = undefined;
this.mainHtmlElement = this.element[0];
this.visualCollection = undefined;
},
destroy: function () {
},
bindToList: function (contentItem) {
if (!contentItem.kind == "Collection") {
alert('Pass me a contentItem bound to a collection please');
}
this.visualCollection = contentItem.value;
},
render: function (contentItem) {
if (!this.visualCollection.isLoaded) {
alert('Cannot render before the collection is loaded');
}
this.currentIndex = 0;
if (contentItem.value == $(this.visualCollection.data).last()[0]) {
var slider = this;
slider.totalChildren = slider.visualCollection.count;
slider.elementsToSlide = $(slider.mainHtmlElement).children("div").children("ul").children("li");
slider.elementsToSlide.each(function () { $(this).hide(); });
slider.elementsToSlide.first().fadeIn('slow', function () { slider._slideToNext(); });
}
},
//recursive function that "slides" to the next sibling
_slideToNext: function () {
var slider = this;
if (slider.totalChildren != 0) {
setTimeout(function () {
$($(slider.elementsToSlide).get(slider.currentIndex)).fadeOut('slow', function () {
slider.currentIndex = ++slider.currentIndex % slider.totalChildren;
$($(slider.elementsToSlide).get(slider.currentIndex)).fadeIn('slow');
});
slider._slideToNext();
}, slider.options.timerInterval);
}
}
});
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.