在一行上显示 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;
}

更新

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

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

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

干杯！