<div class="full-screen-slider">
    <div id="banner-slider-demo-3" class="owl-carousel owl-bottomright-narrow owl-banner-carousel">
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <div style="width:100%;height:100%;width:100vw;height:100vh;background:url({{media url="wysiwyg/smartwave/porto/homepage/03/slider/slide3.jpg"}}) 70% top no-repeat; background-size:cover;"></div>
            <div class="slide3-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="content-area" style="position:absolute;top:27%;left:7%;text-align:left;">
                    <h2 style="font-family:'Oswald';font-weight:800;color:#000;line-height:1;">WINTER SALE<br/>GET 30% OFF<br/>ON JACKETS.</h2>
                    <div style="text-align:left;"><a href="#" class="btn btn-default" style="border:0;background-color:#000;color:#fff;font-family:'Oswald';font-weight:400;border-radius:0;">SHOP BY JACKETS</a></div>
                </div>
            </div>
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <div style="width:100%;height:100%;width:100vw;height:100vh;background:url({{media url="wysiwyg/smartwave/porto/homepage/03/slider/slide2.jpg"}}) 80% top no-repeat; background-size:cover;"></div>
            <div class="slide2-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="content-area" style="position:absolute;top:27%;left:7%;text-align:left;">
                    <h2 style="font-family:'Oswald';font-weight:800;color:#000;line-height:1;">30% OFF<br/>ON HOLIDAY<br/>OCCASION SHOP.</h2>
                    <div style="text-align:left;"><a href="#" class="btn btn-default" style="border:0;background-color:#000;color:#fff;font-family:'Oswald';font-weight:400;border-radius:0;">SHOP NOW</a></div>
                </div>
            </div>
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <div style="width:100%;height:100%;width:100vw;height:100vh;background:url({{media url="wysiwyg/smartwave/porto/homepage/03/slider/slide1.jpg"}}) 71% top no-repeat; background-size:cover;"></div>
            <div class="slide1-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="content-area" style="position:absolute;top:27%;left:7%;text-align:left;">
                    <h2 style="font-family:'Oswald';font-weight:800;color:#000;line-height:1;">GET 20% OFF<br/>ON SUMMER<br/>HATS.</h2>
                    <div style="text-align:left;"><a href="#" class="btn btn-default" style="border:0;background-color:#000;color:#fff;font-family:'Oswald';font-weight:400;border-radius:0;">SHOP BY HATS</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright-text">COPYRIGHT 2016 PORTO. ALL RIGHTS RESERVED.</div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            var owl_3 = $("#banner-slider-demo-3").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>