document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.experience-block').forEach(block => {
const carousel = block.querySelector('.experience-carousel');
const items = Array.from(carousel.querySelectorAll('.carousel-item'));
let currentIndex = 0;
// トラックを作る
const track = document.createElement('div');
track.className = 'carousel-track';
items.forEach(item => track.appendChild(item));
carousel.appendChild(track);
// 表示初期化
const updateCarousel = () => {
track.style.transform = `translateX(-${currentIndex * 100}%)`;
};
updateCarousel();
// 下スライダーでメイン動画切替
items.forEach(item => {
const mainVideo = item.querySelector('.main-video video');
const thumbs = item.querySelectorAll('.thumb-item');
thumbs.forEach(thumb => {
thumb.addEventListener('mouseenter', () => {
mainVideo.src = thumb.dataset.video;
mainVideo.play();
});
thumb.addEventListener('mouseleave', () => {
mainVideo.src = thumbs[0].dataset.video;
mainVideo.play();
});
});
});
// 左右スワイプ（タッチ対応）
let startX = 0;
track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
track.addEventListener('touchend', e => {
let deltaX = e.changedTouches[0].clientX - startX;
if(deltaX > 50) currentIndex = Math.max(currentIndex -1, 0);
if(deltaX < -50) currentIndex = Math.min(currentIndex +1, items.length-1);
updateCarousel();
});
});
});
