nfuoia/modules/ad_banner/_ad_banner_widget2.html.erb

<div class="w-ba-banner ba-banner-widget-2">
  <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-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="<li><button></button></li>"
      data-pager-active-class="active-slide"
      data-cycle-youtube=true
      data-cycle-youtube-autostart=false
      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>{{desc}}"
        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>
  <ul class="w-ba-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
  <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-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
  <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
	</ul>
</div>
<style>
.ba-banner-widget-2 {
  position: relative; 
  overflow: hidden;   
}

.ba-banner-widget-2 > .banner-bg-blur {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(12px);           
  transform: scale(1.05);        
  opacity: 0.9;                  
  pointer-events: none;
}


.ba-banner-widget-2 > .banner-bg-blur:not(.has-bg) {
  display: none;
}
</style>
<script>
	var flag = 1;
	$('.pause-slide').click(function(){
		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
	});
	$('.resume-slide').click(function(){
		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
	});
	$('.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");
	});

$(document).ready(function() {
  function ensureBgLayer($widget) {
    var $bg = $widget.children('.banner-bg-blur');
    if ($bg.length === 0) {
      $bg = $('<div class="banner-bg-blur" aria-hidden="true"></div>');
      $widget.prepend($bg);
    }
    return $bg;
  }

  function getActiveSlide($widget) {
    // 明確以 cycle-slide-active 為優先
    var $active = $widget.find('.w-ba-banner__slide.cycle-slide-active').first();
    if (!$active.length) {
      // fallback：找 active 類或 visible
      $active = $widget.find('.w-ba-banner__slide.active, .w-ba-banner__slide:visible').first();
    }
    return $active.length ? $active : null;
  }

  function getSlideImgSrc($slide) {
    if (!$slide) return null;
    var $img = $slide.find('img.w-ba-banner__image').first();
    if (!$img.length) return null;
    return $img.attr('src') || $img.attr('data-src') || null;
  }

  function setBgImage($bg, src) {
    if (!src) {
      $bg.removeClass('has-bg').css('background-image', '');
      return;
    }
    // preload 圖片，確定可用再設定
    var img = new Image();
    img.onload = function() {
      $bg.css('background-image', 'url("' + src + '")').addClass('has-bg');
    };
    img.onerror = function() {
      // 失敗時移除
      $bg.removeClass('has-bg').css('background-image', '');
    };
    img.src = src;
  }

  function updateWidgetBg($widget) {
    var $bg = ensureBgLayer($widget);
    var $active = getActiveSlide($widget);
    var src = $active ? getSlideImgSrc($active) : null;
    setBgImage($bg, src);
  }

  // 初始化每個 widget
  $('.ba-banner-widget-2').each(function() {
    var $widget = $(this);

    if ($widget.css('position') === 'static') {
      $widget.css('position', 'relative');
    }

    ensureBgLayer($widget);
    updateWidgetBg($widget);

    // 監聽常見輪播事件（Cycle2 / Slick / Owl）
    $widget.on('cycle-after cycle-after.fallback afterChange changed.owl.carousel slide.bs.carousel', function() {
      // 延遲小幅等待 class 變更
      setTimeout(function() { updateWidgetBg($widget); }, 30);
    });

    // pager / prev / next 互動也作為保險
    $widget.find('.prev-button, .next-button, .banner-pager, .w-ba-banner__pager-2').on('click keydown', function() {
      setTimeout(function() { updateWidgetBg($widget); }, 50);
    });

    // MutationObserver：監控 class 或子節點改變（當 plugin 只改 class 時可捕捉）
    if (window.MutationObserver) {
      var mo = new MutationObserver(function(muts) {
        var needUpdate = false;
        muts.forEach(function(m) {
          if (m.type === 'attributes' && m.attributeName === 'class') needUpdate = true;
          if (m.type === 'childList') needUpdate = true;
        });
        if (needUpdate) {
          setTimeout(function() { updateWidgetBg($widget); }, 30);
        }
      });
      mo.observe($widget[0], { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'src', 'data-src'] });
    }
  });
});


</script>