<div class="container">
    <div id="banner-slider-demo-18" class="owl-carousel owl-middle-narrow owl-banner-carousel">
        <div class="item" style="position: relative;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/18/slider/01.jpg"}}" alt=""/>
            <div class="content-1" style="background-color: #b81d21; color: #fff;">
                <div>
                    <p style="color:#fff;">Furniture &amp; Garden</p>
                    <h3 style="color:#fff;">HUGE<br><b>SALE</b></h3>
                </div>
                <div style="text-align:right;">
                    <em style="color:#fff;">up to</em>
                    <h4 style="color:#fff;">40%</h4>
                    <h5 style="color:#fff;">OFF</h5>
                </div>
            </div>
        </div>
        <div class="item" style="position: relative;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/18/slider/02.jpg"}}" alt=""/>
            <div class="content-2" style="background-color: #333333; color: #fff;">
                <div>
                    <p style="color:#fff;">Furniture &amp; Garden</p>
                    <h3 style="color:#fff;">SPECIAL <b>PROMO</b></h3>
                </div>
                <div style="text-align:right;border: 1px solid #ccc;border-width: 0 1px;">
                    <em style="color:#fff;">up to</em>
                    <h4 style="color:#fff;">40%</h4>
                    <h5 style="color:#fff;">OFF</h5>
                </div>
                <div>
                    <a style="color:#fff;" href="#">SHOP NOW <i class="porto-icon-right-dir"></i></a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#banner-slider-demo-18").owlCarousel({
                items: 1,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                dots: false,
                nav: true,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                loop: true,
                navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
            });
        });
    </script>

</div>