<script>

	// SOURCE: https://brickslabs.com/how-to-sync-two-nestable-sliders-in-bricks/

  document.addEventListener('DOMContentLoaded', () => {

   // Query all the wrappers
   const wrappers = document.querySelectorAll('.slide03');

   // Stop the function if there is no sync slider
   if (wrappers.length < 1) return;

   // Debounce function
   const debounce = (fn, threshold) => {
      var timeout;
      threshold = threshold || 200;
      return function debounced() {
         clearTimeout(timeout);
         var args = arguments;
         var _this = this;

         function delayed() {
            fn.apply(_this, args);
         }
         timeout = setTimeout(delayed, threshold);
      };
   };

   // Init function
   const init = (mainSliderId, thumbSliderId) => {
      const main = bricksData.splideInstances[mainSliderId],
         thumbnail = bricksData.splideInstances[thumbSliderId];

      // Mount the sync slider
      main.sync(thumbnail);

   };

   // Loop into each wrapper
   wrappers.forEach(wrapper => {

      // Set the ID of the main slider
      const mainSlider = wrapper.querySelector('.slide03__main');

      // Check if the main slider class is correctly set
      if (!mainSlider) return console.log('No .slide03__main class found');
      const mainSliderId = mainSlider.dataset.scriptId;

      // Set the ID of the thumb slider
      const thumbSlider = wrapper.querySelector('.slide03__thumnail');

      // Check if the thumb slider class is correctly set
      if (!thumbSlider) return console.log('No .slide03__thumnail class found');
      const 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", debounce(() => {
         init(mainSliderId, thumbSliderId);
      }, 300));
   });
});
  
</script>