nfu_new2_bo5/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="banner-shadow"></div>
  <div class="banner-deco">
    <span class="background-mask"></span>
  </div>
  <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");
  })


  $(document).ready(function () {
  setTimeout(function () {
    var $controlplay = $('.ba-banner-widget-0 .controlplay');
    var $caption = $('.ba-banner-widget-0 .w-ad-banner__caption');
    
    $caption.after($controlplay);
  }, 500);
$('.ba-banner-widget-0 .w-ad-banner__slide a')
  .on('focus', function() {
    $('.ba-banner-widget-0 img').css({
      'height'          : 'auto',
      'width'           : '80%',
      'margin'          : 'auto',
      'position'        : 'relative',
      'display'         : 'flex',
      'justify-content' : 'center',
      'margin-top'      : '1em'
    });
  })
  .on('blur', function() {
    $('.ba-banner-widget-0 img').css({
      'height'          : '',
      'width'           : '',
      'margin'          : '',
      'position'        : '',
      'display'         : '',
      'justify-content' : '',
      'margin-top'      : ''
    });
  });
});
</script>
<style type="text/css">
  .w-ba-banner .controlplay .resume-slide.active i{
    color: #32D9C3;
  }
  .w-ba-banner .controlplay .pause-slide.active i{
    color: #ff4500;
  }
  .w-ba-banner .controlplay{
    width: auto;
  }
  .next-button,.prev-button{
    cursor: pointer;
  }
    /* ✅ 焦點可見樣式 */
  .w-ba-banner .w-ba-banner__slide a:focus,
  .w-ba-banner .w-ba-banner__slide a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
  .w-ba-banner .prev-button:focus,
  .w-ba-banner .prev-button:focus-visible,
  .w-ba-banner .next-button:focus,
  .w-ba-banner .next-button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
  .w-ba-banner .controlplay a:focus,
  .w-ba-banner .controlplay a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
  .w-ba-banner .banner-pager button:focus,
  .w-ba-banner .banner-pager button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>