Magento – owl-carousel: number product

slider

I installed owl-carousel into my Magento.
In home page there is only 5 items. I want to display 5 products.
How I make it?

My code:

{{block type="filterproducts/featured_home_list" column_count="5" product_count="10" category_id="7" product_count="12" template="filterproducts/list.phtml"}}

<script type="text/javascript">jQuery(function ($) {
        $("#featured_product .filter-products .owl-carousel").owlCarousel({
            lazyLoad: true,
            itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 4]],
            responsiveRefreshRate: 50,
            slideSpeed: 200,
            paginationSpeed: 500,
            scrollPerPage: false,
            stopOnHover: true,
            rewindNav: true,
            rewindSpeed: 600,
            pagination: false,
            navigation: true,
            autoPlay: true,
            navigationText: ["<i class='icon-left-open'></i>", "<i class='icon-right-open'></i>"]
        });
    });
</script>

Best Answer

First define js lib in requirejs-config.js

var config = {
   "shim": {
      "owlcarousel": [
         'jquery'
       ]
   },
   "paths": {
      "owlcarousel": "Vendor_Module/js/owlcarousel/owl.carousel.min"
   }

};

Then in place you want to call carousel, place js script below

<script type="text/javascript">
   //<![CDATA[
            require([
                'jquery',
                'owlcarousel'
            ], function(jqy, owl){
                jqy('#featured_product .filter-products .owl-carousel').owlCarousel({
                    // Your code
                });
            });
   //]]>
</script>
Related Topic