<div class="w-ba-banner ad-banner-widget-0 ba-banner-widget-0">
  <div class="w-ba-banner__wrap  cycle-slideshow"
      data-list="images"
      data-level="0"
      data-cycle-slides=".w-ba-banner__slide"
      data-cycle-log="false"
      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
      data-cycle-auto-height="{{base_image}}"
      data-cycle-speed="{{speed}}"
      data-cycle-timeout="{{timeout}}"
      data-cycle-fx="{{ad_fx}}"
      data-cycle-pager=".banner_caption_{{subpart-id}}"
      data-pager-template=""
      data-pager-active-class="active-slide"
      data-cycle-swipe=true
      data-cycle-swipe-fx="scrollHorz"
    >
    <div class="w-ba-banner__slide {{class}}"
        data-link="{{link}}"
        data-cycle-title="{{title}}"
        data-cycle-desc="{{context}}"
        data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
        data-target="{{target}}"
      >
       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
       </a>

    </div>
  </div>
  <div class="ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
      <li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
    </div>


</div>
<script>
  var flag = 1;
  $('.pause-slide').off('click').click(function(){
    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
    $(this).addClass('active')
    $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
  });
  $('.resume-slide').off('click').click(function(){
    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
    $(this).addClass('active')
    $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
  });
  $('.next-button').off('click').on('click',function(){
    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");

  })
  $('.prev-button').off('click').on('click',function(){
    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
  })

</script>
<style type="text/css">
  .controlplay .resume-slide.active i{
    color: #32D9C3;
  }
  .controlplay .pause-slide.active i{
    color: #ff4500;
  }
</style>
