WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cursore di immagini 2.0
1375
creativewiz
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
11 June 2025
Un codice di Mete
8 February 2025
Pulsante di espulsione
11 September 2025
Livelli di animazione CSS: Allerta e gioia
HTML
Copy
Image Slider 2.0
❮
❯
CSS
Copy
<!-- Replace with your HTML Code (Leave empty if not needed) --> * { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; overflow: hidden; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .slider { position: relative; width: 80%; max-width: 800px; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .slides { display: flex; transition: transform 0.5s ease-in-out; } .slide { min-width: 100%; } .slide img { width: 100%; height:100%; display:block ; border-radius: 15px; } button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 15px; cursor: pointer; border-radius: 50%; font-size: 18px; transition: background-color 0.3s ease; } button:hover { background-color: rgba(0, 0, 0, 0.8); } .prev { left: 10px; } .next { right: 10px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */ let currentSlide = 0; function showSlide(index) { const slides = document.querySelector('.slides'); const totalSlides = document.querySelectorAll('.slide').length; if (index >= totalSlides) { currentSlide = 0; } else if (index < 0) { currentSlide = totalSlides - 1; } else { currentSlide = index; } const offset = -currentSlide * 100; slides.style.transform = `translateX(${offset}%)`; } function nextSlide() { showSlide(currentSlide + 1); } function prevSlide() { showSlide(currentSlide - 1); } setInterval(nextSlide, 6000);