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

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

Barbara Streisand

Release： 2024-11-03 21:28:02

Original

451 people have browsed it

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

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>

Copy after login

The above is the detailed content of Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!