【问题标题】:flexslider 2 active thumbnailsflexslider 2 活动缩略图
【发布时间】:2014-12-02 01:30:45
【问题描述】:

我正在尝试创建一个带有缩略图的滑块,在滑块中一次显示 2 张图像。 感谢minItems:2

问题在于缩略图导航。 当您单击第二个缩略图时,滑块将移动,并在滑块上显示第三个图像,尽管第二个图像已经显示。

有没有办法创建 2 个活动缩略图并让它们与滑块中显示的图像同步?

我发现在他们的产品页面中使用这个的唯一其他类似的滑块是令人讨厌的。 希望他们是一种方式,因为它不像现在这样对用户友好。 谢谢!

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

【问题讨论】:

  • 仍在尝试解决这个问题。没有人知道如何做到这一点?
  • 这只是一个猜测,因为我之前没有接触过滑块本身,但从文档中我发现了一个名为“移动:应该在动画上移动的轮播项目的数量”的选项。将其设置为 2 会得到想要的结果吗?
  • 嗨@JaakKütt,感谢您的帮助!我确实尝试过,但根本没有任何效果......不知道为什么,我什至按照他们提供的示例创建了一个测试库,但那个 move:2 从来没有奏效。

标签: javascript wordpress woocommerce flexslider


【解决方案1】:

我不确定是否要突出显示多个缩略图,但我知道这个滑块是为了处理多个图像以及许多其他功能而设计的:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多