first

modules/ad_banner/_ad_banner_widget1.html.erb

@@ -20,7 +20,7 @@
         data-cycle-title="{{title}}"
         data-cycle-desc="{{context}}"
         data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
-        data-target="{{target}}"
+        data-bs-target="{{target}}"
       >
        <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
            <img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
@@ -65,7 +65,22 @@
   })
   $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
     $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
-  })
+  });
+    /* 修正點：處理 Pager 無障礙朗讀文字 */
+  $('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
+    var $container = $(this).closest('.w-ba-banner');
+    var $slides = $(this).find('.w-ba-banner__slide');
+    var $pagerButtons = $container.find(".banner-pager button");
+
+    $pagerButtons.each(function(index) {
+      var slideTitle = $slides.eq(index).data('cycle-title') || "";
+      var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
+      $(this).attr({
+        "aria-label": ariaLabel,
+        "title": ariaLabel
+      });
+    });
+  });
 </script>
 <style type="text/css">
   .w-ba-banner .controlplay .resume-slide.active i{

modules/ad_banner/_ad_banner_widget3.html.erb

@@ -9,21 +9,24 @@
       data-cycle-timeout="{{timeout}}"
       data-cycle-fx="{{ad_fx}}"
       data-cycle-pager=".banner_caption_{{subpart-id}}"
-      data-pager-template="<li><a></a></li>"
+      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}}"
+     <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-bs-target="{{target}}"
       >
-          <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
-              <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
-          </a>
+       </a>
+
     </div>
   </div>
   <ul class="w-ba-banner__pager-3 banner-pager banner_caption_{{subpart-id}}"></ul>
@@ -38,23 +41,9 @@
       <p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
     </a>
   </ul>
-	<ul class="button-mid">
-		<button class="prev-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" aria-label="Pager"></button>
-		<button class="next-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" aria-label="Pager"></button>
-	</ul>
 </div>
 <script>
 	var flag = 1;
-    $('[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')
-  });
 	$('.pause-slide').click(function(){
 		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
 	});