<script>
jQuery(document).ready(function($) {

// פונקציה שמגדירה את פעולת ההחלפה
function updateCarouselImages() {
$('.elementor-carousel-image').off('click').on('click', function(){
// לקיחת ה-URL מתוך ה-CSS של background-image
var imgSrc = $(this).css('background-image');
imgSrc = imgSrc.replace('url("', ").replace('")', "); // ניקוי ה-URL

// שינוי מקור התמונה המוגדלת (src) והחלפת srcset
$('#large-image img').fadeOut(400, function(){
$(this).attr('src', imgSrc); // החלפת ה-src
$(this).attr('srcset', "); // נטרול ה-srcset כדי למנוע קונפליקטים
$(this).fadeIn(400); // אפקט fade in לאחר ההחלפה
});
});
}

// הפעלת הפונקציה בהתחלה
updateCarouselImages();

//אם הצגת תמונה מפסיקה לעבוד לאחר לחיצה על החצים קדימה או אחורה.

הבעיה נובעת מכך שהקרוסלה נטענת מחדש כאשר לוחצים על החצים, וזה גורם לאיבוד הקישוריות בין הקוד ל-Lazy Load החדש של התמונות.

כדי לפתור את זה, צריך להאזין לטעינה מחדש של הקרוסלה אחרי כל לחיצה על חץ.
נשתמש באירועי DOM של Javascript ונטען את הקוד מחדש אחרי כל שינוי בקרוסלה.

// ניטור שינויים בקרוסלה לאחר לחיצה על חצים או עדכון הקרוסלה
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
updateCarouselImages(); // חידוש האזנה ללחיצות אחרי כל שינוי בקרוסלה
});
});

// צפייה בשינויים בדפדפן בקרוסלה
observer.observe(document.querySelector('.elementor-widget-image-carousel'), {
childList: true, // שינויים בתוכן הקרוסלה
subtree: true // ניטור לכל התגיות שבתוך הקרוסלה
});

});
</script>