作品集轮播 Tailwind网站组件

<section class="py-20 bg-gray-900"> <div class="max-w-6xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-white">我的作品集</h2> <div class="relative" id="carousel-a8b9c1d2"> <div class="overflow-hidden rounded-xl"> <div class="flex transition-transform duration-500 ease-in-out" id="slides-a8b9c1d2"> <div class="w-full flex-shrink-0"> <div class="bg-gradient-to-r from-indigo-500 to-purple-600 h-96 rounded-xl flex items-center justify-center"> <div class="text-center text-white"> <h3 class="text-2xl font-bold mb-4">网站设计项目</h3> <p class="text-lg opacity-90">现代化企业官网设计</p> </div> </div> </div> <div class="w-full flex-shrink-0"> <div class="bg-gradient-to-r from-green-500 to-teal-600 h-96 rounded-xl flex items-center justify-center"> <div class="text-center text-white"> <h3 class="text-2xl font-bold mb-4">移动应用界面</h3> <p class="text-lg opacity-90">简洁直观的用户体验设计</p> </div> </div> </div> <div class="w-full flex-shrink-0"> <div class="bg-gradient-to-r from-orange-500 to-red-600 h-96 rounded-xl flex items-center justify-center"> <div class="text-center text-white"> <h3 class="text-2xl font-bold mb-4">品牌标识设计</h3> <p class="text-lg opacity-90">独特创意的品牌视觉识别</p> </div> </div> </div> </div> </div> <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full p-2 text-white transition-all" onclick="prevSlide('a8b9c1d2')"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path> </svg> </button> <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full p-2 text-white transition-all" onclick="nextSlide('a8b9c1d2')"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </button> <div class="flex justify-center mt-4 space-x-2"> <button class="w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition-opacity" onclick="goToSlide('a8b9c1d2', 0)"></button> <button class="w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition-opacity" onclick="goToSlide('a8b9c1d2', 1)"></button> <button class="w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition-opacity" onclick="goToSlide('a8b9c1d2', 2)"></button> </div> </div> </div> </section> <script>
var currentSlide = 0;
            function nextSlide(id) {
                var slides = document.getElementById('slides-' + id);
                var totalSlides = slides.children.length;
                currentSlide = (currentSlide + 1) % totalSlides;
                slides.style.transform = 'translateX(-' + (currentSlide * 100) + '%)';
                updateDots(id);
            }
            function prevSlide(id) {
                var slides = document.getElementById('slides-' + id);
                var totalSlides = slides.children.length;
                currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                slides.style.transform = 'translateX(-' + (currentSlide * 100) + '%)';
                updateDots(id);
            }
            function goToSlide(id, index) {
                var slides = document.getElementById('slides-' + id);
                currentSlide = index;
                slides.style.transform = 'translateX(-' + (currentSlide * 100) + '%)';
                updateDots(id);
            }
            function updateDots(id) {
                var carousel = document.getElementById('carousel-' + id);
                var dots = carousel.querySelectorAll('button[onclick*="goToSlide"]');
                for (var i = 0; i < dots.length; i++) {
                    dots[i].classList.toggle('opacity-100', i === currentSlide);
                    dots[i].classList.toggle('opacity-50', i !== currentSlide);
                }
            }
</script>