Image Slider / Carousel | HTML, CSS & JavaScript

Image Slider / Carousel with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #04

Project Overview

This project is a Digital Clock built using HTML, CSS, and JavaScript.
It displays the current time dynamically and updates every second. The clock is styled to look modern, simple, and responsive, making it a great beginner-friendly JavaScript project to learn DOM manipulation, date/time handling, and styling with CSS.

Key Features

Real-time update – The clock automatically updates every second.
Date Display – Show today’s date below the clock.
Day Indicator – Highlights the current day of the week.
Responsive Design – Works on desktop, tablet, and mobile.
AM/PM Indicator – For 12-hour format clocks.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Slider / Carousel</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="slider">
    <div class="slides">
      <img src="https://picsum.photos/600/300?random=1" alt="Slide 1">
      <img src="https://picsum.photos/600/300?random=2" alt="Slide 2">
      <img src="https://picsum.photos/600/300?random=3" alt="Slide 3">
      <img src="https://picsum.photos/600/300?random=4" alt="Slide 4">
    </div>
    <button class="btn prev">&#10094;</button>
    <button class="btn next">&#10095;</button>
    <div class="dots"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #002252;
  font-family: Arial, sans-serif;
}

.slider {
  position: relative;
  width: 80%;
  max-width: 600px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slides img {
  width: 100%;
  border-radius: 12px;
}

/* Buttons */
.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid white;
}

.btn:hover {
  background: rgba(0,0,0,0.7);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* Dots */
.dots {
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: rgba(255,255,255,0.6);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: white;
}

Javascript Code

const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const dotsContainer = document.querySelector('.dots');

let index = 0;
let dots = [];

// Create dots dynamically
images.forEach((_, i) => {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  if (i === 0) dot.classList.add('active');
  dot.addEventListener('click', () => showSlide(i));
  dotsContainer.appendChild(dot);
  dots.push(dot);
});

function updateDots() {
  dots.forEach(dot => dot.classList.remove('active'));
  dots[index].classList.add('active');
}

function showSlide(i) {
  if (i < 0) {
    index = images.length - 1;
  } else if (i >= images.length) {
    index = 0;
  } else {
    index = i;
  }
  slides.style.transform = `translateX(${-index * 100}%)`;
  updateDots();
}

prevBtn.addEventListener('click', () => showSlide(index - 1));
nextBtn.addEventListener('click', () => showSlide(index + 1));

// Auto-slide every 3s
setInterval(() => {
  showSlide(index + 1);
}, 3000);