Deluxe Room

<script>  
  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);
          });
       });
    });
</script>