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