Webleb - fragmentos de código - Control deslizante de imágenes 2.0

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Slider 2.0</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background"></div>
  <div class="slider">
    <div class="slides">
      <div class="slide"><img src="https://www.dropbox.com/scl/fi/7rz95ja1uldr7dqlq5i31/76791bb68a374ee6617a62f5696890c9.jpg?rlkey=rexif9pxygubvpr2436tjm9bn&st=fy7pffww&dl=1"  alt="Image 1"></div>
      <div class="slide"><img src="https://www.dropbox.com/scl/fi/nloy8h25eqzshm5q9nkvg/b1b9959a1cb4ceb4f82c4ba72f973ee9.jpg?rlkey=qauf89ernzmm5gp8wnservcem&st=ux85qc6a&dl=1" alt="Image 2"></div>
      <div class="slide"><img src="https://www.dropbox.com/scl/fi/i818rmnummezd73ses34d/fb2ec5cd060d088eaf3dbae6ffe5aeba.jpg?rlkey=4ff5lkpamlqr98wwnw1hsgjnc&st=v8ftmr53&dl=1" alt="Image 3"></div>
      <div class="slide"><img src="https://www.dropbox.com/scl/fi/lrma85n3vx05xjy3otyyw/6e5c200a761b0ef798533c7680d5ba3c.jpg?rlkey=57u1l8c9z5l9g68shln3gjf8g&st=nrdf4ifc&dl=1" alt="Image 4"></div>
      <div class="slide"><img src="https://www.dropbox.com/scl/fi/unxncrqyvcf3ntrjyg6ze/765d9174b66fe49b0bf46bcffee5611d.jpg?rlkey=d0zpo0ruqz5il6px31djs5ayt&st=no1yt87i&dl=1" alt="Image 5"></div>
      <div class="slide"><img src="https://www.dropbox.com/scl/fi/2uqsn0zc3ks9bwkf4bgei/65150370bba64c71a1ff9a5c2140a6a0.jpg?rlkey=yhkb6rccw6uso01uo70uf2f1m&st=u512dx68&dl=1" alt="Image 6"></div>
    </div>
    <button class="prev" onclick="prevSlide()">❮</button>
    <button class="next" onclick="nextSlide()">❯</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

* {
  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;
}

Control deslizante de imágenes 2.0

Recomendado

Fuente de baile

Formulario de Inicio de Sesión con Validación de Entrada

Menú del sitio

HTML

CSS

JS

Recomendado

Fuente de baile

Formulario de Inicio de Sesión con Validación de Entrada

Menú del sitio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS