javascript - flexslider 2 事件缩略图

Question

我正在尝试创建一个带有缩略图的 slider ，它在 slider 中一次显示 2 个图像。多亏了 minItems:2

我让一切正常工作

缩略图导航存在问题。当您单击第二个缩略图时， slider 将移动，并在 slider 上显示第 3 个图像，尽管第二个图像已经显示。

有没有办法创建 2 个事件缩略图并使它们与 slider 中显示的图像同步？

我发现唯一一个使用这个的类似 slider 在他们的产品页面中是令人讨厌的。希望他们是一种方式，因为现在的方式并不是真正的用户友好。谢谢!

我在 woocommerce 商店中使用它:

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
                        });
                    }
                }
            });
        }
    },

Answer 1

我不确定是否要突出显示多个缩略图，但我知道此 slider 是为处理多个图像以及许多其他功能而构建的:

http://www.owlcarousel.owlgraphic.com/index.html