将 woocommerce 产品库缩略图显示在一行上作为滑块

Question

在 woocommerce 单一产品页面上，图库缩略图的默认设置显示在行中的活动图像下。目前对我来说它每行显示 4 张图像。

我相信 Woocommerce 使用 flexslider 作为产品页面滑块。

因此，由于我们将为每个产品提供大量图像，因此我希望向产品库添加滑块导航，同时避免使用另一个插件。因此，产品图库将仅在 1 行上显示所有图像。

喜欢flexslider2

实现这一目标的最佳方法是什么？ - 可以用纯 CSS 来完成吗？还是需要使用 WordPress 过滤器和 CSS 添加滑块导航？

CSS

flex-control-thumbs {
  width: 90%;
  position: absolute;
  bottom: 0px; 
  text-align: center;
  display:flex;
  flex-wrap:nowrap;
  
  border: 1px solid red;
  overflow-x:auto;
  padding-bottom:10px;
}

.flex-control-thumbs li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
}


.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
  width: 16%;
  vertical-align: top;
  margin: 5px 1% 0 0;
  min-width: 100px;
}

.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: 0.8;
  cursor: pointer;
}

.flex-control-thumbs img:hover {
  opacity: 0.5;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

.product_slider .flex-active-slide a:hover {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}

来自 WC 的外部 HTML

<ol class="flex-control-nav flex-control-thumbs">
    <li><img src="image.jpeg" class="flex-active" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
</ol>

// 使用 WordPress 过滤器添加滑块导航。

add_filter( 'woocommerce_single_product_carousel_options', 'cuswoo_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function cuswoo_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

更新

这是导航控件/上面的 Fliter 的 CSS（下一个和上一个图像）。

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
    font-family: FontAwesome;margin-right: 10px;font-size: 70px;    }
a.flex-prev::before {
    visibility:visible;
    content: '\f104';
    font-family: FontAwesome;    margin-left: 10px;font-size: 70px;}

Answer 1

要解决此问题，如果缩略图很多，您需要添加一个水平滑块，以及更多 CSS 网格代码以使其响应灵敏并适当间隔，我希望您发现这很有用。

.woocommerce-product-gallery {
  display: grid;
  gap: 10px }
  @media only screen and (max-width: 35.999em) {
    .woocommerce-product-gallery {
      gap: 6px; 
      } 
  }
  .woocommerce-product-gallery .flex-control-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 17%;
    gap: 1rem;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain; 
   }
   @media screen and (max-width: 47.999em) {
      .woocommerce-product-gallery .flex-control-thumbs {
        grid-auto-columns: 12.5%;
        gap: 6px; 
       } 
   }
   .woocommerce-product-gallery .flex-control-thumbs li {
      float: none !important;
      width: 100% !important;
      display: grid; 
   }
   .woocommerce-product-gallery .flex-control-thumbs li img {
        inline-size: 100%;
        aspect-ratio: 1/1;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 5px; 
    }
    .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
          border: 5px solid #f2f2f2; 
    }
    @media screen and (max-width: 47.999em) {
        .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
              border: 2px solid #f2f2f2; } 
        }
  .woocommerce-product-gallery .flex-control-nav {
    -ms-scroll-snap-type: inline mandatory;
        scroll-snap-type: inline mandatory;
    scroll-padding-inline: 10px; 
   }
   .woocommerce-product-gallery .flex-control-nav > * {
      scroll-snap-align: start; 
   }

如果您还想添加导航，代码很简单，如果需要帮助我可以提供帮助

干杯！

Answer 2

在此输入图片描述

1：https://i.sstatic.net/IDdyYdWk.jpg（添加公开代码后的错误问题已修复，谢谢

现在 在此输入图片描述