【SWELL】トップページ以外に記事スライダーを表示するカスタマイズ術

// SWELLの投稿スライダー用スクリプト＆スタイルを有効化
wp_enqueue_script('swell_swiper');
wp_enqueue_style('swell_swiper');

swiper swiper-postListWrap

/* SWELL投稿スライダー用のCSS */

/* 共通設定 */
.swiper-postListWrap .p-postList {
    flex-wrap: nowrap;
    margin: 0;
}

/* カード型レイアウト調整 */
.swiper-postListWrap .-type-card .p-postList__item,
.swiper-postListWrap .-type-thumb .p-postList__item {
    padding: 0;
}

/* ページネーションデザイン調整 */
.swiper-postListWrap .swiper-pagination-bullet {
    background: currentcolor;
    color: inherit;
}

/* サムネイル型レイアウト調整 */
.p-postList.-type-thumb + .swiper-pagination {
    bottom: -4.5px;
}

// SWELL投稿スライダーの初期化スクリプト
document.addEventListener('DOMContentLoaded', function () {
    const elmPostListWrap = document.querySelector('.swiper-postListWrap');
    
    if (!elmPostListWrap) return;

    const elmSwiper = elmPostListWrap.firstElementChild;
    if (!elmSwiper) return;

    // クラスの追加（Swiper用の設定）
    elmSwiper.classList.add('swiper-wrapper');
    Array.from(elmSwiper.children).forEach(child => child.classList.add('swiper-slide'));

    // ナビゲーション・ページネーション要素の追加
    ['swiper-pagination', 'swiper-button-prev', 'swiper-button-next'].forEach(className => {
        const element = document.createElement('div');
        element.classList.add(className);
        elmPostListWrap.appendChild(element);
    });

    // Swiperの初期化
    new Swiper('.swiper-postListWrap', {
        loop: true,
        slidesPerView: 1,
        spaceBetween: 16,
        centeredSlides: true,
        speed: 1500,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false
        },
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        breakpoints: {
            960: {
                slidesPerView: 4,
                spaceBetween: 16
            }
        }
    });
});