Your code appears to be quite messy. I have made several changes in hopes that it will function properly when you replace your existing code in the fourth <script></script>
tag on your page with the following code:
var slider;
$(document).ready(function() {
// modal in //
function modalIn() {
$(".jp-modal-wrapper").show();
$('body').addClass("body-ovf");
setTimeout(function() {
$(".projects-main-slider").addClass("projects-main-slider-in");
$('.blackdrop').addClass("blackdrop-in");
setTimeout(function() {
$('.jp-inner-modal').addClass("jp-inner-modal-in");
}, 350);
$('.carousel-item.active img').lazy({
effect: "fadeIn",
effectTime: 1000,
threshold: 0
});
}, 10);
};
// modal off //
function modalOff() {
$('.jp-inner-modal').removeClass("jp-inner-modal-in");
setTimeout(function() {
$('.blackdrop').removeClass("blackdrop-in");
}, 500);
setTimeout(function() {
$(".jp-modal-wrapper").hide();
$('body').removeClass("body-ovf");
}, 1000);
};
$(".blackdrop").click(function() {
modalOff();
});
$('body').keydown(function(e) {
if (e.keyCode == 27) {
modalOff();
}
});
// modal off //
$(".design-logos").click(function() {
var slide_n = ($('.design-logos').index(this) + 1);
// modal in //
modalIn();
setTimeout(function() {
if ($("#light-slider").hasClass("lightSlider")) {
} else {
slider = $("#light-slider").lightSlider({
item: 1,
loop: true,
speed: 1,
enableDrag: false,
});
}
setTimeout(function() {
slider.goToSlide(slide_n);
}, 301);
//else
}, 5);
function fadeSlideIn() {
$(".next").addClass("disable-button");
$(".projects-main-slider").addClass("projects-main-slider-mov");
}
function fadeSlideOut() {
$(".next").removeClass("disable-button");
$(".projects-main-slider").removeClass("projects-main-slider-mov");
}
$(".gotoslide").click(function () {
slider.goToSlide(2);
});
$(".next").click(function () {
fadeSlideIn();
const curSliderInd = slider.getCurrentSlideCount();
const nextSlide = curSliderInd == 4 ? 1 : curSliderInd + 1;
setTimeout(function () {
let curSliderInd = slider.getCurrentSlideCount();
slider.goToSlide(nextSlide);
}, 301);
setTimeout(function () {
fadeSlideOut();
}, 302);
});
$(".prev").click(function () {
fadeSlideIn();
const curSliderInd = slider.getCurrentSlideCount();
const nextSlide = curSliderInd == 1 ? 4 : curSliderInd - 1;
setTimeout(function () {
slider.goToSlide(nextSlide);
}, 301);
setTimeout(function () {
fadeSlideOut();
}, 302);
});
});
});
Feedback on your code:
Firstly, the reason your code was not working is because the else block condition:
if ($("#light-slider").hasClass("lightSlider")) {
} else {
var slider = $("#light-slider").lightSlider({
item: 1,
loop: true,
speed: 1,
enableDrag: false,
});
}
is only executed if the element light-slider
does not already have the class lightSlider
, which happens when one of the logos is clicked for the first time. However, declaring slider
within this block causes it to become undefined if the else block is not initially executed. Providing slider
with a global reference resolves this issue. Although this solution is not ideal, it was implemented due to time constraints.
Secondly, I noticed unexpected behavior with the goToPrevSlide()
and goToNextSlide()
methods after testing your page extensively. Therefore, I modified the calls to these methods within the callbacks of the next
and prev
buttons.
Lastly, some of your callback function definitions were placed inside a setTimeout
unnecessarily! This may have been done inadvertently, but I have removed them regardless. There are other formatting issues present that I did not address, so you may want to correct those as well to prevent any future complications.