Add more rotating images

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

src/components/sections/Customization.astro

@@ -12,22 +12,11 @@
 				<div class="flex flex-col md:flex-row items-center gap-8 md:gap-16 mb-12">
 					<div class="md:w-5/12 w-[85%] relative">
 						<div class="absolute -inset-4 bg-indigo-400/10 blur-3xl"></div>
-						<div class="relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white">
-							<div id="slider-container" class="flex transition-transform duration-1000 ease-in-out" style="width: 200%;">
-								<div class="w-1/2 relative">
-									<img src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
+						<div class="relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white aspect-video">
+							<img id="slider-image" src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-full object-cover transition-opacity duration-500">
 							<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
 							<div class="absolute bottom-4 left-6 text-white">
-										<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
-									</div>
-								</div>
-								<div class="w-1/2 relative">
-									<img src="/img/product-customization-2.webp" alt="数字孪生" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
-									<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
-									<div class="absolute bottom-4 left-6 text-white">
-										<p class="text-sm font-bold tracking-widest opacity-80 uppercase">数字孪生</p>
-									</div>
-								</div>
+								<p id="slider-text" class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
 							</div>
 						</div>
 					</div>
@@ -341,24 +330,38 @@
 
 <script>
 	(function() {
-		const sliderContainer = document.getElementById('slider-container');
+		const sliderImage = document.getElementById('slider-image');
+		const sliderText = document.getElementById('slider-text');
 		let currentIndex = 0;
-		const totalSlides = 2;
+		const slides = [
+			{ src: '/img/product-customization-1.webp', text: '园区IOC' },
+			{ src: '/img/product-customization-2.webp', text: '数字孪生' },
+			{ src: '/img/product-customization-3.webp', text: '智慧医院' },
+			{ src: '/img/product-customization-4.webp', text: '智慧园区' },
+			{ src: '/img/product-customization-5.webp', text: '智慧社区' },
+			{ src: '/img/product-customization-6.webp', text: '智慧农业' },
+			{ src: '/img/product-customization-7.webp', text: '智慧楼宇' },
+			{ src: '/img/product-customization-8.webp', text: '智慧商业' }
+		];
 
 		function updateSlide() {
-			if (!sliderContainer) return;
-			const translateX = -currentIndex * 50;
-			sliderContainer.style.transform = `translateX(${translateX}%)`;
+			if (!sliderImage || !sliderText) return;
+			
+			sliderImage.style.opacity = '0';
+			
+			setTimeout(() => {
+				currentIndex = (currentIndex + 1) % slides.length;
+				sliderImage.src = slides[currentIndex].src;
+				sliderText.textContent = slides[currentIndex].text;
+				sliderImage.style.opacity = '1';
+			}, 500);
 		}
 
 		function startAutoSlide() {
-			setInterval(() => {
-				currentIndex = (currentIndex + 1) % totalSlides;
-				updateSlide();
-			}, 5000);
+			setInterval(updateSlide, 5000);
 		}
 
-		if (sliderContainer) {
+		if (sliderImage && sliderText) {
 			startAutoSlide();
 		}
 	})();