WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Control deslizante de imágenes 2.0
1556
creativewiz
Abrir en el editor
Video
Publica tu código
0
Recomendado
7 March 2025
máquina de garra
30 June 2025
Producción de acero, industria metalúrgica | Hierro y acero Inc.
17 May 2025
Tarjeta moderna con giro
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);