<div class="full-screen-slider">
    <div id="banner-slider-demo-14" class="owl-carousel owl-middle-narrow owl-banner-carousel">
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/14/slider/slide1.jpg"}}) 71% top no-repeat; background-size:cover; position: relative;">
            <div class="slide-1" style="position: absolute; top: 35%; width:100%;">
                <div class="container" style="text-align: left;">
            <div class="text-content" style="display: inline-block;">
            <em style="font-style: normal; text-align: left; display: block; color: #fff; font-weight: 600; line-height: 1;">NEW ARRIVALS</em>
            <h2 style="color: #fff; line-height: 1;font-weight:800;margin:0;">Fashion</h2>
                <p><span style="color: #fff; vertical-align: top; font-weight: 300;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span></p>
                <a href="#" class="btn btn-default" style="background-color: #fff; color: #333; vertical-align: top; font-weight: 600;">SHOP NOW</a>
            </div>
                </div>
            </div>
        </div>
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/14/slider/slide2.jpg"}}) 71% top no-repeat; background-size:cover; position: relative;">
            <div class="slide-2" style="position: absolute; top: 35%; width:100%;">
                <div class="container" style="text-align: left;">
            <div class="text-content" style="display: inline-block;">
            <em style="font-style: normal; text-align: left; display: block; color: #fff; font-weight: 600; line-height: 1;">EXCLUSIVE</em>
            <h2 style="color: #fff; line-height: 1;font-weight:800;margin:0;">Sunglasses</h2>
                <p style="text-align:right;"><span style="color: #fff; vertical-align: top; font-weight: 300;">Incredible prices</span></p>
                <a href="#" style="float:right; color: #fff; vertical-align: top; font-weight: 400;">SHOP NOW</a>
            </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            var owl_3 = $("#banner-slider-demo-14").owlCarousel({
                items: 1,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                dots: false,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                loop: true,
                nav: true,
                navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
            });
        });
    </script>
</div>
<div class="container">
    <div class="single-images" style="padding-top: 30px;">
        <div class="row">
            <div class="col-sm-4" style="padding-bottom:15px;">
                <a class="image-link" href="#">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/14/slider/image_link_1.jpg"}}" alt="" />
                    <span class="category-title">SUNGLASSES</span>
                </a>
            </div>
            <div class="col-sm-4" style="padding-bottom:15px;">
                <a class="image-link" href="#">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/14/slider/image_link_2.jpg"}}" alt="" />
                    <span class="category-title">WOMAN DRESSES</span>
                </a>
            </div>
            <div class="col-sm-4" style="padding-bottom:15px;">
                <a class="image-link" href="#">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/14/slider/image_link_3.jpg"}}" alt="" />
                    <span class="category-title">WOMAN BAGS</span>
                </a>
            </div>
         </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h2 style="margin-top:30px;font-size:19px;font-weight:600;margin-bottom:20px;text-align:center;" class="theme-color">WEEKLY FEATURED PRODUCTS</h2>
            <div id="featured_product" class="hide-addtocart hide-addtolinks">
                {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="0" image_width="212" image_height="263" 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: false,
                        responsive: {
                            0: {
                                items:2
                            },
                            768: {
                                items:3
                            },
                            992: {
                                items:4
                            },
                            1200: {
                                items:5
                            }
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>
<div id="parallax_01" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/14/slider/parallax_img.jpg"}}) 80% 0 no-repeat fixed; color: #fff; padding: 100px 0; position: relative;">
        <div class="overlay overlay-color" style="background-color: #000000; opacity: 0.65; filter: alpha(opacity=65);top:0;"></div>
    <div class="parallax-slider" style="position: relative; z-index: 3;">
            <div class="container">
                <div id="parallax-slider-demo-14" class="owl-carousel owl-theme">
                    <div class="item">
                        <h2 style="font-weight:600;">SPECIAL <b style="font-weight:800;">PROMO</b></h2>
                        <p style="font-weight:300;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</p>
                        <a href="#" style="font-weight:300;">Purchase now &gt;</a>
                    </div>
                    <div class="item">
                        <h2 style="font-weight:600;">SPECIAL <b style="font-weight:800;">PROMO</b></h2>
                        <p style="font-weight:300;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</p>
                        <a href="#" style="font-weight:300;">Purchase now &gt;</a>
                    </div>
                    <div class="item">
                        <h2 style="font-weight:600;">SPECIAL <b style="font-weight:800;">PROMO</b></h2>
                        <p style="font-weight:300;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</p>
                        <a href="#" style="font-weight:300;">Purchase now &gt;</a>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                require([
                    'jquery',
                    'owl.carousel/owl.carousel.min'
                ], function ($) {
                    var owl_4 = $("#parallax-slider-demo-14").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>
        </div>
</div>