Webleb - Snippets de Código - Controle deslizante de imagem 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;
}

Controle deslizante de imagem 2.0

Recomendado

carregamento de torradas de ovos

Um Código de Metehan

Estrutura de animação de bloco CSS

HTML

CSS

JS

Recomendado

carregamento de torradas de ovos

Um Código de Metehan

Estrutura de animação de bloco CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS