<div id="fashion-category-banner" class="owl-carousel owl-banner-carousel category-boxed-banner owl-bottom-narrow">
    <div class="item">
        <img src="{{media url="wysiwyg/smartwave/porto/category/fashion/02-01.png"}}" alt="" />
        <div class="banner-text" style="top:37%;">
            <h2 style="background-color:transparent;color:#2b2b2b;margin:0;">CATEGORY <b>BANNER</b></h2><br>
            <p style="max-width: 280px;background-color:transparent;color:#2b2b2b;font-weight:400;">Set banners and description for any category of your website.</p>
        </div>
    </div>
    <div class="item">
        <img src="{{media url="wysiwyg/smartwave/porto/category/fashion/02-02.png"}}" alt="" />
        <div class="banner-text" style="top:45%;">
            <img src="{{media url="wysiwyg/smartwave/porto/category/fashion/02-02-01.png"}}" alt="" style="vertical-align:middle;width:auto;max-width:50%;display:inline-block;">
            <a href="#" class="shop-now" style="color:#2b2b2b;vertical-align:middle;">Shop now &gt;</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        $("#fashion-category-banner").owlCarousel({
            items: 1,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: true,
            nav: false,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true
        });
    });
</script>