Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tiny Slider - with plyr.io video stop
app.pageSliders = {
slider: null,
container: ".tiny-slider",
init: function() {
// no reason to continue init if no slider on page
if (!document.querySelector("#mainslider")) {
return;
}
app.pageSliders.slider = tns({
container: ".tiny-slider",
mode: "gallery",
mouseDrag: true,
controls: true,
autoHeight: true,
nav: true,
speed: 1000,
onInit: function() {
$("#bannerload")
.removeClass("onload-hide")
.addClass("banner-isloaded");
$(".tns-item.tns-slide-active").addClass("firstActiveItem");
bLazy.load(imagesToLoad);
window.addEventListener(
"resize",
Foundation.util.throttle(function() {
app.pageSliders.adjustHeight();
}, 150)
);
app.pageSliders.adjustHeight();
}
});
app.pageSliders.slider.events.on("transitionEnd", function() {
bLazy.revalidate();
if ($(".itemx .plyr").length > 0) {
app.videoPlayer.pausePlayers();
}
});
app.pageSliders.slider.events.on("transitionStart", function(ev) {
// HEIGHT NEEDS TO BE DYNAMIC ON RESIZE -
app.pageSliders.adjustHeight();
$(".tns-item").removeClass("firstActiveItem");
if ($(".itemx .plyr").length > 0) {
app.videoPlayer.pausePlayers();
}
});
//loop over all .video-slides and add event listeners to stop propagation
Array.prototype.slice
.call(document.querySelectorAll(".video-slide"))
.forEach(function(slide) {
slide.addEventListener("touchstart", function(ev) {
ev.stopPropagation();
});
slide.addEventListener("mousedown", function(ev) {
ev.stopPropagation();
});
});
},
adjustHeight: function() {
var container = document.querySelector(app.pageSliders.container);
container.style.height =
container.querySelector(".tns-slide-active").offsetHeight + "px";
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment