1

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>
  • What's an error in your code ? Also if possible post website link – Anil Suthar May 20 '16 at 13:55
  • my code is correct but it show 4 products, not 5. – Alessandro Gnola May 20 '16 at 15:27
  • have you applied solution ? – Anil Suthar May 24 '16 at 5:57
1

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>  
  • but my code work. i want like only show 5 products, not 4. – Alessandro Gnola May 20 '16 at 15:26
1

add the item amount to your code for example after lazyload:true,

items: 5,

also check this line:

itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 4]]

for example when the width is 1280px -> show 4 items, if width is 992px -> show 2 items .....

  • sorry just tried to delete my comment. – Samir Shaban May 21 '16 at 0:34
1

According to OwlCarousel documentation, you should change itemsCustom option values.

itemsCustom : [ [SCREEN_WIDTH, NO_OF_ITEMS] ]

Here, you should change NO_OF_ITEMS according to SCREEN_WIDTH.

As per you code, I can suggest you to change it like:

itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 5]]

Note here, I have changed NO_OF_ITEMS for Screen size greater than equals to 1280. Now you should able to see 5 items for screen size greater or equals to 1280.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.