asiaH8/modules/web_resource/_web_res_widget4.html.erb

<div class="widget-link widget-4">
  <div class="widget-link__more-wrap clearfix">
    <h2 class="widget-link__widget-title">
      <span>{{widget-title}}</span>
    </h2>
  </div>
  <div class="widget-link_wrapper">
	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
	    data-level="0" data-list="web_link" data-cycle-slides="> li"
	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="4"
      data-cycle-carousel-rwd-json="{768: 1}"
      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
	    <li class="widget-link__item">
	      <div class="liWrapper">
          <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
          </a>
	      </div>
	    </li>
	  </div>
	  <ul class="button-mid">
	    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
	    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
	  </ul>
	</div>
</div>



<script>
  $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
    $(this).parent("ul").siblings('.widget-content').cycle("next");
  })
  $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
    $(this).parent("ul").siblings('.widget-content').cycle("prev");
  })
</script>
<style type="text/css">
	.widget-link_wrapper{
		position: relative;
	}
  .widget-link.widget-4 .button-mid{
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
  }
  .widget-link.widget-4 .button-mid .fa{
  	cursor: pointer;
  }
</style>