<div class="w-ba-banner ba-banner-widget-7">
  <div class="owl-carousel"
      data-list="images"
      data-level="0"
    >
    <div class="img-item {{class}}">
      <img src="{{image_link}}" alt="{{alt_title}}">
      <div class="item-scope">
        <span class="scope"></span>
        <!-- <div class="scope-text">
          <h2>{{title}}</h2>
          <p>{{context}}</p>
        </div> -->
      </div>
    </div>
  </div>
</div>



<script type="text/javascript">

    $('.owl-nav').click(function(){
        event.preventDefault;
    })

    $('.owl-carousel').owlCarousel({
    center: true,
    dots:true,
    items:2,
    loop:true,
    margin:10,
    responsive:{
        600:{
            items:2
        }
    }
});

$('.owl-carousel').find('.owl-nav').removeClass('disabled');
$('.owl-carousel').on('changed.owl.carousel', function(event) {
	$(this).find('.owl-nav').removeClass('disabled');
});
</script>


<style>
.ba-banner-widget-7{
     .owl-carousel .owl-nav.disabled{
        display:block;
    }
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
    font-size: 7vw !important;
    color: #ddd;
    background-color: #000000a6;
    height: 100%;
    padding: 10px;
}

.owl-carousel .owl-nav button.owl-next{
    right:0;
    position:absolute;
}
.owl-carousel .owl-nav button.owl-prev{
    left:0;
    position:absolute;
}

.owl-nav {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}



</style>
