We have 2 videos on our careers page (http://www.affinnova.com/careers) that are included in a slider. The slider is based off of glide.js - which I'm not too familiar with.
The problem is that when the page loads, there is an animation that slides between the 2 videos. If you start playing a video, it will slide to the next when while it's playing. I'm trying to figure out which part of the code I need to address to prevent this behavior. Here's the code:
(function (f, e, b, h) {
var d = "glide",
g = {
autoplay: 4000,
animationTime: 500,
arrows: true,
arrowsWrapperClass: "slider-arrows",
arrowMainClass: "slider-arrow",
arrowRightClass: "slider-arrow--right",
arrowRightText: "next",
arrowLeftClass: "slider-arrow--left",
arrowLeftText: "prev",
nav: true,
navCenter: true,
navClass: "slider-nav",
navItemClass: "slider-nav__item",
navCurrentItemClass: "slider-nav__item--current",
touchDistance: 60
};
function a(k, j) {
var i = this;
i.options = f.extend({}, g, j);
i.parent = k;
i.wrapper = i.parent.children();
i.slides = i.wrapper.children();
i.currentSlide = 0;
i.CSS3support = true;
i.init();
i.build();
i.play();
if (i.options.touchDistance) {
i.swipe()
}
f(b).on("keyup", function (l) {
if (l.keyCode === 39) {
i.slide(1)
}
if (l.keyCode === 37) {
i.slide(-1)
}
});
i.parent.add(i.arrows).add(i.nav).on("mouseover mouseout", function (l) {
i.pause();
if (l.type === "mouseout") {
i.play()
}
});
f(e).on("resize", function () {
i.init();
i.slide(0)
});
return {
current: function () {
return -(i.currentSlide) + 1
},
play: function () {
i.play()
},
pause: function () {
i.pause()
},
next: function (l) {
i.slide(1, false, l)
},
prev: function (l) {
i.slide(-1, false, l)
},
jump: function (m, l) {
i.slide(m - 1, true, l)
},
nav: function (l) {
if (i.navWrapper) {
i.navWrapper.remove()
}
i.options.nav = (l) ? l : i.options.nav;
i.navigation()
},
arrows: function (l) {
if (i.arrowsWrapper) {
i.arrowsWrapper.remove()
}
i.options.arrows = (l) ? l : i.options.arrows;
i.arrows()
}
}
}
a.prototype.build = function () {
var i = this;
if (i.options.arrows) {
i.arrows()
}
if (i.options.nav) {
i.navigation()
}
};
a.prototype.navigation = function () {
var j = this;
if (j.slides.length > 1) {
var q = j.options,
n = (j.options.nav === true) ? j.parent : j.options.nav;
j.navWrapper = f("<div />", {
"class": q.navClass
}).appendTo(n);
var p = j.navWrapper,
l;
for (var k = 0; k < j.slides.length; k++) {
l = f("<a />", {
href: "#",
"class": q.navItemClass,
"data-distance": k
}).appendTo(p);
p[k + 1] = l
}
var m = p.children();
m.eq(0).addClass(q.navCurrentItemClass);
if (q.navCenter) {
p.css({
left: "50%",
width: m.outerWidth(true) * m.length,
"margin-left": -p.outerWidth(true) / 2
})
}
m.on("click touchstart", function (i) {
i.preventDefault();
j.slide(f(this).data("distance"), true)
})
}
};
a.prototype.arrows = function () {
var j = this;
if (j.slides.length > 1) {
var l = j.options,
k = (j.options.arrows === true) ? j.parent : j.options.arrows;
j.arrowsWrapper = f("<div />", {
"class": l.arrowsWrapperClass
}).appendTo(k);
var i = j.arrowsWrapper;
i.right = f("<a />", {
href: "#",
"class": l.arrowMainClass + " " + l.arrowRightClass,
"data-distance": "1",
html: l.arrowRightText
}).appendTo(i);
i.left = f("<a />", {
href: "#",
"class": l.arrowMainClass + " " + l.arrowLeftClass,
"data-distance": "-1",
html: l.arrowLeftText
}).appendTo(i);
i.children().on("click touchstart", function (m) {
m.preventDefault();
j.slide(f(this).data("distance"), false)
})
}
};
a.prototype.slide = function (j, q, p) {
var o = this,
l = (q) ? 0 : o.currentSlide,
m = -(o.slides.length - 1),
n = o.options.navCurrentItemClass,
i = o.slides.spread;
o.pause();
if (l === 0 && j === -1) {
l = m
} else {
if (l === m && j === 1) {
l = 0
} else {
l = l + (-j)
}
}
var k = i * l + "px";
if (o.CSS3support) {
o.wrapper.css({
"-webkit-transform": "translate3d(" + k + ", 0px, 0px)",
"-moz-transform": "translate3d(" + k + ", 0px, 0px)",
"-ms-transform": "translate3d(" + k + ", 0px, 0px)",
"-o-transform": "translate3d(" + k + ", 0px, 0px)",
transform: "translate3d(" + k + ", 0px, 0px)"
})
} else {
o.wrapper.stop().animate({
"margin-left": k
}, o.options.animationTime)
} if (o.options.nav) {
o.navWrapper.children().eq(-l).addClass(n).siblings().removeClass(n)
}
o.currentSlide = l;
if ((p !== "undefined") && (typeof p === "function")) {
p()
}
o.play()
};
a.prototype.play = function () {
var i = this;
if (i.options.autoplay) {
i.auto = setInterval(function () {
i.slide(1, false)
}, i.options.autoplay)
}
};
a.prototype.pause = function () {
if (this.options.autoplay) {
this.auto = clearInterval(this.auto)
}
};
a.prototype.swipe = function () {
var u = this,
q, o, k, j, r, p, v, w, l, s = 180 / Math.PI,
t, i, n, m;
u.parent.on("touchstart", function (x) {
q = x.originalEvent.touches[0] || x.originalEvent.changedTouches[0];
k = q.pageX;
j = q.pageY
});
u.parent.on("touchmove", function (x) {
q = x.originalEvent.touches[0] || x.originalEvent.changedTouches[0];
r = q.pageX;
p = q.pageY;
t = r - k;
i = p - j;
n = Math.abs(t << 2);
m = Math.abs(i << 2);
v = Math.sqrt(n + m);
w = Math.sqrt(m);
l = Math.asin(w / v);
if ((l * s) < 32) {
x.preventDefault()
}
});
u.parent.on("touchend", function (x) {
q = x.originalEvent.touches[0] || x.originalEvent.changedTouches[0];
o = q.pageX - k;
if (o > u.options.touchDistance) {
u.slide(-1)
} else {
if (o < -u.options.touchDistance) {
u.slide(1)
}
}
})
};
a.prototype.init = function () {
var i = this,
j = i.parent.width();
i.slides.spread = j;
i.wrapper.width(j * i.slides.length);
i.slides.width(i.slides.spread);
if (!c("transition") || !c("transform")) {
i.CSS3support = false
}
};
function c(o) {
var j = false,
l = "Khtml Ms O Moz Webkit".split(" "),
n = b.createElement("div"),
m = null;
o = o.toLowerCase();
if (n.style[o]) {
j = true
}
if (j === false) {
m = o.charAt(0).toUpperCase() + o.substr(1);
for (var k = 0; k < l.length; k++) {
if (n.style[l[k] + m] !== h) {
j = true;
break
}
}
}
return j
}
f.fn[d] = function (i) {
return this.each(function () {
if (!f.data(this, "api_" + d)) {
f.data(this, "api_" + d, new a(f(this), i))
}
})
}
})(jQuery, window, document);I already tried setting autoplay to false, which would seem to make sense, but that seems to turn playback off on the second video. In fact, the video playback controls seem to be hijacked by this script once you start playing a video.
Any help would be appreciated.