<p class="filter-title-type-2" style="margin-top:10px;"><span class="title-line">&nbsp;</span><span style="width: 315px;text-align: center;font-weight: 600;color: #3d3734;">WEEKLY FEATURED PRODUCTS</span><span class="title-line">&nbsp;</span></p>
<div id="weekly_featured_product" class="hide-addtocart hide-addtolinks owl-middle-outer-narrow">
    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="0" image_width="250" image_height="250" template="owl_list.phtml"}}
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        $("#weekly_featured_product .owl-carousel").owlCarousel({
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            margin: 10,
            nav: false,
            dots: false,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            responsive: {
                0: {
                    items:1
                },
                320: {
                    items:1
                },
                480: {
                    items:2
                },
                768: {
                    items:3
                },
                992: {
                    items:4
                },
                1200: {
                    items:5
                }
            }
        });
    });
</script>
<p class="filter-title-type-2" style="margin-top:30px"><span class="title-line">&nbsp;</span><span style="width: 225px;text-align: center;font-weight: 600;color: #3d3734;">FEATURED BRANDS</span><span class="title-line">&nbsp;</span></p>
<div class="owl-middle-outer-narrow">
    <div id="brands-slider-demo-18" class="owl-carousel">
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand1.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand2.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand3.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand4.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand5.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand6.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand1.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand2.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand3.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand4.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand5.jpg"}}" alt="" />
        <img class="owl-lazy" data-src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand6.jpg"}}" alt="" />
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#brands-slider-demo-18").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                margin: 10,
                nav: false,
                dots: false,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                loop: true,
                lazyLoad: true,
                responsive: {
                    0: {
                        items:1
                    },
                    320: {
                        items:1
                    },
                    480: {
                        items:2
                    },
                    640: {
                        items:3
                    },
                    768: {
                        items:4
                    },
                    992: {
                        items:5
                    },
                    1200: {
                        items:6
                    }
                }
            });
        });
    </script>
</div>