Magento：如何在 owl-carousel 上展示产品答案

【问题标题】：Magento: how to display products on owl-carouselMagento：如何在 owl-carousel 上展示产品
【发布时间】：2017-03-20 08:40:50
【问题描述】：

我正在使用 magento 1.9.3，我想在主页上的猫头鹰轮播中显示特色产品。

我的模块块中有一个方法，它返回我想在轮播中显示的集合。我从我的模板中这样称呼它：

$_productCollection=$this->getFeaturedProducts();

我在堆栈溢出中发现了一个关于此的先前问题：Owl Carousel - Magento Products

按照上一个问题，我在模板中找到了这个问题：

<div class="owl-carousel">
    <?
        $products = $this->getFeaturedProducts();
        foreach ($products as $_product) { // iterate through the entire collection
            echo '<div class="item"><img src='.$this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize).'></div>'; // print the image url inside of the required Owl markup
        }
    ?>
</div>

但是owl-carousel的div没有显示出来。如果我检查页面，div 在那里，里面也有图像，但什么都没有显示。如果我删除 owl-carousel 类，我会看到列表中显示的所有图像。

我从 magento connect 安装了扩展“响应式猫头鹰滑块”，并且我在页面顶部有另一个猫头鹰轮播，使用管理 cms 制作，显示图像幻灯片（不是产品），它工作正常。唯一失败的是我试图通过代码完成的那个。

我看到owl-carousel 类有一个display: none，所以显然没有显示任何内容，但是如果我删除display: none，它会同时显示所有图像，而不是轮播。

如何在 owl carousel 中展示我选择的产品？

【问题讨论】：

标签： magento magento-1.9 owl-carousel-2

【解决方案1】：

请试试这个扩展程序

https://www.magentocommerce.com/magento-connect/new-products-2.html

希望对你有帮助。

【讨论】：

【解决方案2】：

先去链接>>https://magento.stackexchange.com/questions/83912/featured-products-on-homepage

为以下答案创建所有文件。

然后打开 features.phtml

复制粘贴下面的代码

<?php
    $_helper = $this->helper('catalog/output');
    $_productCollection = $this->getProductCollection();
?>
<div class="featured-products">
    <ol class="featured-products-list owl-carousel" id="featured-products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li><img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(200) ?>"  alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></li>
    <?php endforeach; ?>
    </ol>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
  jQuery(".owl-carousel").owlCarousel();
});
</script>

请不要忘记为产品创建属性和分配。

【讨论】：