Синхронизация карусели в Bricks

В большинстве интернет-магазинов (например, WooCommerce, OpenCart) карусель товара и миниатюры работают по принципу "ведущий-ведомый":

Стандартный подход в интернет магазинах

Основной блок показывает увеличенное изображение товара. Миниатюры (обычно внизу или сбоку) позволяют быстро переключаться между фото как на фото ниже.

Проблема в Bricks

Bricks пока не имеет встроенной синхронизации между каруселями, поэтому если просто добавить два слайдера, они будут работать независимо. В принципе это работает, но иногда нужно все же синхронизировать их чтобы было похоже как в обычных интернет магазинах.

Нужен скрипт, который свяжет их логику и поэтому я сделал его.

<script>
 document.addEventListener("DOMContentLoaded", function () {

    const miniCarouselId = '#brxe-iimszw';
    const mainCarouselId = '#brxe-nxpzwa';

    const miniSwiper = document.querySelector(`${miniCarouselId} .bricks-swiper-container`).swiper;
    const mainSwiper = document.querySelector(`${mainCarouselId} .bricks-swiper-container`).swiper;

    if (!miniSwiper || !mainSwiper) {
        return;
    }

    document.querySelector(`${miniCarouselId} .swiper-wrapper`).addEventListener('click', function (event) {

        const clickedSlide = event.target.closest('.swiper-slide');
        if (!clickedSlide) return;

        const clickedIndex = Array.from(miniSwiper.slides).indexOf(clickedSlide);

        mainSwiper.slideToLoop(clickedIndex);
    });
});
</script>

Там все просто. Нужно добавить свои id элементов и теперь при клике на миниатюре, изображение у основной карусели с большим фото сменится на то по какому кликнули. Главное чтобы были одни и те же фото что в основной что в миниатюрах.