带有更多 4 个图像的 Flexslider 缩略图不滑动

Question

我正在使用 woocomerce 和 wordpress 创建一个网站，我有一个包含 6 个相关图像的产品，而不是显示 4 个图像，flex 滑块显示了两行中的 6 个图像。我尝试使用此过滤器来更改 flexslider 设置，但我找不到使其成为滑块的方法。

我在 ol 中的 li 内有图像，class="flex-control-nav flex-control-thumbs"

add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;
    $options['sync'] = '.flex-control-thumbs';
    $option['minItems']=0;
    $option['maxItems']=4;
    $option['animaton']='slide';
    $option['itemWidth']=': 210';
    return $options;
}

谢谢。

Answer 1

你最后整理了吗？我也遇到了同样的问题，到目前为止我发现了以下问题。

FlexSlider 2 jQuery 插件用于 WooCommerce 产品页面上的主要图像和缩略图。具体来说，这个例子正在被使用 - “滑块 w/thumbnail controlNav 模式”

Slider w/thumbnail controlNav pattern

这就是产生您提到的无序列表标记的原因：

<ol class="flex-control-nav flex-control-thumbs">
<li><img/></li>
</ol>

但是我还没有找到一个选项来启用通过 FlexSlider 2 为缩略图生成的这个标记的水平滚动。如果有一个选项，这将是这里最简单的解决方案。默认情况下，多行不显示水平滚动和缩略图。

但是，如果我们可以更改 WooCommerce 使用 Flexslider 的方式，我们可以使用 FlexSlider 网站中的“Slider w/thumbnail slider”示例：

Slider w/thumbnail slider

我已经能够在这方面取得进展，并且使用您所做的“woocommerce_single_product_carousel_options”过滤器是正确的，但会更进一步：

add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

    function ud_update_woo_flexslider_options( $options ) {
        $options['sync'] = '#our_own_thumnail_markup';
        $options['controlNav'] = false;
        return $options;

    }

注意“controlNav”选项。这应该更改为 false，这样 jQuery 插件就不会自动生成它自己的缩略图。

并以 FlexSlider 网站上的“Slider w/thumbnail slider”示例为例，我们需要在我们的主题中的“woocommerce/single-product/product-image.php”中的最后一个关闭 div 之前为缩略图生成我们自己的标记：

$attachment_ids = $product->get_gallery_image_ids();
   if ( $attachment_ids && $product->get_image_id() ) {
      echo '<div id="our_own_thumnail_markup">';
      foreach ( $attachment_ids as $attachment_id ) {
         echo wc_get_gallery_image_html( $attachment_id );
      }
      echo '</div>';
   }

并通过 jQuery 调用以下内容：

$('#our_own_thumnail_markup').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 210,
   itemMargin: 5,
   asNavFor: '.woocommerce-product-gallery__wrapper'
});

我还没有完成这项工作，但我认为我正朝着正确的方向前进。