Swiper carousel with thumbnails (Elementor)

index.html

<script>

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

defer(function () {
    jQuery(document).ready(function($) {
        var slider_container = $('.slider-container');
        var thumbs_container = $('.thumbs-container');
     
        var swiperThumbsConfig = {
            spaceBetween: 10,
            slidesPerView: 5,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            // centeredSlides: true,
        };
        

      
        
        if ( 'undefined' === typeof Swiper ) {
            var asyncSwiper = elementorFrontend.utils.swiper;
            new asyncSwiper( thumbs_container, swiperThumbsConfig ).then( ( newSwiperThumbsInstance ) => {
                swiperThumbs = newSwiperThumbsInstance;
            } );
            
            var swiperSliderConfig = {
                spaceBetween: 10,
                thumbs: {
                    swiper: swiperThumbs,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            };
            
            new asyncSwiper( slider_container, swiperSliderConfig ).then( ( newSwiperSliderInstance ) => {
                swiperSlider = newSwiperSliderInstance;
            } );
        } else {
            
            swiperThumbs = new Swiper( thumbs_container, swiperThumbsConfig );
            
            var swiperSliderConfig = {
                spaceBetween: 10,
                thumbs: {
                    swiper: swiperThumbs,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            };
            swiperSlider = new Swiper( slider_container, swiperSliderConfig );
            
        }
                
    });
});
</script>
<style>
    .swiper-container {
        margin-bottom: 10px;
    }
    .swiper-slide {
        background-color: #ccc;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .thumbs-container .swiper-slide-thumb-active {
        background-color: #999;
    }
</style>

<div class="slider-container swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">1</div>
		<div class="swiper-slide">2</div>
		<div class="swiper-slide">3</div>
		<div class="swiper-slide">4</div>
		<div class="swiper-slide">5</div>
		<div class="swiper-slide">6</div>
		<div class="swiper-slide">7</div>
		<div class="swiper-slide">8</div>
	</div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<div class="thumbs-container swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">1</div>
		<div class="swiper-slide">2</div>
		<div class="swiper-slide">3</div>
		<div class="swiper-slide">4</div>
		<div class="swiper-slide">5</div>
		<div class="swiper-slide">6</div>
		<div class="swiper-slide">7</div>
		<div class="swiper-slide">8</div>
	</div>
</div>

Hi! I'm trying to create the same thing and my code is essentially the same as yours here however the two sliders are not linking. Both initialize but are not synced. I've noticed that the 'swiperThumbs' variable return null when it's outside of the asyncSwiper class function. When I do a console log of the 'swiperSlider' variable inside of its asyncSwiper class function, it's shows the swiper object in the thumbs parameter is null. Been working at this for a while. Any insights would be greatly appreciated!