title: Magento: how to display products on owl-carousel
body: <p>I'm using magento 1.9.3 and I want to display featured products in home page in an owl carousel.</p>
  
  <p>I have a method in the block of my module that returns me the collection I want to show in the carousel. I call it from my template like this:</p>
  
  <pre><code>$_productCollection=$this-&gt;getFeaturedProducts();
  </code></pre>
  
  <p>I found a previous question in stack overflow about this: <a href="https://stackoverflow.com/questions/32748397/owl-carousel-magento-products">Owl Carousel - Magento Products</a></p>
  
  <p>and following this previous question I arrived to this in my template:</p>
  
  <pre><code>&lt;div class="owl-carousel"&gt;
      &lt;?
          $products = $this-&gt;getFeaturedProducts();
          foreach ($products as $_product) { // iterate through the entire collection
              echo '&lt;div class="item"&gt;&lt;img src='.$this-&gt;helper('catalog/image')-&gt;init($_product, 'small_image')-&gt;keepFrame(false)-&gt;resize($_imgSize).'&gt;&lt;/div&gt;'; // print the image url inside of the required Owl markup
          }
      ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the div of owl-carousel is not displayed. If I inspect the page, the div is there, and the images inside too, but nothing is displayed. If I delete the owl-carousel class I see all the images displayed in list.</p>
  
  <p>I installed the extension "Responsive Owl Slider" from magento connect, and I have another owl carousel on top of page made with the admin cms that shows image slides (not products) and it's working fine. The only one that fails is the one that I'm trying to do by code.</p>
  
  <p>I see that the <code>owl-carousel</code> class has a <code>display: none</code> so obviously is not displaying anything, but if I delete the <code>display: none</code> it shows all the images at the same time, not a carousel.</p>
  
  <p>How do I display my selected products in an owl carousel?</p>