Below are five different image sliders using HTML, CSS, and JavaScript. Each slider has its own style and functionality.
This slider allows users to navigate through images using previous and next buttons.
1. Basic Image Slider
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Basic Image Slider</title>
</head>
<body>
<div class="slider-container">
<div class="slider">
<img src="image1.jpg" alt="Image 1" class="slide active">
<img src="image2.jpg" alt="Image 2" class="slide">
<img src="image3.jpg" alt="Image 3" class="slide">
</div>
<button id="prev">❮</button>
<button id="next">❯</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f3f3;
}
.slider-container {
position: relative;
width: 80%;
max-width: 600px;
overflow: hidden;
}
.slider {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
transition: opacity 1s ease;
opacity: 0;
}
.slide.active {
opacity: 1;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.7);
border: none;
cursor: pointer;
font-size: 24px;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
JavaScript (script.js)
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
document.getElementById('next').onclick = function() {
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % totalSlides;
slides[currentIndex].classList.add('active');
};
document.getElementById('prev').onclick = function() {
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
slides[currentIndex].classList.add('active');
};
2. Automatic Image Slider
This slider automatically transitions between images.
HTML
<div class="auto-slider-container">
<div class="auto-slider">
<img src="image1.jpg" alt="Image 1" class="slide active">
<img src="image2.jpg" alt="Image 2" class="slide">
<img src="image3.jpg" alt="Image 3" class="slide">
</div>
</div>
CSS
.auto-slider-container {
width: 80%;
max-width: 600px;
overflow: hidden;
border: 2px solid #ccc;
}
.auto-slider {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
transition: opacity 1s ease;
opacity: 0;
}
.slide.active {
opacity: 1;
}
JavaScript
let currentIndex = 0;
function showSlides() {
const slides = document.querySelectorAll('.slide');
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % slides.length;
slides[currentIndex].classList.add('active');
}
setInterval(showSlides, 2000); // Change image every 2 seconds
3. Thumbnail Navigation Slider
This slider uses thumbnails to navigate through images.
HTML
<div class="thumbnail-slider">
<div class="thumbnail-container">
<img src="image1.jpg" alt="Image 1" class="thumbnail" onclick="currentSlide(0)">
<img src="image2.jpg" alt="Image 2" class="thumbnail" onclick="currentSlide(1)">
<img src="image3.jpg" alt="Image 3" class="thumbnail" onclick="currentSlide(2)">
</div>
<div class="slider">
<img src="image1.jpg" alt="Image 1" class="slide active">
<img src="image2.jpg" alt="Image 2" class="slide">
<img src="image3.jpg" alt="Image 3" class="slide">
</div>
</div>
CSS
.thumbnail-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.thumbnail {
width: 50px;
height: auto;
cursor: pointer;
margin: 0 5px;
}
JavaScript
function currentSlide(index) {
const slides = document.querySelectorAll('.slide');
const thumbnails = document.querySelectorAll('.thumbnail');
slides.forEach(slide => slide.classList.remove('active'));
thumbnails.forEach(thumbnail => thumbnail.classList.remove('active'));
slides[index].classList.add('active');
thumbnails[index].classList.add('active');
}
4. Fade-In Slider
This slider features a fade-in effect for transitioning between images.
HTML
<div class="fade-slider">
<img src="image1.jpg" alt="Image 1" class="fade-slide active">
<img src="image2.jpg" alt="Image 2" class="fade-slide">
<img src="image3.jpg" alt="Image 3" class="fade-slide">
</div>
CSS
.fade-slider {
position: relative;
width: 80%;
max-width: 600px;
overflow: hidden;
}
.fade-slide {
position: absolute;
width: 100%;
opacity: 0;
transition: opacity 1s;
}
.fade-slide.active {
opacity: 1;
}
JavaScript
let currentSlideIndex = 0;
function fadeSlides() {
const slides = document.querySelectorAll('.fade-slide');
slides[currentSlideIndex].classList.remove('active');
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
slides[currentSlideIndex].classList.add('active');
}
setInterval(fadeSlides, 3000); // Change image every 3 seconds
5. Responsive Touch Slider
This slider can be navigated by swiping on touch devices.
HTML
<div class="touch-slider">
<div class="touch-slider-container">
<img src="image1.jpg" alt="Image 1" class="touch-slide active">
<img src="image2.jpg" alt="Image 2" class="touch-slide">
<img src="image3.jpg" alt="Image 3" class="touch-slide">
</div>
</div>
CSS
.touch-slider {
overflow: hidden;
width: 80%;
max-width: 600px;
}
.touch-slider-container {
display: flex;
transition: transform 0.5s ease;
}
.touch-slide {
min-width: 100%;
transition: opacity 1s ease;
opacity: 0;
}
.touch-slide.active {
opacity: 1;
}
JavaScript
let touchIndex = 0;
const touchSlides = document.querySelectorAll('.touch-slide');
function navigateSlides(index) {
touchSlides.forEach(slide => slide.classList.remove('active'));
touchSlides[index].classList.add('active');
}
document.querySelector('.touch-slider-container').addEventListener('swiped-left', function() {
touchIndex = (touchIndex + 1) % touchSlides.length; // Move to the next slide
navigateSlides(touchIndex);
});
document.querySelector('.touch-slider-container').addEventListener('swiped-right', function() {
touchIndex = (touchIndex - 1 + touchSlides.length) % touchSlides.length; // Move to the previous slide
navigateSlides(touchIndex);
});
// You would need to implement the swiped-left and swiped-right events based on touch events.
These examples represent a variety of image sliders that can be created using HTML, CSS, and JavaScript. From simple sliders with buttons to more complex automated or touch-responsive sliders, you can choose any style based on your requirements. To use the image sliders, you’ll have to replace "image1.jpg", "image2.jpg", and "image3.jpg" with actual image URLs that you want to display.
Make sure to implement proper touch event handling for the last slider if you want it to be fully functional on touch devices. You may want to use a library like Hammer.js to make implementing touch gestures easier, or create your own event listeners for touch events.
