Back to Discover
Minimal Image Carousel in JavaScript

asifmughal
Created Nov 02, 2025
1 views
0 likes
0 comments
0 forks
Export Fork Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Image Carousel</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    padding: 40px;
    background: #f7f7f7;
  }
  .carousel {
    position: relative;
    width: 400px;
    height: 250px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
  }
  .carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
  .carousel img.active {
    display: block;
  }
  .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
  }
  .btn:hover {
    background: rgba(0,0,0,0.7);
  }
  #prev {
    left: 10px;
  }
  #next {
    right: 10px;
  }
</style>
</head>
<body>

<div class="carousel">
  <img src="https://picsum.photos/id/1018/400/250" class="active">
  <img src="https://picsum.photos/id/1025/400/250">
  <img src="https://picsum.photos/id/1015/400/250">

  <button class="btn" id="prev">Prev</button>
  <button class="btn" id="next">Next</button>
</div>

<script>
  const images = document.querySelectorAll(".carousel img");
  let index = 0;

  document.getElementById("next").onclick = () => {
    images[index].classList.remove("active");
    index = (index + 1) % images.length;
    images[index].classList.add("active");
  };

  document.getElementById("prev").onclick = () => {
    images[index].classList.remove("active");
    index = (index - 1 + images.length) % images.length;
    images[index].classList.add("active");
  };
</script>

</body>
</html>
Comments (0)

No comments yet. Be the first!