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

Image Slider 2.0

Recommended

3D CSS Photo Frame Effect to Images

Slider product

Image Slider HTML CSS JavaScript

HTML

CSS

JS

Recommended

3D CSS Photo Frame Effect to Images

Slider product

Image Slider HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS