index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
    .first-line{
        margin: 4% 3% 0% 3%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }


    div.scroll-container {
        background-color: #33333300;
        overflow: hidden;
        white-space: nowrap;
        width:50%;
        scroll-behavior: smooth;
    }

    div.scroll-container img {
        padding: 0px;
        width: 100%;
        height: auto;
    }

    .scroll-buttons{
        position: absolute;
        width:51.6%;
        top:58%;
        left:1%;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }

    .scroll-buttons button{
        background-color:rgba(196, 248, 255, 0.377);
        width:2em;
        height:2em;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.151);
        font-size:1.5em;
        font-weight: 900;
        color:#2d2d86;
        text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97998px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.5136px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
    }
    .dots-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0 5px;
        transition: background-color 0.3s ease-in-out;
    }

    .dot.active {
        background-color: #2d2d86; /* Highlight color */
    }
    .forming{
        position: absolute;
        top:1px;
        bottom:;
        left:;
        right:1px;
    }
    </style>
</head>
<body>
    <div class="first-line">
        <!-- images -->
        <div class="scroll-container" id="scroll-container">
            <!-- duplicate -->
            <img src="./Images/Bunglows/bung-1.png" alt="Cinque Terre">
            <img src="./Images/Bunglows/bung-6.png" alt="Forest">
            <img src="./Images/Bunglows/bung-3.png" alt="Northern Lights">
            <img src="./Images/Bunglows/bung-4.png" alt="Mountains">
            <img src="./Images/Bunglows/bung-5.png" alt="Mountains">


        </div>
        <div class="dots-container" id="dots-container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="scroll-buttons">
            <button onclick="scrollItems('left')">&lt;</button>
            <button onclick="scrollItems('right')">&gt;</button>
        </div>
        <!-- forms -->
        <div class="forming">
            <h5 class="msg"></h5>
            <form>
                <input type="text" name="name" id="name" placeholder="name"><br>
                <input type="number" name="phone" id="phone" placeholder="phone: +91 xxxx..">
                <input type="email" name="email" id="email" placeholder="email"><br>
                <textarea name="message" id="message" cols="30" rows="10">Enter your message here...</textarea><br>
                <input type="submit" name="submit" id="submit" value="Submit">
            </form>
        </div>
    </div>

    </div>
    <script>
        let scrollInterval;
        const scrollContainer = document.querySelector('.scroll-container');
        const imageWidth = scrollContainer.querySelector('img').clientWidth;

        function scrollItems(direction) {
            if (direction === 'left') {
                scrollContainer.scrollLeft -= imageWidth;
            } else if (direction === 'right') {
                // Check if it's the last image, then scroll to the first image
                if (scrollContainer.scrollLeft + scrollContainer.clientWidth === scrollContainer.scrollWidth) {
                    scrollContainer.scrollLeft = 0;
                } else {
                    scrollContainer.scrollLeft += imageWidth;
                }
            }
        }

        function startAutoScroll() {
            scrollInterval = setInterval(function () {
                scrollItems('right');
            }, 3000); // Adjust the interval as needed (e.g., 3000 milliseconds for 3 seconds)
        }

        startAutoScroll();

        function updateActiveDot() {
            const scrollContainer = document.querySelector('.scroll-container');
            const dotsContainer = document.getElementById('dots-container');
            const dots = dotsContainer.querySelectorAll('.dot');
            const imageWidth = scrollContainer.querySelector('img').clientWidth;

            const activeIndex = Math.round(scrollContainer.scrollLeft / imageWidth);

            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === activeIndex);
            });
        }

        // Update active dot on scroll
        scrollContainer.addEventListener('scroll', updateActiveDot);
        // Initial update
        updateActiveDot();
    </script>


</body>
</html>