javascript - Why does my horizontal owl-carousel SLIDER render items vertical? - Stack Overflow

admin管理员组

文章数量:1415145

I have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time. The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.

There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.

The Difference? This one gets each product detail form Business Catalyst module rendered as:

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

the id is different for each product of course.

Here is link if you want to View page source - starts on LINE 289 Link to product parent detail page

To see the module result - Here is some code from ONE product inside the owl-carousel

What can I add to this to make each block of product detail render horizontal?

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

Hope this is better to understand? Thank You Willz

Problem solved The trouble was with the Business Catalyst Module productfeaturelist - here is the module as edited to function correctly in owl-carousel:

{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"} {% ment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endment %}

I have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time. The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.

There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.

The Difference? This one gets each product detail form Business Catalyst module rendered as:

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

the id is different for each product of course.

Here is link if you want to View page source - starts on LINE 289 Link to product parent detail page

To see the module result - Here is some code from ONE product inside the owl-carousel

What can I add to this to make each block of product detail render horizontal?

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

Hope this is better to understand? Thank You Willz

Problem solved The trouble was with the Business Catalyst Module productfeaturelist - here is the module as edited to function correctly in owl-carousel:

{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"} {% ment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endment %}

• javascript
• jquery
• html
• css
• owl-carousel

Share Improve this question Follow edited May 29, 2015 at 21:34 Will Noel asked May 17, 2015 at 23:33 Will NoelWill Noel 6911 silver badge99 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Try Using:

display: inline-block;

Also have a look Here for tips on creating a grid.

本文标签： javascriptWhy does my horizontal owlcarousel SLIDER render items verticalStack Overflow