Cacher is the code snippet organizer for pro developers

                        <div class="swiper-container product-slider-big">
                            <div class="swiper-wrapper">
                                <a href="img/img-room-1.jpg" data-fancybox="gallery" class="swiper-slide product-slide-big">
                                    <img src="img/img-room-1.jpg" alt="">
                                </a>
                                <a href="img/img-room-2.jpg" data-fancybox="gallery" class="swiper-slide product-slide-big">
                                    <img src="img/img-room-2.jpg" alt="">
                                </a>
                                <a href="img/img-room-1.jpg" data-fancybox="gallery" class="swiper-slide product-slide-big">
                                    <img src="img/img-room-1.jpg" alt="">
                                </a>
                                <a href="img/img-room-2.jpg" data-fancybox="gallery" class="swiper-slide product-slide-big">
                                    <img src="img/img-room-2.jpg" alt="">
                                </a>
                                <a href="img/img-room-1.jpg" data-fancybox="gallery" class="swiper-slide product-slide-big">
                                    <img src="img/img-room-1.jpg" alt="">
                                </a>
                                <a href="img/img-room-2.jpg" data-fancybox="gallery" class="swiper-slide product-slide-big">
                                    <img src="img/img-room-2.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="product-slider-small-wrapper">
                            <div class="swiper-container product-slider-small">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide product-slide-small">
                                        <img src="img/img-room-sm-1.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide product-slide-small">
                                        <img src="img/img-room-sm-2.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide product-slide-small">
                                        <img src="img/img-room-sm-1.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide product-slide-small">
                                        <img src="img/img-room-sm-2.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide product-slide-small">
                                        <img src="img/img-room-sm-1.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide product-slide-small">
                                        <img src="img/img-room-sm-2.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button swiper-button-next product-slider-small-button-next"></div>
                            <div class="swiper-button swiper-button-prev product-slider-small-button-prev"></div>
                        </div>

.product-slider-big {
    margin-bottom: 20px;
}
.product-slide-big {
    overflow: hidden;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: 100%;
    max-height: 395px;
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }
}
.product-slider-small-wrapper {
    position: relative;
    padding: 0 30px;
    .swiper-button {
        top: 50%;
        margin-top: -10px;
        width: 11px;
        height: 20px;
    }
    .swiper-button-prev {
        left: 0;
        background-position: 0 -147px;
        &:hover, &:active {
            background-position: -14px -147px;
        }
    }
    .swiper-button-next {
        right: 0;
        background-position: -32px -147px;
        &:hover, &:active {
            background-position: -46px -147px;
        }
    }
}
.product-slide-small {
    overflow: hidden;
    position: relative;
    height: 85px;
    cursor: pointer;
    img {
        position: absolute;
        left: 50%;
        top: 50%;
        min-width: 100%;
        min-height: 100%;
        .translateYX(-50%, -50%);
    }
}

    if ($('*').is('.product-slider-big')) {
        var galleryThumbs = new Swiper('.product-slider-small', {
            spaceBetween: 10,
            slidesPerView: 2,
            loop: true,
            navigation: {
                nextEl: '.swiper-button.swiper-button-next.product-slider-small-button-next',
                prevEl: '.swiper-button.swiper-button-prev.product-slider-small-button-prev'
            },
            breakpoints: {
                361: {
                    spaceBetween: 10,
                    slidesPerView: 3
                },
                481: {
                    spaceBetween: 25,
                    slidesPerView: 4
                }
            }
        });
        var galleryTop = new Swiper('.product-slider-big', {
            loop: true,
            thumbs: {
                swiper: galleryThumbs,
            },
        });
    }
    
    
    
    $('.product-card').on('click', function() {
        let index = $(this).closest('.product-slide').index();
        productSwiper.slideTo(index);
    });
    
    
        productSwiper.on('slideChange', function () {
            let index = productSwiper.activeIndex;
            productInfoSwiper.slideTo(index);
        })