search

Home  >  Article  >  Web Front-end  >  Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 21:28:02452browse

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>

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!

JavaScript css html using https
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Why do I get a \"jQuery XML Error: \'Access-Control-Allow-Origin\' Header Missing\" when making cross-domain AJAX requests?Next article：Why do I get a \"jQuery XML Error: \'Access-Control-Allow-Origin\' Header Missing\" when making cross-domain AJAX requests?

Related articles

See more