Owl Carousel - Magento Products

I have managed to get Owl Carousel working perfectly on my Magento home page using div's of images.

My aim is to get it wortking with products but I am struggling.

I want to display the products from a particular category and show them on the home page using the Owl Carousel but I usually call products on to the home page using a cms block with code such as:

{{block type="catalog/product_list" category_id="112" column_count="4" template="catalog/product/list.phtml"}}

This obvioulsy is not working - the products show but they have their own layout I think due to the template.

Does anyone have any ideas on what php or cms block I can use to call produts from a cateogry so it works with owl carousel.

Solution

Start off with the assumption that you don't intend to load a massive amount of products into the Owl Carousel and that you're perfectly fine with creating a category just to store the products intended to be in the slider.

<div class="owl-carousel">

<?php

   $categoryId = 15; // this is the category holding your products  
   $products = Mage::getSingleton('catalog/category')->load($categoryId) // load the category
               ->getProductCollection() // and the products
               ->addAttributeToSelect('image'); // tell Magento which attributes to get

   foreach ($products as $product) { // iterate through the entire collection
        echo '<div class="item"><img src='.$product->getImageUrl().'></div>'; // print the image url inside of the required Owl markup
   }

?>

</div>

The above should be organized properly, as well, with the variables you'll be calling appearing at the top of your block and the foreach only appearing within the Owl portion of the block.

The foreach should go within the Owl Carousel markup, as in addition to the Magento attribute we are also printing the Owl markup.