Question

我为每个母产品提供了大约14种相关产品，并且希望Owl-Carousel滑块能够正常运行，因此访问者可以一次滚动浏览4个。我设置的相关产品渲染得很好，除了它们在页面垂直而不是在旋转木马滑块内列出。

在主页（index.html）的同一网站上还有另一个猫头鹰旋转木马滑块，工作正常。

差异？ 这个从Business Catalyst模块获取每个产品详细信息，呈现为：

<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">

当然，每种产品的ID都不同。

如果您想要查看页面来源，请输入以下链接 - 从第289行开始 Link to product parent detail page

查看模块结果 - 以下是来自owl-carousel内的ONE产品的一些代码

我可以添加什么来使每个产品细节块呈现水平？

<section class="section wow fadeInUp">
    <h3 class="section-title">Accessories and Related Products</h3>
    <div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
      <div class="item item-carousel">
        <div class="products">
          <div class="product"> 

<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">

<!-- product detail  --> 

<div class="product-image">
  <div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
  <!-- /.image --> 
</div>
<!-- /.product-image -->

<div class="product-info text-left">
  <h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
  <div class="description"></div>
  <div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
  <!-- /.product-price --> 

</div>
<!-- /.product-info -->

<div class="cart clearfix animate-effect">
  <div class="action">
    <h4>
      <div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
    </h4>
  </div>
  <!-- /.action --> 
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>

<!--/ END product detail  --> 

</li></ul> </div>
          <!-- /.product --> 
        </div>
        <!-- /.products --> 
      </div>
      <!-- /.item item carousel --> 
    </div>
    <!-- /.home-owl-carousel --> 
  </section>
  <!-- /.section -->

希望这更好理解？谢谢 Willz

问题解决了麻烦在于Business Catalyst Module产品列表 - 这里编辑的模块在owl-carousel中正常运行：

{module_productfeaturelist tag =“{tag_name}”render =“collection”rowCount =“99”sortType =“Weight”template =“/ Layouts / OnlineShop / prodFeature.tpl”} {％comment％} / * OLD * / {module_productfeaturelist，{tag_name}，99，weight，_self，true} {％endcomment％}

Answer 1

尝试使用：

display: inline-block;

另请查看Here，了解有关创建网格的提示。

为什么我的水平猫头鹰旋转木马滑块渲染物品垂直？

1 个答案: