up

assets/stylesheets/template/modules/ad_banner.scss

@@ -468,25 +468,22 @@ ul.button-mid{
 
 // Widget 3
 .ba-banner-widget-3 {
-.banner-pager .active-slide a {
+  overflow: hidden;
-    background: $theme-color-second !important;
+  border-radius: 2em;
-}
+  .w-ba-banner__image {
-
-  .w-ba-banner__wrap {
     width: 100%;
+    height: auto;
   }
 
-  .w-ba-banner__slide {
+  .youtube, .cycle-youtube {
     width: 100%;
-    position: relative;
+    height: 100%;
   }
 
-  .banner-pager {
+  object, embed {
-    right: 0;
+    width: 100%;
-    bottom: 2em;
+    height: 100%;
-   li { height: unset; width: unset; }
   }
-  ul.button-mid { display: none; }
 }
 
 //Widget 4

assets/stylesheets/template/modules/universal-table.scss

@@ -4,6 +4,10 @@
 .universal-th-text{
   white-space: pre;
 }
+.btn-info {
+    background-color: #157d9d;
+    border-color: #157d9d;
+}
 .universal-table-index h3 {
     padding: 0;
 }

assets/stylesheets/template/modules/video.scss

@@ -453,7 +453,7 @@
     font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
     font-weight: normal;
     letter-spacing: 0.3px;
-    color: #8f8f8f;
+    color: #707070;
     line-height: 1.6;
     cursor: pointer;
 }
@@ -707,7 +707,7 @@
 .movie_desc{
   clear: both;
   letter-spacing: 0.3px;
-  color: #8f8f8f;
+  color: #707070;
   line-height: 1.8;
 }
 .video_title {
@@ -727,7 +727,7 @@
   clear: both;
 }
 .video_group_time{
-  color: #8f8f8f!important;
+  color: #707070!important;
 }
 .movietitle{
   margin-bottom: 15px;
@@ -905,7 +905,7 @@
   }
     .video_desc{
       letter-spacing: 0.3px;
-      color: #8f8f8f;
+      color: #707070;
       line-height: 1.6;
       max-height: 5em;
     }

home/index.html.erb

@@ -7,7 +7,6 @@
   <%= render_orbit_bar %>
   <div class="background" data-pp="100"></div>
   <%= render_header %>
-  <div class="no-print single-child-datapp homebanner " data-pp="301" ></div>
   <div class="no-print single-child-datapp homebanner " data-pp="999"></div>
   <div class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></div>
   <div class="layout-content2 topcontent">

modules/ad_banner/_ad_banner_widget3.html.erb

@@ -0,0 +1,99 @@
+<div class="w-ba-banner ba-banner-widget-3">
+  <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-bs-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-ad-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-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");
+  });
+    /* 修正點：處理 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 .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>

modules/ad_banner/info.json

@@ -40,6 +40,14 @@
             },
             "thumbnail": "ad_banner2_thumb.png"
         },
+        {
+            "filename": "ad_banner_widget3",
+            "name": {
+                "zh_tw": "P1-1. 純圖片導圓角輪播-標準 ( 圖片, 導航圖示 )",
+                "en": "P1-1. Pure Image Carousel - Rounded - Standard ( image, navigation )"
+            },
+            "thumbnail": "ad_banner2_thumb.png"
+        },
         {
             "filename": "ad_banner_widget0",
             "name": {