I have a site with some js on the homepage, the site seems to work until you sit on it for a few minutes than kind of breaks, freezes up, etc.
I have one index/homepage with a “script-new.js” being used and the slider and page sliding effects work. But this is the js that breaks the site I believe.
That site/page is here: https://www.alpha-wireless.com/index-test.htm
I also have another “test” index/homepage with “script.js”, with this script, it doesn’t seem to break after visiting the site/page for a few minutes, but the slider doesn’t work, nor do the page effects (which I’m not too worried about that at the minute).
That site/page is here: https://www.alpha-wireless.com/index.htm
The main code that I’m seeing being use for the “swiper-slide” appears to be the same for both scripts. And it looks like this:
if (plugins.swiper.length) {
for (var i = 0; i < plugins.swiper.length; i++) {
var s = $(plugins.swiper[i]),
pag = s.find(".swiper-pagination"),
next = s.find(".swiper-button-next"),
prev = s.find(".swiper-button-prev"),
bar = s.find(".swiper-scrollbar"),
swiperSlide = s.find(".swiper-slide");
for (var j = 0; j < swiperSlide.length; j++) {
var $this = $(swiperSlide[j]),
url;
if (url = $this.attr("data-slide-bg")) {
$this.css({
"background-image": "url(" + url + ")",
"background-size": "cover"
})
}
}
swiperSlide.end()
.find("[data-caption-animate]")
.addClass("not-animated")
.end();
var swiperOptions = {
autoplay: {
delay: s.attr('data-autoplay') ? s.attr('data-autoplay') === "false" ? undefined : s.attr('data-autoplay') : 5000
},
direction: s.attr('data-direction') ? s.attr('data-direction') : "horizontal",
effect: s.attr('data-slide-effect') ? s.attr('data-slide-effect') : "slide",
speed: s.attr('data-slide-speed') ? s.attr('data-slide-speed') : 600,
loop: isNoviBuilder ? false : s.attr('data-loop') !== "false",
simulateTouch: s.attr('data-simulate-touch') && !isNoviBuilder ? s.attr('data-simulate-touch') === "true" : false,
navigation: {
nextEl: next.length ? next.get(0) : null,
prevEl: prev.length ? prev.get(0) : null
},
pagination: {
el: pag.length ? pag.get(0) : null,
clickable: pag.length ? pag.attr("data-clickable") !== "false" : false,
renderBullet: pag.length ? pag.attr("data-index-bullet") === "true" ? function (index, className) {
return '<span class="' + className + '">' + ((index + 1) < 10 ? ('0' + (index + 1)) : (index + 1)) + '</span>';
} : null : null,
},
scrollbar: {
el: bar.length ? bar.get(0) : null,
draggable: bar.length ? bar.attr("data-draggable") !== "false" : true,
hide: bar.length ? bar.attr("data-draggable") === "false" : false
},
on: {
init: function () {
toggleSwiperInnerVideos(this);
toggleSwiperCaptionAnimation(this);
},
transitionStart: function () {
toggleSwiperInnerVideos(this);
},
transitionEnd: function () {
var $buttonsWinona = $(this.slides[this.activeIndex]).find('.button-winona');
if ($buttonsWinona.length && !isNoviBuilder) {
initWinonaButtons($buttonsWinona);
}
}
}
};
if (s.attr('data-custom-slide-effect') === 'inter-leave-effect') {
var interleaveOffset = s.attr('data-inter-leave-offset') ? s.attr('data-inter-leave-offset') : -.7;
swiperOptions = $.extend(true, swiperOptions, makeInterLeaveEffectOptions(interleaveOffset));
}
s = new Swiper(plugins.swiper[i], swiperOptions);
var container = $(pag);
if (container.hasClass('swiper-pagination-marked')) {
container.append('<span class="swiper-pagination-mark"></span>');
}
}
}
Any help or point in the right direction would be greatly appreciated.
Thank you in advance!
1