【プロンプト有】AIがCSSとJSで作るメインが浮き上がる奥行き演出のスライダー

const cardData = [{
	id: 1,
	title: '静寂のラグジュアリー',
	description: '心地よい時間を生み出す上質な空間体験',
	imageSrc: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=800',
	href: '#'
}, {
	id: 2,
	title: '洗練されたライフスタイル',
	description: '日常をより美しく彩るデザイン思想',
	imageSrc: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&q=80&w=800',
	href: '#'
}, {
	id: 3,
	title: 'ダイナミックな躍動感',
	description: '感性を刺激する力強い存在感',
	imageSrc: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&q=80&w=800',
	href: '#'
}, {
	id: 4,
	title: '細部へのこだわり',
	description: '丁寧に仕上げられた高品質なディテール',
	imageSrc: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=800',
	href: '#'
}, {
	id: 5,
	title: '新しい価値の創造',
	description: '未来志向のアイデアが生む革新的体験',
	imageSrc: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80&w=800',
	href: '#'
}];
let currentIndex = 0;
let isDragging = false;
let startX = 0;
let autoPlayTimer = null;
const cardStack = document.getElementById('cardStack');
const navDots = document.getElementById('navDots');

function createUI() {
	cardData.forEach((data, index) => {
		// Card
		const card = document.createElement('div');
		card.className = 'card';
		card.innerHTML = `
                <img src="${data.imageSrc}" alt="${data.title}">
                ${data.href ? `
                <a href="${data.href}" class="external-link-icon" target="_blank">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
                </a>` : ''}
                <div class="card-overlay">
                    <div class="card-title">${data.title}</div>
                    <div class="card-description">${data.description}</div>
                </div>
            `;
		cardStack.appendChild(card);
		// Dot
		const dot = document.createElement('div');
		dot.className = 'dot';
		dot.addEventListener('click', () => goToIndex(index));
		navDots.appendChild(dot);
	});
	updateCarousel();
	startAutoPlay();
}

function updateCarousel() {
	const cards = document.querySelectorAll('.card');
	const dots = document.querySelectorAll('.dot');
	const total = cards.length;
	cards.forEach((card, i) => {
		// 循環インデックス計算（最も近い経路で表示）
		let diff = i - currentIndex;
		// ループ処理
		if (diff > total / 2) diff -= total;
		if (diff < -total / 2) diff += total;
		const absDiff = Math.abs(diff);
		const x = diff * 180; // 水平間隔
		const z = absDiff * -150; // 奥行き
		const rotateY = diff * -25; // 回転
		const scale = i === currentIndex ? 1.1 : 0.85;
		const translateY = i === currentIndex ? -30 : 0; // 中央を少し上げる
		const opacity = 1 - (absDiff * 0.3);
		card.style.transform = `translateX(${x}px) translateZ(${z}px) translateY(${translateY}px) rotateY(${rotateY}deg) scale(${scale})`;
		card.style.opacity = opacity;
		card.style.zIndex = 100 - absDiff;
		card.style.filter = absDiff > 0 ? 'brightness(0.5)' : 'brightness(1)';
		card.classList.toggle('active', i === currentIndex);
	});
	dots.forEach((dot, i) => {
		dot.classList.toggle('active', i === currentIndex);
	});
}

function goToIndex(index) {
	const total = cardData.length;
	currentIndex = (index + total) % total;
	updateCarousel();
}

function next() {
	goToIndex(currentIndex + 1);
}

function prev() {
	goToIndex(currentIndex - 1);
}
// ドラッグ・スワイプ処理
cardStack.addEventListener('mousedown', dragStart);
cardStack.addEventListener('touchstart', (e) => dragStart(e.touches[0]));
window.addEventListener('mousemove', dragMove);
window.addEventListener('touchmove', (e) => dragMove(e.touches[0]));
window.addEventListener('mouseup', dragEnd);
window.addEventListener('touchend', dragEnd);

function dragStart(e) {
	isDragging = true;
	startX = e.clientX;
	stopAutoPlay();
}

function dragMove(e) {
	if (!isDragging) return;
}

function dragEnd(e) {
	if (!isDragging) return;
	const endX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
	const diff = startX - endX;
	if (Math.abs(diff) > 50) {
		if (diff > 0) next();
		else prev();
	}
	isDragging = false;
	startAutoPlay();
}
// キーボード操作
window.addEventListener('keydown', (e) => {
	if (e.key === 'ArrowRight') next();
	if (e.key === 'ArrowLeft') prev();
});
// 自動再生
function startAutoPlay() {
	stopAutoPlay();
	autoPlayTimer = setInterval(next, 5000);
}

function stopAutoPlay() {
	if (autoPlayTimer) clearInterval(autoPlayTimer);
}
const container = document.getElementById('carousel');
container.addEventListener('mouseenter', stopAutoPlay);
container.addEventListener('mouseleave', startAutoPlay);
createUI();