fgu_a4_dark/modules/ad_banner/_ad_banner_widget0.html.erb

<div class="w-ad-banner w-ba-banner ad-banner-widget-0 ba-banner-widget-0">
  <div class="w-ad-banner__wrap  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-ad-banner__slide 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-bs-target="{{target}}"
      >
       <img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
    </div>
  </div>
  <div class="w-ad-banner__caption ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
  <div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
    <li><button title="Slide {{slide_number}}" aria-label="Pager"><span style="display: none;">Slide {{slide_number}}</span></button></li>
  </div>
  <ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
    <a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
      <i aria-hidden="true"></i>
      <p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
    </a>

    <a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
      <i aria-hidden="true"></i>
      <p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
    </a>
  </ul>
  <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>
<script>
  $('[data-subpart-id="{{subpart-id}}"] .pause-slide').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')
  });
  $('[data-subpart-id="{{subpart-id}}"] .resume-slide').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')
  });
  $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");

  })
  $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
  });
  $(function() {
    function updateBannerClip() {
      $('.ba-banner-widget-0').each(function() {
        var $banner = $(this);
        var vpWidth  = $(window).width();
        var vpHeight = $(window).height();

        // --- 寬度：找比 viewport 窄的父層容器 ---
        var $container = null;
        $banner.parents().each(function() {
          var $el = $(this);
          if ($el.outerWidth() < vpWidth - 10) {
            $container = $el;
            return false;
          }
        });

        var clipLeft   = 0;
        var clipRight  = 0;
        if ($container && $container.length > 0) {
          clipLeft  = Math.max(0, $container.offset().left);
          clipRight = Math.max(0, vpWidth - $container.offset().left - $container.outerWidth());
        }

        // --- 高度：依 .w-ad-banner 自己區塊的上下邊界裁切 ---
        var bannerTop    = $banner.offset().top - $(window).scrollTop();
        var bannerBottom = vpHeight - bannerTop - $banner.outerHeight();

        var clipTop    = Math.max(0, bannerTop);
        var clipBottom = Math.max(0, bannerBottom);

        var clipValue = 'inset('
          + clipTop    + 'px '
          + clipRight  + 'px '
          + clipBottom + 'px '
          + clipLeft   + 'px)';

        $banner.find('img.w-ba-banner__image').css('clip-path', clipValue);
      });
    }

    // 初始執行
    setTimeout(updateBannerClip, 300);

    // 視窗縮放時重新計算
    var resizeTimer;
    $(window).on('resize', function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(updateBannerClip, 100);
    });

    // ✅ 滾動時也要更新，因為 bannerTop 會隨捲動改變
    $(window).on('scroll', function() {
      updateBannerClip();
    });
  });
</script>
<style type="text/css">
  .w-ba-banner .controlplay .pause-slide.active i{
    color: #ff4500;
  }
  .w-ba-banner .controlplay{
    width: auto;
  }
  .w-ba-banner .button-mid{
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
  }
  .next-button,.prev-button{
    cursor: pointer;
  }
</style>