Image slider using HTML CSS and JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Image Slider with Buttons</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .slider {
            width: 600px;
            height: 300px;
            margin: 20px auto;
            border: 2px solid #ccc;
            overflow: hidden;
            position: relative;
        }

        .slider img {
            width: 100%;
            height: 100%;
            display: none; /* Hide all images by default */
        }

        .slider img.active {
            display: block; /* Show only the active image */
        }

        .buttons {
            margin-top: 10px;
        }

        .buttons button {
            padding: 10px 20px;
            margin: 0 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Image Slider with Buttons</h1>

    <div class="slider">
        <img src="https://via.placeholder.com/600x300/FF5733/FFFFFF?text=Image+1" class="active" alt="Image 1">
        <img src="https://via.placeholder.com/600x300/33FF57/FFFFFF?text=Image+2" alt="Image 2">
        <img src="https://via.placeholder.com/600x300/5733FF/FFFFFF?text=Image+3" alt="Image 3">
    </div>

    <div class="buttons">
        <button onclick="showPrevious()">Previous</button>
        <button onclick="showNext()">Next</button>
    </div>

    <script>
        let currentIndex = 0;
        const images = document.querySelectorAll(".slider img");

        function showImage(index) {
            // Hide all images
            images.forEach(img => img.classList.remove("active"));

            // Show the desired image
            images[index].classList.add("active");
        }

        function showNext() {
            currentIndex = (currentIndex + 1) % images.length; // Loop to the first image
            showImage(currentIndex);
        }

        function showPrevious() {
            currentIndex = (currentIndex - 1 + images.length) % images.length; // Loop to the last image
            showImage(currentIndex);
        }
    </script>

</body>
</html>

Explanation:

  1. HTML Structure:

    • The slider contains multiple <img> tags.
    • A Previous and Next button are added below the slider.

  2. CSS Styling:

    • Images are hidden by default (display: none).
    • Only the image with the active class is shown (display: block).

  3. JavaScript Logic:

    • showImage(index): Displays the image corresponding to the given index.
    • showNext(): Increases the index and loops to the first image when the end is reached.
    • showPrevious(): Decreases the index and loops to the last image if the index becomes negative.
    • The buttons trigger these functions using the onclick attribute.

Note: change the img with your own images.

Comments

Post a Comment

Popular posts from this blog

IT Workshop GXESL208 KTU BTech 2024 Scheme - Dr Binu V P

About Me - Dr Binu V P Syllabus Scheme and assessments Learn Theory Well Before Doing Lab- Foundations Of Computing: From Hardware Essentials To Web Design GXEST203 Reference Invitation to Computer Science   G. Michael Schneider, Judith Gersting Introduction to Computers : Peter Norton Linux For Developers   William Rothwell Teach Yourself HTML, CSS and JavaScript   Julie C. Meloni Jennifer Kyrnin Learning Materials 1.Hardware and software      Basic Computer Architecture      Memory Hierarchy      Registers      Cache Memory      RAM      Virtual Memory      Motherboard      Input Output Devices      Storage Devices-HDDs, SSDs, Optical Storage Devices      Interface Cards      Buses      Port and Connectors      Firmware      Boot Process     M...
Read more

Familiarization of basic Linux Commands- ls, mkdir, rmdir , rm, cat, cp, mv , chmod

 ls - list files The ls command in Linux is one of the most frequently used commands. It is used to list the contents of a directory . It shows files, directories, and symbolic links. Here’s a detailed explanation of the command, including its syntax, common options, and examples. Syntax ls [OPTION]... [FILE]... OPTION : Flags to modify the behavior of the command. FILE : The directory or file(s) whose contents you want to list. If omitted, ls lists the contents of the current directory. Default Behavior Without any options, ls lists the contents of the current directory in a simple format. It does not show hidden files (files starting with a dot . ) by default. Common Options Option Description -l Displays contents in a detailed (long) format, including file permissions, size, and more. -a Lists all files, including hidden files (starting with . ). -h Shows file sizes in a human-readable format (e.g., 1K , 5M , 3G ). -R Lists contents of directories recursively. -t Sorts files ...
Read more