Tutorial

Elementor Linked Slider revisited

Uses Plugins

Elementor PRO

Description

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

1

Add Sliders

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

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

2

Add Code

  1. Add an HTML Widget to the page
  2. 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>