SWELL｜テキスト型投稿リストを縦向きスライダー化する手順

.bl_newsList {
  ul.p-postList{
    display:flex;                /* 子要素を縦に並べる */
    height:83px;                 /* 1 行分の高さに合わせる */
    flex-direction:column;
    overflow:hidden;             /* はみ出しテキストを隠す */
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
  }

  /* 各リストアイテムを行高いっぱいに広げる */
  li.p-postList__item{
    min-height:100%;
　}

  .p-postList__link{
    border-bottom:1px solid transparent;
　}
}

/**
 * easeInOutQuad – なめらかな加速 / 減速
 */
function easeInOutQuad(progress){
  return progress<0.5
    ? 2*progress*progress
    : -1+(4-2*progress)*progress;
}

/**
 * 縦向きニューススライダーの初期化
 * @param {HTMLElement} container .js_newsList 要素
 */
function initNewsSlider(container){
  const listWrapper = container.querySelector('.js_newsList > ul.p-postList');
  const items       = container.querySelectorAll('.js_newsList li.p-postList__item');
  if(!listWrapper || items.length===0) return;

  const itemH        = items[0].getBoundingClientRect().height;
  const totalH       = itemH * items.length;
  let startPos       = 0;
  let startTime      = null;
  const pauseMs      = 2000;   // 停止時間
  const scrollMs     = 2000;   // アニメーション時間
  let reqID, isStop  = false, stopPos=0;

  /* 複製してループを滑らかに */
  const frag = document.createDocumentFragment();
  items.forEach(i=>frag.appendChild(i.cloneNode(true)));
  listWrapper.appendChild(frag);

  /* 毎フレームのスクロール処理 */
  function step(ts){
    if(isStop) return;
    if(!startTime) startTime = ts;
    const progress = Math.min((ts-startTime)/scrollMs,1);
    const eased    = easeInOutQuad(progress);
    const target   = startPos + itemH;
    listWrapper.scrollTop = startPos + (target-startPos)*eased;

    if(progress<1){
      reqID = requestAnimationFrame(step);
    }else{
      startPos = target >= totalH ? 0 : target;
      listWrapper.scrollTop = startPos;
      startTime = null;
      setTimeout(()=>{ if(!isStop) reqID = requestAnimationFrame(step); }, pauseMs);
    }
  }

  /* ホバーで中央にスナップして停止 */
  container.addEventListener('mouseenter',()=>{
    if(isStop) return;
    isStop = true;
    const raw   = listWrapper.scrollTop;
    const idx   = Math.round(raw / itemH);
    const offs  = (listWrapper.clientHeight-itemH)/2;
    stopPos     = Math.max(0, Math.min(idx*itemH - offs, totalH - listWrapper.clientHeight));
    listWrapper.scrollTop = stopPos;
    cancelAnimationFrame(reqID);
  });

  /* ホバー解除で再開 */
  container.addEventListener('mouseleave',()=>{
    if(!isStop) return;
    isStop   = false;
    startPos = stopPos;
    startTime= null;
    reqID    = requestAnimationFrame(step);
  });

  /* 初回実行 */
  reqID = requestAnimationFrame(step);
}

/* DOM 完了後に一括初期化 */
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelectorAll('.js_newsList').forEach(initNewsSlider);
});

/* --------------------------------
 * SWELL メインビジュアルに投稿リストを出力
 * -------------------------------- */
add_action('swell_inner_main_visual', function(){
  $part_id = 123;  // ←取得したパーツ ID に変更
  $part    = get_post($part_id);
  if($part){
    echo apply_filters('the_content', $part->post_content);
  }
});