<div style="padding: 0 15px;margin-bottom: 50px;">
    <h2 class="filterproduct-title"><span class="content"><strong>Featured Items</strong></span></h2>
    <div id="featured_product">
        {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="1" image_width="212" category_id="94" template="owl_list.phtml"}}
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#featured_product .owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                loop: true,
                navRewind: true,
                margin: 10,
                nav: false,
                navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                dots: true,
                responsive: {
                    0: {
                        items:2
                    },
                    768: {
                        items:3
                    },
                    992: {
                        items:4
                    },
                    1200: {
                        items:5
                    }
                }
            });
        });
    </script>
</div>
<div id="home-content-slider-demo-20" class="owl-carousel owl-bottom-narrow owl-banner-carousel">
    <div class="item" style="position:relative;">
        <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/content/home_shoes.jpg"}}" alt="" />
        <div class="content" style="position:absolute;right:15%;top:20%">
            <h3>Adidas Ultra Boost</h3>
            <p><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/content/shoes.png"}}" alt="" /></p>
            <a href="#">Shop Now</a>
        </div>
    </div>
    <div class="item" style="position:relative;">
        <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/content/home_shoes.jpg"}}" alt="" />
        <div class="content" style="position:absolute;right:15%;top:20%">
            <h3>Adidas Ultra Boost</h3>
            <p><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/content/shoes.png"}}" alt="" /></p>
            <a href="#">Shop Now</a>
        </div>
    </div>
    <div class="item" style="position:relative;">
        <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/content/home_shoes.jpg"}}" alt="" />
        <div class="content" style="position:absolute;right:15%;top:20%">
            <h3>Adidas Ultra Boost</h3>
            <p><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/content/shoes.png"}}" alt="" /></p>
            <a href="#">Shop Now</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        var owl_20 = $("#home-content-slider-demo-20").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            nav: false,
            navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
        });
    });
</script>
{{block class="Smartwave\Porto\Block\Template" template="ajaxproducts/ajaxproducts.phtml"}}
<div class="full-width-image" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/content/home_golf.jpg"}}) center no-repeat;background-size: cover;">
    <h3>Explore the best of you.</h3>
    <a href="#">Shop By Golf</a>
</div>
<style type="text/css">
@media (min-width: 768px) {
    #featured_product {
        padding: 0 85px;
    }
}
h2.filterproduct-title {
    background: none;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: #000;
    margin-top: 90px;
    margin-bottom: 80px;
}
.filterproduct-title .content {
    padding: 0;
    background-color: transparent;
}
body.layout-fullwidth.cms-index-index .page-main {
    padding: 0;
}
.columns .column.main {
    padding: 0;
}
.owl-theme .owl-controls {
    margin: 0;
}
#home-content-slider-demo-20.owl-theme .owl-dots .owl-dot span {
    background: transparent;
    border: 2px solid #fff;
}
#home-content-slider-demo-20.owl-theme .owl-dots .owl-dot.active span, #home-content-slider-demo-20 .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
}
#home-content-slider-demo-20.owl-bottom-narrow .owl-controls {
    bottom: 50px;
}
.product-item-photo {
    padding: 0;
    border: 0;
}
.product.actions, .product-item .product-reviews-summary {
    display: none;
}
.product-item-name.product.name > a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
}
.product-item-name.product.name > a:hover {
    text-decoration: none;
}
.page-header.type13 {
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
}
@media (max-width: 767px) {
    h2.filterproduct-title {
        margin: 40px 0;
        font-size: 25px;
    }
    #home-content-slider-demo-20.owl-bottom-narrow .owl-controls {
        bottom: 5px;
    }
}
</style>