Webleb - UI Elements - Image Slider 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;
}

JS

Image Slider 2.0

Recommended