Cursore di immagini 2.0

1557 creativewiz

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 January 2026

Codice HTML CSS della barra di navigazione di avvio AI

24 June 2025

Web Leb: Soluzioni digitali, Web design e tecnologia

21 July 2025

Menu di navigazione con pulsanti di scelta CSS

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

Consigliato

Codice HTML CSS della barra di navigazione di avvio AI

Web Leb: Soluzioni digitali, Web design e tecnologia

Menu di navigazione con pulsanti di scelta CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS