I would like to use the slider as a “component”. Accordingly, I need only the slider code. I found it — here it is:
function(t, e, r) {
"use strict";
var n = r(14),
i = r(167),
a = {
ARROW_LEFT: 37,
ARROW_UP: 38,
ARROW_RIGHT: 39,
ARROW_DOWN: 40,
SPACE: 32,
ENTER: 13,
HOME: 36,
END: 35
},
s = 'a[href], area[href], [role="button"], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]';
n.define("slider", t.exports = function(t, e) {
var r, o, l, h = {},
c = t.tram,
u = t(document),
f = n.env(),
p = ".w-slider",
d = '<div class="w-slider-dot" data-wf-ignore />',
m = '<div aria-live="off" aria-atomic="true" class="w-slider-aria-label" data-wf-ignore />',
v = "w-slider-force-show",
y = i.triggers,
g = !1;
function E() {
(r = u.find(p)).length && (r.each(x), l || (b(), n.resize.on(_), n.redraw.on(h.redraw)))
}
function b() {
n.resize.off(_), n.redraw.off(h.redraw)
}
function _() {
r.filter(":visible").each(F)
}
function x(e, r) {
var n = t(r),
i = t.data(r, p);
i || (i = t.data(r, p, {
index: 0,
depth: 1,
hasFocus: {
keyboard: !1,
mouse: !1
},
el: n,
config: {}
})), i.mask = n.children(".w-slider-mask"), i.left = n.children(".w-slider-arrow-left"), i.right = n.children(".w-slider-arrow-right"), i.nav = n.children(".w-slider-nav"), i.slides = i.mask.children(".w-slide"), i.slides.each(y.reset), g && (i.maskWidth = 0), void 0 === n.attr("role") && n.attr("role", "region"), void 0 === n.attr("aria-label") && n.attr("aria-label", "carousel");
var a = i.mask.attr("id");
if (a || (a = "w-slider-mask-" + e, i.mask.attr("id", a)), o || i.ariaLiveLabel || (i.ariaLiveLabel = t(m).appendTo(i.mask)), i.left.attr("role", "button"), i.left.attr("tabindex", "0"), i.left.attr("aria-controls", a), void 0 === i.left.attr("aria-label") && i.left.attr("aria-label", "previous slide"), i.right.attr("role", "button"), i.right.attr("tabindex", "0"), i.right.attr("aria-controls", a), void 0 === i.right.attr("aria-label") && i.right.attr("aria-label", "next slide"), !c.support.transform) return i.left.hide(), i.right.hide(), i.nav.hide(), void(l = !0);
i.el.off(p), i.left.off(p), i.right.off(p), i.nav.off(p), S(i), o ? (i.el.on("setting" + p, M(i)), D(i), i.hasTimer = !1) : (i.el.on("swipe" + p, M(i)), i.left.on("click" + p, P(i)), i.right.on("click" + p, w(i)), i.left.on("keydown" + p, I(i, P)), i.right.on("keydown" + p, I(i, w)), i.nav.on("keydown" + p, "> div", M(i)), i.config.autoplay && !i.hasTimer && (i.hasTimer = !0, i.timerCount = 1, C(i)), i.el.on("mouseenter" + p, A(i, !0, "mouse")), i.el.on("focusin" + p, A(i, !0, "keyboard")), i.el.on("mouseleave" + p, A(i, !1, "mouse")), i.el.on("focusout" + p, A(i, !1, "keyboard"))), i.nav.on("click" + p, "> div", M(i)), f || i.mask.contents().filter(function() {
return 3 === this.nodeType
}).remove();
var s = n.filter(":hidden");
s.addClass(v);
var h = n.parents(":hidden");
h.addClass(v), g || F(e, r), s.removeClass(v), h.removeClass(v)
}
function S(t) {
var e = {
crossOver: 0
};
e.animation = t.el.attr("data-animation") || "slide", "outin" === e.animation && (e.animation = "cross", e.crossOver = .5), e.easing = t.el.attr("data-easing") || "ease";
var r = t.el.attr("data-duration");
if (e.duration = null != r ? parseInt(r, 10) : 500, T(t.el.attr("data-infinite")) && (e.infinite = !0), T(t.el.attr("data-disable-swipe")) && (e.disableSwipe = !0), T(t.el.attr("data-hide-arrows")) ? e.hideArrows = !0 : t.config.hideArrows && (t.left.show(), t.right.show()), T(t.el.attr("data-autoplay"))) {
e.autoplay = !0, e.delay = parseInt(t.el.attr("data-delay"), 10) || 2e3, e.timerMax = parseInt(t.el.attr("data-autoplay-limit"), 10);
var n = "mousedown" + p + " touchstart" + p;
o || t.el.off(n).one(n, function() {
D(t)
})
}
var i = t.right.width();
e.edge = i ? i + 40 : 100, t.config = e
}
function T(t) {
return "1" === t || "true" === t
}
function A(e, r, n) {
return function(i) {
if (r) e.hasFocus[n] = r;
else {
if (t.contains(e.el.get(0), i.relatedTarget)) return;
if (e.hasFocus[n] = r, e.hasFocus.mouse && "keyboard" === n || e.hasFocus.keyboard && "mouse" === n) return
}
r ? (e.ariaLiveLabel.attr("aria-live", "polite"), e.hasTimer && D(e)) : (e.ariaLiveLabel.attr("aria-live", "off"), e.hasTimer && C(e))
}
}
function I(t, e) {
return function(r) {
switch (r.keyCode) {
case a.SPACE:
case a.ENTER:
return e(t)(), r.preventDefault(), r.stopPropagation()
}
}
}
function P(t) {
return function() {
k(t, {
index: t.index - 1,
vector: -1
})
}
}
function w(t) {
return function() {
k(t, {
index: t.index + 1,
vector: 1
})
}
}
function C(t) {
D(t);
var e = t.config,
r = e.timerMax;
r && t.timerCount++ > r || (t.timerId = window.setTimeout(function() {
null == t.timerId || o || (w(t)(), C(t))
}, e.delay))
}
function D(t) {
window.clearTimeout(t.timerId), t.timerId = null
}
function M(r) {
return function(i, s) {
s = s || {};
var l = r.config;
if (o && "setting" === i.type) {
if ("prev" === s.select) return P(r)();
if ("next" === s.select) return w(r)();
if (S(r), R(r), null == s.select) return;
! function(r, n) {
var i = null;
n === r.slides.length && (E(), R(r)), e.each(r.anchors, function(e, r) {
t(e.els).each(function(e, a) {
t(a).index() === n && (i = r)
})
}), null != i && k(r, {
index: i,
immediate: !0
})
}(r, s.select)
} else {
if ("swipe" === i.type) {
if (l.disableSwipe) return;
if (n.env("editor")) return;
return "left" === s.direction ? w(r)() : "right" === s.direction ? P(r)() : void 0
}
if (r.nav.has(i.target).length) {
var h = t(i.target).index();
if ("click" === i.type && k(r, {
index: h
}), "keydown" === i.type) switch (i.keyCode) {
case a.ENTER:
case a.SPACE:
k(r, {
index: h
}), i.preventDefault();
break;
case a.ARROW_LEFT:
case a.ARROW_UP:
O(r.nav, Math.max(h - 1, 0)), i.preventDefault();
break;
case a.ARROW_RIGHT:
case a.ARROW_DOWN:
O(r.nav, Math.min(h + 1, r.pages)), i.preventDefault();
break;
case a.HOME:
O(r.nav, 0), i.preventDefault();
break;
case a.END:
O(r.nav, r.pages), i.preventDefault();
break;
default:
return
}
}
}
}
}
function O(t, e) {
var r = t.children().eq(e).focus();
t.children().not(r)
}
function k(e, r) {
r = r || {};
var n = e.config,
i = e.anchors;
e.previous = e.index;
var a = r.index,
l = {};
a < 0 ? (a = i.length - 1, n.infinite && (l.x = -e.endX, l.from = 0, l.to = i[0].width)) : a >= i.length && (a = 0, n.infinite && (l.x = i[i.length - 1].width, l.from = -i[i.length - 1].x, l.to = l.from - l.x)), e.index = a;
var h = e.nav.children().eq(a).addClass("w-active").attr("aria-pressed", "true").attr("tabindex", "0");
e.nav.children().not(h).removeClass("w-active").attr("aria-pressed", "false").attr("tabindex", "-1"), n.hideArrows && (e.index === i.length - 1 ? e.right.hide() : e.right.show(), 0 === e.index ? e.left.hide() : e.left.show());
var u = e.offsetX || 0,
f = e.offsetX = -i[e.index].x,
p = {
x: f,
opacity: 1,
visibility: ""
},
d = t(i[e.index].els),
m = t(i[e.previous] && i[e.previous].els),
v = e.slides.not(d),
E = n.animation,
b = n.easing,
_ = Math.round(n.duration),
x = r.vector || (e.index > e.previous ? 1 : -1),
S = "opacity " + _ + "ms " + b,
T = "transform " + _ + "ms " + b;
if (d.find(s).removeAttr("tabindex"), d.removeAttr("aria-hidden"), d.find("*").removeAttr("aria-hidden"), v.find(s).attr("tabindex", "-1"), v.attr("aria-hidden", "true"), v.find("*").attr("aria-hidden", "true"), o || (d.each(y.intro), v.each(y.outro)), r.immediate && !g) return c(d).set(p), void P();
if (e.index !== e.previous) {
if (o || e.ariaLiveLabel.text("Slide ".concat(a + 1, " of ").concat(i.length, ".")), "cross" === E) {
var A = Math.round(_ - _ * n.crossOver),
I = Math.round(_ - A);
return S = "opacity " + A + "ms " + b, c(m).set({
visibility: ""
}).add(S).start({
opacity: 0
}), void c(d).set({
visibility: "",
x: f,
opacity: 0,
zIndex: e.depth++
}).add(S).wait(I).then({
opacity: 1
}).then(P)
}
if ("fade" === E) return c(m).set({
visibility: ""
}).stop(), void c(d).set({
visibility: "",
x: f,
opacity: 0,
zIndex: e.depth++
}).add(S).start({
opacity: 1
}).then(P);
if ("over" === E) return p = {
x: e.endX
}, c(m).set({
visibility: ""
}).stop(), void c(d).set({
visibility: "",
zIndex: e.depth++,
x: f + i[e.index].width * x
}).add(T).start({
x: f
}).then(P);
n.infinite && l.x ? (c(e.slides.not(m)).set({
visibility: "",
x: l.x
}).add(T).start({
x: f
}), c(m).set({
visibility: "",
x: l.from
}).add(T).start({
x: l.to
}), e.shifted = m) : (n.infinite && e.shifted && (c(e.shifted).set({
visibility: "",
x: u
}), e.shifted = null), c(e.slides).set({
visibility: ""
}).add(T).start({
x: f
}))
}
function P() {
d = t(i[e.index].els), v = e.slides.not(d), "slide" !== E && (p.visibility = "hidden"), c(v).set(p)
}
}
function F(e, r) {
var n = t.data(r, p);
if (n) return function(t) {
var e = t.mask.width();
if (t.maskWidth !== e) return t.maskWidth = e, !0;
return !1
}(n) ? R(n) : void(o && function(e) {
var r = 0;
if (e.slides.each(function(e, n) {
r += t(n).outerWidth(!0)
}), e.slidesWidth !== r) return e.slidesWidth = r, !0;
return !1
}(n) && R(n))
}
function R(e) {
var r = 1,
n = 0,
i = 0,
a = 0,
s = e.maskWidth,
l = s - e.config.edge;
l < 0 && (l = 0), e.anchors = [{
els: [],
x: 0,
width: 0
}], e.slides.each(function(o, h) {
i - n > l && (r++, n += s, e.anchors[r - 1] = {
els: [],
x: i,
width: 0
}), a = t(h).outerWidth(!0), i += a, e.anchors[r - 1].width += a, e.anchors[r - 1].els.push(h);
var c = o + 1 + " of " + e.slides.length;
t(h).attr("aria-label", c), t(h).attr("role", "group")
}), e.endX = i, o && (e.pages = null), e.nav.length && e.pages !== r && (e.pages = r, function(e) {
var r, n = [],
i = e.el.attr("data-nav-spacing");
i && (i = parseFloat(i) + "px");
for (var a = 0, s = e.pages; a < s; a++)(r = t(d)).attr("aria-label", "Show slide " + (a + 1) + " of " + s).attr("aria-pressed", "false").attr("role", "button").attr("tabindex", "-1"), e.nav.hasClass("w-num") && r.text(a + 1), null != i && r.css({
"margin-left": i,
"margin-right": i
}), n.push(r);
e.nav.empty().append(n)
}(e));
var h = e.index;
h >= r && (h = r - 1), k(e, {
immediate: !0,
index: h
})
}
return h.ready = function() {
o = n.env("design"), E()
}, h.design = function() {
o = !0, setTimeout(E, 1e3)
}, h.preview = function() {
o = !1, E()
}, h.redraw = function() {
g = !0, E(), g = !1
}, h.destroy = b, h
})
};
However, if I delete all the JS code except this one, the slider stops working. Why? How can I extract the fragment I need from the code?
// It would be silly to use such bloated code for one component.