<div class="container">
    <div id="banner-slider-demo-7" class="owl-carousel owl-middle-narrow owl-banner-carousel">
        <div class="item">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/slider/slide1.jpg"}}" alt="" style="width: 100%;" />
        </div>
        <div class="item">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/slider/slide2.jpg"}}" alt="" style="width: 100%;" />
        </div>
        <div class="item">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/slider/slide3.jpg"}}" alt="" style="width: 100%;" />
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#banner-slider-demo-7").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>