Elementor Linked JetSlider Widgets revisited

JavaScript (javascript)

<script>
    ;(w => {
        let swiperRefGroups = {};
        let sliderProRefGroups = {};

        w.addEventListener('elementor/frontend/init', () => {

            const initListener = $scope => {
                const type = $scope.data('widget_type');
                const [name, skin] = type.split('.');
                switch (name) {
                    case 'slides':
                        initSwiperWidget($scope);
                        break;

                    case 'jet-slider':
                        initSliderProWidget($scope);
                        break;
                        
                    case 'jet-carousel':
                        initSliderProWidget($scope);
                        break;

                    default:
                        return;
                }
            }
            elementorFrontend.hooks.addAction('frontend/element_ready/widget', initListener);
        });

        /**************
         * WIDGET INITIALISERS */
        const initSwiperWidget = $scope => {
            const group = $scope.data('remote-group');
            if (group) {
                swiperRemoteInit($scope, group);
            }
        }

        const initSliderProWidget = $scope => {
            const group = $scope.data('remote-group');
            if (group) {
                sliderProRemoteInit($scope, group);
            }
        }

        /*#######################
        REMOTE CONNECTORS
        #######################*/

        /*****
         * Elementor Swiper Widgets
         * */
        let swiperDebounce; //Stop JS triggered changes re-triggering
        const swiperRemoteHandleChange = (triggerSwiper, group) => {
            if (swiperDebounce) {
                return
            }
            swiperDebounce = setTimeout(() => {
                clearTimeout(swiperDebounce);
                swiperDebounce = null;
            }, 500);

            //Iterate connected swipers in the group
            const groupRefs = swiperRefGroups[group];
            groupRefs.forEach(swiper => {
                //skip swiper that triggered this change
                if (triggerSwiper !== swiper) {
                    swiper.slideTo(triggerSwiper.activeIndex, 500, true)
                }
            });
        }

        const swiperRemoteInit = ($scope, group) => {
            const swiperContainer = $scope.find('.swiper-container');
            let swiperRef;

            //Wait for Swiper to initialise
            setTimeout(() => {
                swiperRef = swiperContainer.data('swiper');
                swiperRef.on('realIndexChange', () => {
                        swiperRemoteHandleChange(swiperRef, group);
                    }
                );
                if (undefined === swiperRefGroups[group]) {
                    swiperRefGroups[group] = [];
                }
                swiperRefGroups[group].push(swiperRef);
            }, 100);
        }


        /*****
         * Crocoblock SliderPro Widgets
         * */
         /*@see https://github.com/bqworks/slider-pro/blob/master/docs/api.md */
        let sliderProDebounce;
        const sliderProRemoteHandleChange = (triggerRef, group, index) => {
            if (sliderProDebounce) {
                return
            }
            sliderProDebounce = setTimeout(() => {
                clearTimeout(sliderProDebounce);
                sliderProDebounce = null;
            }, 500);

            //Iterate connected swipers in the group
            const groupRefs = sliderProRefGroups[group];
            groupRefs.forEach( jsRef => {
                if (triggerRef !== jsRef) {
                    jsRef.gotoSlide(index);
                }
            });
        }

        const sliderProRemoteInit = ($scope, group) => {
            const container = $scope.find('.slider-pro');
            let ref;

            //Wait for Slider to initialise
            setTimeout(() => {
                ref = container.data('sliderPro');
                ref.on('gotoSlide', e => {
                        sliderProRemoteHandleChange(ref, group, e.index);
                    }
                );
                if (undefined === sliderProRefGroups[group]) {
                    sliderProRefGroups[group] = [];
                }
                sliderProRefGroups[group].push(ref);
            }, 100);
        }

    })(window)
</script>