Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/

This content originally appeared on DEV Community and was authored by Prince

Follow us on instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Background Selector</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #121212;
            font-family: Arial, sans-serif;
        }
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-size: cover;
            background-position: center;
            transition: background-image 0.5s ease;
            z-index: -1;
        }
        .controls {
            position: absolute;
            bottom: 20px;
            display: flex;
            gap: 10px;
        }
        .arrow {
            background-color: rgba(255, 255, 255, 0.7);
            border: none;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .arrow:hover { background-color: rgba(255, 255, 255, 1); }
        .thumbnails {
            display: flex;
            gap: 8px;
        }
        .thumbnails img {
            width: 80px;
            height: 50px;
            object-fit: cover;
            opacity: 0.6;
            transition: opacity 0.3s, border 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 8px;
        }
        .thumbnails img.active-thumbnail {
            opacity: 1;
            border: 2px solid yellow;
        }
    </style>
</head>
<body>

<div class="background" id="background"></div>

<div class="controls">
    <div class="thumbnails" id="thumbnails">
        <img src="./nature1.jpg" class="active-thumbnail" data-bg="./nature1.jpg">
        <img src="./nature2.jpg" data-bg="./nature2.jpg">
        <img src="./nature3.jpg" data-bg="./nature3.jpg">
        <img src="./nature4.jpeg" data-bg="./nature4.jpeg">
        <img src="./nature5.jpeg" data-bg="./nature5.jpeg">
    </div>
    <button class="arrow" id="left">&#9664;</button>
    <button class="arrow" id="right">&#9654;</button>
</div>

<script>
    const background = document.getElementById('background');
    const thumbnails = document.querySelectorAll('.thumbnails img');
    let currentIndex = 0;

    // Function to update the background based on the active thumbnail
    const updateBackground = (index) => {
        thumbnails.forEach((thumb, i) => {
            thumb.classList.toggle('active-thumbnail', i === index);
        });
        background.style.backgroundImage = `url(${thumbnails[index].getAttribute('data-bg')})`;
    };

    // Left arrow click event
    document.getElementById('left').onclick = () => {
        currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
        updateBackground(currentIndex);
    };

    // Right arrow click event
    document.getElementById('right').onclick = () => {
        currentIndex = (currentIndex + 1) % thumbnails.length;
        updateBackground(currentIndex);
    };

    // Thumbnail click event to update the background
    thumbnails.forEach((thumb, i) => {
        thumb.onclick = () => {
            currentIndex = i;
            updateBackground(i);
        };
    });

    // Set initial background
    updateBackground(currentIndex);
</script>

</body>
</html>

This content originally appeared on DEV Community and was authored by Prince

Print Share Comment Cite Upload Translate Updates

APA

Prince | Sciencx (2024-11-03T02:18:35+00:00) Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/. Retrieved from https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/

MLA

" » Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/." Prince | Sciencx - Sunday November 3, 2024, https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/

HARVARD

Prince | Sciencx Sunday November 3, 2024 » Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/., viewed ,<https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/>

VANCOUVER

Prince | Sciencx - » Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/

CHICAGO

" » Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/." Prince | Sciencx - Accessed . https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/

IEEE

" » Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/." Prince | Sciencx [Online]. Available: https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/. [Accessed: ]

rf:citation

» Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/ | Prince | Sciencx | https://www.scien.cx/2024/11/03/image-slider-using-html-css-and-javascript-coding-https-www-instagram-com-webstreet_code/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Follow us on instagram: https://www.instagram.com/webstreet_code/

Related Posts