<script>
  
    // SOURCE:  https://itchycode.com/sync-2-different-carousels-navigation-controls-as-gallery-slider-in-bricks-builder-swiperjs/
  
(() => {
  document.addEventListener('DOMContentLoaded', () => {
    const syncCarousels = () => {
      const galleryContainers = document.querySelectorAll('.fb-gallery-four');
      galleryContainers.forEach((container, index) => {
        const mainCarouselId = Object.keys(bricksData.swiperInstances)[index * 2];
        const thumbnailCarouselId = Object.keys(bricksData.swiperInstances)[index * 2 + 1];
        // Check swiper instances exist
        if (
          bricksData.swiperInstances[mainCarouselId] &&
          bricksData.swiperInstances[thumbnailCarouselId]
        ) {
          // Enable slide to clicked slide for thumbnail carousel
          bricksData.swiperInstances[thumbnailCarouselId].params.slideToClickedSlide = true;
          // Update thumbnail carousel setting
          bricksData.swiperInstances[thumbnailCarouselId].update();
          // Set the thumbnail carousel as the main carousel's thumbs instance
          bricksData.swiperInstances[mainCarouselId].params.thumbs.swiper =
            bricksData.swiperInstances[thumbnailCarouselId];
          // Update main carousel setting
          bricksData.swiperInstances[mainCarouselId].update();
          // Initialize and update the main carousel's thumbs
          bricksData.swiperInstances[mainCarouselId].thumbs.init();
          bricksData.swiperInstances[mainCarouselId].thumbs.update();
        }
      });
    };
    // Once DOMContentLoaded, delay 250ms to allow Bricks to initialize the carousels
    setTimeout(syncCarousels, 250);
  });
})();
</script>