<div class="full-screen-slider">
    <div id="banner-slider-demo-19" class="owl-carousel owl-bottom-narrow owl-banner-carousel">
        <div class="item">
            <div style="width:100%;height:100%;background:url({{media url="wysiwyg/smartwave/porto/homepage/19/slider/slide1.jpg"}}) 80% center no-repeat; background-size:cover;"></div>
            <div class="slide-content" style="position: absolute; z-index: 5; left: 10.5%; top: 35%; text-align: left;">
                <h2 style="color: #000;">WINTER SALE<br/>70% OFF</h2>
                <p style="color: #000;">Shop new styles added to sale online.</p>
                <a class="btn-line" href="#">SHOP NOW</a>
            </div>
        </div>
        <div class="item">
            <div style="width:100%;height:100%;background:url({{media url="wysiwyg/smartwave/porto/homepage/19/slider/slide2.jpg"}}) 80% center no-repeat; background-size:cover;"></div>
            <div class="slide-content" style="position: absolute; z-index: 5; left: 10.5%; top: 35%; text-align: left;">
                <h2 style="color: #000;">NEW SUMMER<br/>COLLECTION</h2>
                <p style="color: #000;">New styles added to summer collection.</p>
                <a class="btn-line" href="#">SHOP NOW</a>
            </div>
        </div>
        <div class="item">
            <div style="width:100%;height:100%;background:url({{media url="wysiwyg/smartwave/porto/homepage/19/slider/slide3.jpg"}}) 80% center no-repeat; background-size:cover;"></div>
            <div class="slide-content" style="position: absolute; z-index: 5; left: 10.5%; top: 35%; text-align: left;">
                <h2 style="color: #000;">CONVERSE<br/>30% OFF</h2>
                <p style="color: #000;">Outlet converse 30% off for you.</p>
                <a class="btn-line" href="#">SHOP NOW</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            var owl_3 = $("#banner-slider-demo-19").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>
<style type="text/css">
#banner-slider-demo-19 .owl-controls {
    text-align: left;
    padding-left: 10%;
    bottom: 8%;
}
#banner-slider-demo-19 .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    border-width: 2px;
}
</style>