I am trying to build this layout:

So far, this is what I achieved: https://jsfiddle.net/lilalilabp/t24frjkL/1/

<script>
    $(function () {
        var galleryThumbs = new Swiper(".gallery-thumbs", {
        //   centeredSlides: true,
        centeredSlidesBounds: true,
        direction: "horizontal",
        slidesPerView: 3,
        spaceBetween: 20,
        freeMode: false,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        watchOverflow: true,
        mousewheel: true,
        loop:true,
        breakpoints: {
            480: {
            direction: "vertical",
            slidesPerView: 3
            }
        }
        });
        var galleryTop = new Swiper(".gallery-top", {
        loop:true,
        direction: "horizontal",
        spaceBetween: 20,
        navigation: {
            nextEl: ".swiper-next-2",
            prevEl: ".swiper-prev-2"
        },
        thumbs: {
            swiper: galleryThumbs
        }
        });

        galleryTop.on("slideChangeTransitionStart", function () {
        galleryThumbs.slideTo(galleryTop.activeIndex);
        });
        galleryThumbs.on("transitionStart", function () {
        galleryTop.slideTo(galleryThumbs.activeIndex);
        });
    });
</script>

As you can see it is not responsive and I haven´t been able to find a way to show a part of the fourth image in the thumbnail gallery (as it's shown in the layout). I tried choosing "auto" as slides per view, but the thumbnail gallery only seems to work with fixed heights and widths and fixed slides per view.

Also, I would like for the thumbnails to move together with the main slider. So far, it only moves after three main slides move (please, check out the fiddle to see what I mean by that).

Any suggestions? Thanks in advance.

Could anyone please help me with this? Thanks in advance.