<div class="full-screen-slider">
    <div id="banner-slider-demo-16" class="owl-carousel owl-bottom-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/16/slider/01.jpg"}}) 80% center no-repeat; background-size:cover;"></div>
            <div class="slide1-content" style="width:100%;position:absolute;left:0;top:40%;text-align:center;">
                <div class="text-content" style="display: inline-block;">
                    <em style="font-style: normal; text-align: right; display: block; color: #fff;font-weight:600;">NEW ARRIVALS</em>
                    <h2 style="color: #fff; line-height: 1;font-weight:800;margin:0;">Fashion Sunglasses</h2>
                    <p><span style="color: #fff; vertical-align: top;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span>&nbsp;<a href="#" class="btn btn-default" style="background-color: #fff; color: #333; vertical-align: top; font-weight: 600;float:right;">SHOP NOW</a></p>
                </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/16/slider/02.jpg"}}) 20% center no-repeat; background-size:cover;"></div>
            <div class="slide2-content" style="width:100%;position:absolute;left:0;top:40%;text-align:center;">
                <div class="text-content" style="display: inline-block;">
                    <em style="font-style: normal; text-align: right; display: block; color: #fff;font-weight:600;">NEW COLLECTION</em>
                    <h2 style="color: #fff; line-height: 1;font-weight:800;margin:0;">Women Dresses</h2>
                    <p><span style="color: #fff; vertical-align: top;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span>&nbsp;<a href="#" class="btn btn-default" style="background-color: #fff; color: #333; vertical-align: top; font-weight: 600;float:right;">SHOP NOW</a></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            var owl_16 = $("#banner-slider-demo-16").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>