Вот код, взятый прямо со страницы опекуна:
ImageSlider = function (n, i, t) {
var e = {};
e.init = function () {
e.container = n;
e.beforeUrl = i;
e.afterUrl = t;
e.width = e.container.width();
e.height = e.container.height();
e.renderHtml();
e.loadImages()
};
e.renderHtml = function () {
var i = document.createDocumentFragment(),
n = document.createElement("div");
n.className = "imageMask";
n.style.position = "absolute";
n.style.overflow = "hidden";
n.style.width = e.width + "px";
n.style.height = e.height + "px";
n.style.webkitBackfaceVisibility = "hidden";
var y = document.createElement("div");
y.style.position = "absolute";
y.style.webkitBackfaceVisibility = "hidden";
y.id = "before";
var r = document.createElement("div");
r.style.position = "absolute";
r.style.webkitBackfaceVisibility = "hidden";
r.id = "after";
var w = document.createElement("div");
w.className = "slider";
w.style.position = "absolute";
w.style.webkitBackfaceVisibility = "hidden";
var t = document.createElement("div");
t.style.left = "-2px";
t.style.width = "4px";
t.style.position = "absolute";
t.style.height = e.height + "px";
t.style.backgroundColor = "#FFF";
t.style.boxShadow = "0 0 10px rgba(0, 0, 0, 1)";
t.style.webkitBoxShadow = "0 0 10px rgba(0, 0, 0, 1)";
t.style.MozBoxShadow = "0 0 10px rgba(0, 0, 0, 1)";
var F = document.createElement("div");
F.style.position = "absolute";
F.style.width = e.width + "px";
F.style.height = e.height + "px";
n.appendChild(r);
w.appendChild(t);
i.appendChild(y);
i.appendChild(n);
i.appendChild(w);
i.appendChild(F);
e.container[0].style.position = "relative";
e.container[0].style.overflow = "hidden";
e.container.append(i.cloneNode(!0));
e.preloader = e.container.children(".preloader");
e.preloader[0].style.position = "absolute";
e.preloader[0].style.top = (e.height - e.preloader.css("height").replace("px", "")) * 0.5 + "px";
e.preloader[0].style.left = (e.width - e.preloader.css("width").replace("px", "")) * 0.5 + "px";
e.handle = e.container.children(".slider");
e.handleDisplay = e.handle.children();
e.handleDisplay.hide();
e.mask = e.container.children(".imageMask");
e.before = e.container.children("#before");
e.after = e.mask.children("#after")
};
e.loadImages = function () {
e.imagesToLoad = 0;
e.imagesLoaded = 0;
e.loadImage(e.before, e.beforeUrl);
e.loadImage(e.after, e.afterUrl)
};
e.loadImage = function (i, n) {
e.imagesToLoad++;
var t = new Image;
$(t).load(function () {
$(this).hide();
$(i).removeClass("loading").append(this);
e.imageLoaded()
}).error(function () {}).attr("src", n)
};
e.imageLoaded = function () {
e.imagesLoaded++;
e.imagesLoaded >= e.imagesToLoad && e.allReady()
};
e.allReady = function () {
e.setPosition(0, !0);
e.before.children().fadeIn(500);
e.after.children().fadeIn(500, e.finalise)
};
e.finalise = function () {
e.dragging = !1;
e.candrag = !0;
e.lastXPos = 0;
e.velocity = 0;
Modernizr.touch && (document.addEventListener("touchstart", e.touchHandler, !0), document.addEventListener("touchmove", e.touchHandler, !0), document.addEventListener("touchend", e.touchHandler, !0), document.addEventListener("touchcancel", e.touchHandler, !0));
e.container.mousedown(e.mouseDownHandler);
e.container.mouseup(e.mouseUpHandler);
e.container.mousemove(e.mouseMoveHandler);
e.handleDisplay.fadeIn(250);
e.preloader.remove();
e.setPosition(e.width * 0.5, !1);
Ticker.setFPS(30);
Ticker.addListener(e)
};
e.tick = function () {
if (e.dragging) e.lastXPos = e.handle.position().left;
else if (e.velocity != 0) if (Math.abs(e.velocity) < 0.2) e.velocity = 0;
else {
e.velocity *= 0.9;
var i = e.handle.position().left + e.velocity;
if (i >= e.width) i = e.width, e.velocity = -e.velocity * 0.5;
else if (i <= 0) i = 0, e.velocity = -e.velocity * 0.5;
e.setPosition(i, !0)
}
};
e.mouseDownHandler = function (i) {
e.canDrag = !0;
e.velocity = 0;
e.setPosition(i.pageX - $(i.target).offset().left, !1);
e.lastXPos = i.pageX - $(i.target).offset().left;
i.preventDefault()
};
e.mouseUpHandler = function (i) {
e.dragging ? (e.velocity = (e.handle.position().left - e.lastXPos) * 0.5, e.dragging = !1) : e.setPosition(i.pageX - $(i.target).offset().left, !1);
e.canDrag = !1;
i.preventDefault()
};
e.mouseMoveHandler = function (i) {
if (e.canDrag) e.dragging = !0, e.setPosition(i.pageX - $(i.target).offset().left, !0);
i.preventDefault()
};
e.setPosition = function (i, n) {
var t = i - e.mask.width(),
r = n ? 0 : 0.5;
Modernizr.csstransforms && Modernizr.csstransitions ? (e.applyTransition(e.handle[0].style, "all " + r + "s ease-out 0s"), e.applyTransition(e.mask[0].style, "all " + r + "s ease-out 0s"), e.applyTransition(e.after[0].style, "all " + r + "s ease-out 0s"), / AppleWebKit\//.test(navigator.userAgent) ? (e.applyTransform(e.handle[0].style, "matrix(1,0,0,1," + i + ",0)"), e.applyTransform(e.mask[0].style, "matrix(1,0,0,1," + t + ",0)"), e.applyTransform(e.after[0].style, "matrix(1,0,0,1," + -t + ",0)")) : (e.applyTransform(e.handle[0].style, "matrix(1,0,0,1," + i + "px ,0)"), e.applyTransform(e.mask[0].style, "matrix(1,0,0,1," + t + "px ,0)"), e.applyTransform(e.after[0].style, "matrix(1,0,0,1," + -t + "px ,0)"))) : (e.mask.stop(), e.mask.animate({
width: i
}, r * 1E3), e.handle.stop(), e.handle.animate({
left: i
}, r * 1E3))
};
e.applyTransform = function (e, i) {
e.transform = e.msTransform = e.OTransform = e.MozTransform = e.webkitTransform = i
};
e.applyTransition = function (e, i) {
e.transition = e.msTransition = e.OTransition = e.MozTransition = e.webkitTransition = i
};
e.touchHandler = function (e) {
var i = e.changedTouches[0],
n = "";
switch (e.type) {
case "touchstart":
n = "mousedown";
break;
case "touchmove":
n = "mousemove";
break;
case "touchend":
n = "mouseup";
break;
default:
return
}
var r = document.createEvent("MouseEvent");
r.initMouseEvent(n, !0, !0, window, 1, i.screenX, i.screenY, i.clientX, i.clientY, !1, !1, !1, !1, 0, null);
i.target.dispatchEvent(r);
e.preventDefault()
};
e.init();
return {}
}
Как видите, это довольно беспорядок. Первый аргумент является объектом jQuery, а второй и третий - до / после URL.