Css

Image sliders using HTML, CSS, and JavaScript

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" >



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.