flexslider 2 active sketches

I am trying to create a thumbnail slider that displays 2 images at a time in the slider. Everything works for me thanks tominItems:2

The problem is with thumbnail navigation. When you click on the second thumbnail, the slider will move and display the third image on the slider, although the second image is already displayed.

Is there a way to create 2 active thumbnails and sync them with the images displayed in the slider?

The only other similar slider I've found that uses this is nastygal on the product page. Hope this is the way to go, because it is actually not very friendly as it is now. Thank!

I use this on a woocommerce store:

productSlider: {
        selector: '#product-nav',
        init: function () {
            var base = this,
                    container = $(base.selector),
                    images = $('#product-images'),
                    zoom = images.data('zoom');

            container.flexslider({
                animation: "slide",
                controlNav: false,
                directionNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 106,
                itemMargin: 10,
                asNavFor: '#product-images'
            });

            images.flexslider({
                animation: "slide",
                controlNav: false,
                directionNav: true,
                animationLoop: false,
                slideshow: false,
                minItems: 2,
                maxItems: 2,
                prevText: '<i class="fa fa-angle-left"></i>',
                nextText: '<i class="fa fa-angle-right"></i>',
                sync: "#product-nav",
                start: function(slider) {
                    if (zoom) {
                        $(slider.slides[0]).easyZoom({
                            preventClicks: false
                        });
                    }
                },
                before: function(slider) {
                    if (zoom) {
                        $(slider.slides[slider.animatingTo]).easyZoom({
                            preventClicks: false
                        });
                    }
                }
            });
        }
    },