// onsen.js などのファイルにこのまま貼り付けてください

// ==========================================
// 1. .onsen-splide と #center-slider の設定 (loadイベントで発火)
// ==========================================
window.addEventListener('load', function () {
    
    // --- ① .onsen-splide の設定 ---
    const splides = document.querySelectorAll('.onsen-splide');
    splides.forEach((el, index) => {
        const delay = index * 1000;
        setTimeout(() => {
            new Splide(el, {
                type: 'loop',
                speed: 2000,
                autoplay: true,
                interval: 6500,
                arrows: true,
                pagination: true,
            }).mount();
        }, delay);
    });

    // --- ② #center-slider の設定 (AutoScroll) ---
    const centerSliderEl = document.querySelector('#center-slider');
    if (centerSliderEl) {
        const centerSplide = new Splide(centerSliderEl, {
            type: 'loop',
            perPage: 3,
            focus: 'center',
            gap: '1rem',
            arrows: true,
            pagination: false,
            trimSpace: false,
            /* ★ AutoScroll Extension の設定 ★ */
            autoScroll: {
                speed: 1.5,
                pauseOnHover: false,
                pauseOnFocus: false,
            },
            breakpoints: {
                768: {
                    perPage: 1.5,
                    padding: '0',
                    gap: '10px',
                }
            }
        });
        centerSplide.mount( window.splide.Extensions );
    }
});

// ==========================================
// 2. .onsen-splide02 の設定 (DOMContentLoadedイベントで発火)
// ==========================================
document.addEventListener('DOMContentLoaded', function () {
    const splideElements = document.querySelectorAll('.onsen-splide02');
    
    splideElements.forEach(el => {
        new Splide(el, {
            type: 'loop',
            perPage: 1,
            focus: 'center',
            padding: '25%',
            gap: '1rem',
            autoplay: true,
            interval: 3000,
            speed: 1000,
            arrows: true,
            pagination: true,
            breakpoints: {
                768: {
                    padding: 0,   // ← スマホは余白なし
                    gap: '0.5rem' // ← ついでに gap も少し詰めると自然
                }
            }
        }).mount();
    });
});