<div class="container">
    <div id="banner-slider-demo-8" class="owl-carousel owl-middle-narrow owl-banner-carousel">
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide1.jpg"}}" alt="" />
            <div class="slide1-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="container" style="height:100%;position:relative;">
                    <div class="content-area" style="position:absolute;top:37%;width:100%;text-align:center;">
                        <h2 style="font-weight:800;color:#fff;line-height:1;">eCOMMERCE?</h2>
                        <p style="font-weight:300;color:#fff;line-height:1;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/03/slider/quote.png"}}" alt="" class="quote" style="display:inline-block;vertical-align:middle;"/>&nbsp;&nbsp;&nbsp;&nbsp;Check our options and features.&nbsp;&nbsp;&nbsp;&nbsp;<img src="{{media url="wysiwyg/smartwave/porto/homepage/03/slider/quote.png"}}" alt="" class="quote" style="display:inline-block;vertical-align:middle;"/></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide2.jpg"}}" alt="" />
            <div class="slide2-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="container" style="height:100%;position:relative;">
                    <div class="content-area" style="position:absolute;top:27%;right:23%;text-align:left;">
                        <em style="display:block;line-height:1;color:#fff;font-weight:300;font-style:normal;">up to <b>70%</b> off!</em>
                        <h2 style="font-weight:600;color:#fff;line-height:1;">HUGE <b style="font-weight:800;">SALE</b></h2>
                        <p style="font-weight:600;color:#fff;line-height:1;">Fashion<span class="split">-</span>Electronics<span class="split">-</span>Gifts<span class="split">-</span>Music<span class="split">-</span>Sports</p>
                        <div style="text-align:right;"><a href="#" class="btn btn-default" style="border:0;background-color:#fefefe;color:#777;font-weight:600;">SHOP NOW</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide3.jpg"}}" alt="" />
            <div class="slide3-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="container" style="height:100%;position:relative;">
                    <div class="content-area" style="position:absolute;left:17%;top:32%;">
                        <div style="display:inline-block;">
                            <em style="display:block;line-height:1;margin:0;color:#fff;font-weight:300;font-style:normal;text-align:left;">It’s time to feel</em>
                            <h2 style="font-weight:600;color:#fff;line-height:1;text-align:center;">THE <b style="font-weight:800;">POWER</b></h2>
                            <div style="text-align:right;"><a href="#" class="btn btn-default" style="border:0;background-color:#fefefe;color:#777;font-weight:600;">SHOP NOW</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            var owl_8 = $("#banner-slider-demo-8").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>