Slideshow with html, css and javascript

HTML

Slideshow Container

• The main container for the slideshow.

Slide 1, 2, 3

• Each slide contains an image and a text overlay describing the project.

Dot Navigation

• Navigation dots at the bottom to switch between slides.

<div class='slideshow-container'>
<!-- Slide 1 -->
<div class='slide'>
<img
  src='https://www.claudeusercontent.com/api/placeholder/1000/563'
  alt='Project 1'
/>
<div class='text-overlay'>
  <h2>Project 1: Web Application</h2>
  <p>
    A responsive web application built with React and Node.js, featuring
    real-time data updates and user authentication.
  </p>
</div>
</div>

<!-- Slide 2 -->
<div class='slide'>
<img
  src='https://www.claudeusercontent.com/api/placeholder/1000/563'
  alt='Project 2'
/>
<div class='text-overlay'>
  <h2>Project 2: Mobile App</h2>
  <p>
    An iOS and Android app developed using React Native, integrating with
    various APIs and featuring offline functionality.
  </p>
</div>
</div>

<!-- Slide 3 -->
<div class='slide'>
<img
  src='https://www.claudeusercontent.com/api/placeholder/1000/563'
  alt='Project 3'
/>
<div class='text-overlay'>
  <h2>Project 3: E-commerce Platform</h2>
  <p>
    A full-stack e-commerce solution built with Django and Vue.js, including
    payment processing and inventory management.
  </p>
</div>
</div>

<!-- Dot navigation -->
<div class='dot-nav'>
<span class='dot' onclick='currentSlide(1)'></span>
<span class='dot' onclick='currentSlide(2)'></span>
<span class='dot' onclick='currentSlide(3)'></span>
</div>
</div>

CSS

Slideshow Container Styles

• Styling the main container with a maximum width and centered alignment.

Slide Styles

-Each slide is hidden by default, maintains a 16:9 aspect ratio, and includes a fade animation.

Fade Animation

• Defines a fade-in effect for the slides.

Image Styles

• Positioning the images to cover the entire slide area.

Text Overlay Styles

• Positioning the overlay text at the bottom of the slide with a semi-transparent background.

Dot Navigation Styles

• Styling the navigation dots with hover and active effects.

/* Main container styles */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Slide styles */
.slide {
  display: none;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  animation: fade 0.5s ease-in-out;
}

/* Fade animation */
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Image styles */
.slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text overlay styles */
.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
}

/* Heading styles */
.text-overlay h2 {
  margin-bottom: 10px;
}

/* Dot navigation styles */
.dot-nav {
  text-align: center;
  margin-top: 20px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

JS

Initial Setup:

• Set the initial slide index and define a variable for the slide interval.
• Show the initial slide.

Show Slides Function

• This function handles displaying the correct slide and updating the active dot.

Start Slide Interval

• Start an interval to automatically change the slides every 5 seconds.

Reset Slide Interval

• Clear the existing interval and start a new one when manually changing slides.

Current Slide Function

• Show the slide corresponding to the clicked dot and reset the slide interval.

Plus Slides Function

• Move to the next or previous slide and reset the slide interval.

Start the Automatic Slideshow

• Begin the automatic slide interval when the script runs.

 let i;
  let slides = document.getElementsByClassName('slide');
  let dots = document.getElementsByClassName('dot');

  // Wrap around to the first slide if we've gone past the last one
  if (n > slides.length) {
    slideIndex = 1;
  }
  // Wrap around to the last slide if we've gone before the first one
  if (n < 1) {
    slideIndex = slides.length;
  }

  // Hide all slides
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
  }

  // Remove active class from all dots
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(' active', '');
  }

  // Show the current slide and set the corresponding dot as active
  slides[slideIndex - 1].style.display = 'block';
  dots[slideIndex - 1].className += ' active';
}

// Start the automatic slide interval
function startSlideInterval() {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 5000); // Change slide every 5 seconds
}

// Reset the slide interval when manually changing slides
function resetSlideInterval() {
  clearInterval(slideInterval);
  startSlideInterval();
}