Tutorial

Elementor Linked Slider revisited

Video

Description

This video demonstrates a way to link Elementor Slider Widgets. It uses Elementor JavaScript Hooks for an easier way to manage Widget initialisation.

Steps

Add Sliders
Add Code

Add Sliders

Add an Elementor Slider Widget to the page
Go to Advanced -> Attributes
Add an Attribute "data-remote-group|slides-a" (Where "slides-a" is the group name to link sliders)
Duplicate the slide
Change slide attributes

NOTE: Sliders must have the exact same number of slides for this to work correctly.

Add Code

Add an HTML Widget to the page
Copy and paste the code below into it.

Code (click to copy)

JavaScript (javascript)

<script>
    ;( w => {
        let swiperRefGroups = {};
        
        w.addEventListener('elementor/frontend/init', () => {
            
            const initListener = $scope => {
                const type = $scope.data('widget_type');
                const [name,skin] = type.split('.');
                switch(name){
                    case 'slides':
                        initSlideWidget($scope);
                        break;
                        
                    default:
                        return;
                }
            }
            elementorFrontend.hooks.addAction('frontend/element_ready/widget',initListener);
        });
        
        /**************
         * WIDGET INITIALISERS */
        const initSlideWidget = $scope => {
            const group = $scope.data('remote-group');
            if(group){
                swiperRemoteInit($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);
        }
    })(window)
</script>