How to sync two nestable sliders (thumbnail carousel) in less than 4 minutes using Bricks Builder for WordPress

Quickly sync two nestable sliders in Bricks Builder for WordPress.

function initSync() {
  initTimeout = setTimeout(syncSliders, 50);
}
 
function syncOnResize() {  
  resizeTimeout = setTimeout(syncSliders, 260);  
 
}
 
function syncSliders() {  
  const	main = bricksData.splideInstances['47db29'],
  			thumbnail = bricksData.splideInstances['636b7b']
 
   if( main && thumbnail) {
   main.sync(thumbnail)
 
  }
 
  clearTimeout(initTimeout);  
 
}
 
 
 
document.addEventListener( 'DOMContentLoaded', initSync)
 window.addEventListener("resize", syncOnResize)

{
   "type":"slide",
   "direction":"ltr",
   "keyboard":"global",
   "height":"auto", 
   "gap":10,
   "start":0,
   "perPage":"3",
   "perMove":1,
   "speed":400,
   "interval":3000,
   "autoHeight":true,
   "autoplay":false,
   "pauseOnHover":false,
   "pauseOnFocus":false,
   "arrows":false,
   "pagination":false,
   "focus": "center",
   "isNavigation": true,
   "updateOnMove": true, 
 
 
 
   "breakpoints":{
      "580":{
         "perPage":"2"        
      },
 
      "320":{
         "perPage":"1"        
      }
   }
}

OPTIONAL:

Extra tip from Maxime Beguin in Bricks group: For use with multiple sync sliders, give your main and thumb sliders classes and use this JavaScript instead of the one above

document.addEventListener('DOMContentLoaded', () => {
 
   // Query all the wrappers
   const wrappers = document.querySelectorAll('.sync-sliders-wrapper');
 
   // Stop the function if there is no sync slider
   if (wrappers.length < 1) return;
 
   // Init function
   let init = (mainSliderId, thumbSliderId) => {
      const main = bricksData.splideInstances[mainSliderId],
         thumbnail = bricksData.splideInstances[thumbSliderId];
 
      // stop the function if the both sliers instances doesn't exist
      if (!main || !thumbnail) return;;
 
      // Mount the sync slider
      main.sync(thumbnail);
 
   };
 
   // Loop into each wrapper
   wrappers.forEach(wrapper => {
 
      // Set the ID's of sliders
      const mainSlider = wrapper.querySelector('.sync-sliders-main'),
         mainSliderId = mainSlider.dataset.scriptId,
         thumbSlider = wrapper.querySelector('.sync-sliders-thumb'),
         thumbSliderId = thumbSlider.dataset.scriptId;
 
      // Run the function on load
      setTimeout(() => {
         init(mainSliderId, thumbSliderId);
      }, 0);
 
      // Rerun the function on resize because bricks reinit the sliders on each resize event
      window.addEventListener("resize", () => {
         setTimeout(() => {
            init(mainSliderId, thumbSliderId)
         }, 300);
      });
   });
});