Swiper - card with preview

      if ( $('.image__preview .image__item').length > 1 ) {
    var galleryThumbs = new Swiper('.image__preview .image__inner', {
        wrapperClass: 'image__wrapper',
        slideClass: 'image__item',
        spaceBetween: 0,
        slidesPerView: 4,
        slidesPerGroup: 1,
        loop: true,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        breakpoints: {
            1200: {
                slidesPerView: 3
            }
        },
    });
    var galleryTop = new Swiper('.image__big', {
        wrapperClass: 'image__big-inner',
        slideClass: 'image__item',
        slideActiveClass: 'active',
        spaceBetween: 0,
        loop: true,
        navigation: {
            nextEl: '.image .arrows__next',
            prevEl: '.image .arrows__prev',
            disabledClass: 'arrows__arrow_disabled',
        },
        thumbs: {
            swiper: galleryThumbs,
        },
        autoplay: {
            delay: 3000
        },
        on: {
            init: function () {}
        }
    });

    $('.image__preview, .image__big, .st4 .arrows').on('mouseenter', function(e){
        galleryTop.autoplay.stop();
    });
    $('.image__preview, .image__big, .st4 .arrows').on('mouseleave', function(e){
        galleryTop.autoplay.start();
    });

    galleryTop.on('slideChange', function(e){});
    galleryThumbs.on('slideChange', function(e){});

    $('.image__preview .image__item').each(function(index) {
        $(this).on('click', function(e){
            $('.image__big .image__item').eq(index).find('a').click();
        });
    });
}