nfu-nfuosa/modules/video_pro/_video_pro_widget5.html.erb

<div class="w-video_data video_data-widget-5 row">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<ul class="video_data_wrap col-sm-8 cycle-slideshow"
  data-list="videos"
  data-level="0"
  data-cycle-fx="scrollHorz"
  data-cycle-timeout="0"
  data-cycle-slides=".video_data"
  data-cycle-pager="#pager-{{subpart-id}}"
  data-cycle-next="#next-{{subpart-id}}"
  data-cycle-prev="#prev-{{subpart-id}}"
  data-cycle-pager-template="<a href='#' class='pager-item' data-slide-num=''><h5></h5></a>">
 <li class="video_data col-xs-12 col-sm-12" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" data-title="{{video_title}}">
   <a  href="{{video_show_url}}" title="{{video_title_escape}}">
    <div class="video_linkwrapper5">
      <div class="videohover">
        <div class="view_info">
          <span>{{view_count}}</span>
        </div>
        <div class="Video__Player"><button class="Video__PlayerButton"></button></div>
        <div class="videoduration"></div>
      </div>
      <img class="video_snapshot" src="{{snapshot_url}}"/>
    </div>
    </a>
    <div class="video_group_time">{{video_postdate}}</div>
    <div class="video_info">
      <div class="video_length">{{video_duration}}</div>
      <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
      <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
   </div>
</li>
</ul>
  <div id="pager-{{subpart-id}}" class="cycle-pager col-sm-4"></div>
  <div class="clearfix"></div>
</div>
<script>
$(document).ready(function () {
  setTimeout(function () {
    $(".w-video_data").each(function () {
      var $container = $(this);
      var videoDataItems = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的複製元素

      var videoData = videoDataItems.map(function () {
        return {
          title: $(this).attr("data-title"),
          date: $(this).find(".video_group_time").text().trim() // 取得日期
        };
      }).get();

      // 只影響「當前」輪播的 Pager Items
      $container.find(".cycle-pager .pager-item").slice(0, videoData.length).each(function (index) {
        var { title, date } = videoData[index];

        $(this).attr("data-slide-num", index);

        // 先移除舊的日期標籤，避免重複
        $(this).find(".video-date").remove();

        // 插入日期作為獨立的 <span>，放在 h5 之前
        if (date) {
          $("<span class='video-date'></span>").text(date + " ").prependTo(this);
        }

        $(this).find("h5").text(title);
      });

      // 只讓「當前」的 Pager 綁定點擊事件
      $container.find(".cycle-pager").on("click", ".pager-item", function (e) {
        e.preventDefault();
        var index = $(this).attr("data-slide-num");

        // 只影響「當前」輪播的 .cycle-slideshow
        $container.find(".cycle-slideshow").cycle("goto", index);
      });
    });
  }, 300);  // 延長時間確保 DOM 生成
  setTimeout(function () {
    $(".w-video_data.video_data-widget-5").each(function () { //限制只影響 .video_data-widget-5
      var $container = $(this);
      var $items = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的元素
      var $pager = $container.find(".cycle-pager"); // 取得 Pager 容器
      var totalItems = $items.length;
      var itemsPerPage = 5; 
      var currentIndex = 0;

      // 取得所有 video_data 的標題與日期
      var videoData = $items.map(function () {
        return {
          title: $(this).attr("data-title"),
          date: $(this).find(".video_group_time").text().trim()
        };
      }).get();

      // 生成對應的 .pager-item
      var pagerHTML = "";
      videoData.forEach(function ({ title, date }, index) {
        pagerHTML += `<a href="#" class="pager-item" data-slide-num="${index}">`;
        if (date) {
          pagerHTML += `<span class="video-date">${date} </span>`;
        }
        pagerHTML += `<h5>${title}</h5></a>`;
      });

      $pager.html(pagerHTML); // 插入新的 Pager
      var $pagerItems = $pager.find(".pager-item"); // 重新抓取 .pager-item
      $pagerItems.hide(); // 先全部隱藏

      // 插入按鈕（確保不會重複）
      if ($pager.next(".pager-controls").length === 0) {
        $pager.after(`
          <div class="pager-controls">
            <button class="prev-btn" title="下一張" aria-label="下一張"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
            <button class="next-btn" title="上一張" aria-label="上一張"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
          </div>
        `);
      }

      var $prevBtn = $pager.next(".pager-controls").find(".prev-btn");
      var $nextBtn = $pager.next(".pager-controls").find(".next-btn");

      // 更新顯示的 pager-item 和 video_data
      function updateVisibleItems() {
        var firstVisibleIndex = currentIndex; // 取得當前顯示的第一個 Index
        var lastVisibleIndex = Math.min(currentIndex + itemsPerPage, totalItems);

        // 隱藏所有
        $items.hide().removeClass("cycle-slide-active");
        $pagerItems.hide().removeClass("cycle-pager-active");

        // 顯示當前的 3 個 pager-item
        var visiblePagerItems = $pagerItems.slice(firstVisibleIndex, lastVisibleIndex).show();
        
        // 加上 `cycle-pager-active` 到第一個
        var firstPagerItem = visiblePagerItems.first().addClass("cycle-pager-active");

        // 取得對應的 video_data
        var firstPagerIndex = firstPagerItem.data("slide-num");
        var $firstVideoItem = $items.eq(firstPagerIndex).show().addClass("cycle-slide-active");
      }

      // 綁定 Pager 點擊事件
      $pager.on("click", ".pager-item", function (e) {
        e.preventDefault();
        var index = $(this).data("slide-num"); // 獲取對應 index

        $pagerItems.removeClass("cycle-pager-active");
        $(this).addClass("cycle-pager-active");

        $items.hide().removeClass("cycle-slide-active").eq(index).show().addClass("cycle-slide-active");
      });

      // 綁定上一頁按鈕
      $prevBtn.off("click").on("click", function () {
        if (currentIndex > 0) {
          currentIndex -= itemsPerPage;
          updateVisibleItems();
        }
      });

      // 綁定下一頁按鈕
      $nextBtn.off("click").on("click", function () {
        if (currentIndex + itemsPerPage < totalItems) {
          currentIndex += itemsPerPage;
          updateVisibleItems();
        }
      });

      // 初始化顯示
      updateVisibleItems();
    });
  }, 300); // 延長時間確保 DOM 生成
});


</script>