https://www.bouwmatron.nl/yassets/yf12fa5d6_1790257696/slider.js

1console.log('slider.js waiting for cssLoading to complete');
2window.cssLoading.then(() => {
3    const SRC_MATCH = '/jquery.bxslider.rahisified.ma.';
4
5    const initIfReady = () => {
6        if (window.jQuery && $.fn && $.fn.bxSlider) {
7            loadBxSlider(document);
8            return true;
9        }
10        return false;
11    };
12
13    // immediate check
14    if (initIfReady()) return;
15
16    // try attaching load listener to existing script
17    const script = document.querySelector(`script[src*="${SRC_MATCH}"]`);
18    if (script) {
19        script.addEventListener('load', initIfReady, { once: true });
20    }
21
22    // fallback: watch for new script tag
23    const observer = new MutationObserver((muts) => {
24        for (const m of muts) {
25            for (const n of m.addedNodes) {
26                if (n.tagName === 'SCRIPT' && n.src && n.src.includes(SRC_MATCH)) {
27                    n.addEventListener('load', initIfReady, { once: true });
28                }
29            }
30        }
31    });
32    observer.observe(document.documentElement, { childList: true, subtree: true });
33
34    // final fallback: lightweight polling in case load already happened
35    const maxWait = Date.now() + 10000;
36    const iv = setInterval(() => {
37        if (initIfReady() || Date.now() > maxWait) clearInterval(iv);
38    }, 50);
39});
40
41$(document).on('refresh', '.UISlider', function(event){
42    console.log('UISlider refresh event', event);
43    loadBxSlider(event.target);
44});
45
46$(document).on('refresh', function(event) {
47    //todo this is slightly overkill, we kinda want to only check this if a sub-template is refreshed
48    var sliders = $(event.target).find('.UISlider');
49    if (sliders.length) {
50        sliders.each(function (){
51            var slider = $(this);
52            slider.trigger('refresh');
53        });
54    }
55});
56//todo if a component containing UISlider is refreshed, we also need to check for sliders and refresh those.
57
58async function loadBxSlider(element) {
59    console.log('loadBxSlider called for element', element);
60    var sliders = $(element).find('[data-bxslider]');
61    await window.cssLoading;
62    sliders.each(function (i, e) {
63        var bxslider = $(this);
64        if(bxslider.parent().hasClass('bx-viewport')){
65            console.warn('bxslider already initialized, skip');
66            return;
67        }
68        if(!$.fn.bxSlider){
69            console.warn('bxSlider not loaded');
70            return;
71        }
72        bxslider.bxSlider({
73            onSliderSized: function () {
74                window.dispatchEvent(new Event('resize.unveil'));
75                //unveil needs to be called after the slider has been initialized, because unveil will block image unveiling before the slider is initialized
76                Unveil.addUnveil(bxslider);
77                bxslider.redrawSlider();
78            },
79            onSliderLoad: function () {
80                bxslider.css('visibility', 'visible');
81                $(document).trigger('resize.highlight');
82                window.dispatchEvent(new Event('resize.unveil'));
83                Unveil.addUnveil(bxslider);
84                bxslider.redrawSlider();
85            }
86        });
87        $(document).on('throttledResize', function () {
88            bxslider.redrawSlider();
89        });
90    });
91}