Slideshow/ Carousel Indicators

Question

I was trying hard not to come on here and bother you guys but i just can't figure out to incorporate these little slide-indicators into my code. I've gone through too many tutorials and can't figure it out. I'm sure it's something simple. Please enlighten me! Appreciate it!

HTML

 <!---- Slide Show ---->
            <div class="slide-container" id="myslideshow" data-ride="carousel">
                <!--- Slide Wrapper--->
                <div class="image-slideshow" id="myslideshow" data-ride="carousel">
                    <div class="slide-text">LAS VEGAS<br> WALK | EXPERIENCE</div>
                    <div class="image fade">
                        <img src="Images/eiffel_overlook_3-1.26.jpg" alt="Bachelorette Party at the Ghost Donkey Hidden Tequila Bar">
                    </div>        
                    <div class="image fade">
                        <img src="Images/ghost_donkey_bechelorette_3-1.26.jpg" alt="Tour Stop Hidden Gem- Secluded View of Eiffel Tower">
                    </div>        
                    <div class="image fade">
                        <img src="Images/love_sign_atrium_view_3-1.26.jpeg" alt="Laura Kimptons Love Sign at Palazzo Las Vegas">
                    </div>
                    <div class="image fade">
                        <img src="Images/big_group_mex_2_3-1.26.jpeg" alt="Big Group Mexicans with Vegas Street Performers">
                    </div>        
                    <div class="image fade">
                        <img src="Images/birdbar_group_1_3-1.26.jpg" alt="Tour group at Bird Bar Flamingo Las Vegas">
                    </div>        
                    <div class="image fade">
                        <img src="Images/waldorf_view_3-1.26.jpg" alt="View of the Strip from the Skybar at Waldorf Astoria">
                    </div>
                    <div class="image fade">
                        <img src="Images/venetian_stmarks_high_view_3-1.26.jpeg" alt="St. Mark's Square and gondolas at the Venetian Las Vegas">
                    </div>
                </div>
                <script src="main.js"></script>
            </div>

Javascript

<!----- Javascript Slideshow ----->   
     <script>
        let index = 0;
        displayImages();
        function displayImages()
         {
            let i;
            const images = document.getElementsByClassName("image");
            for (i = 0; i < images.length; i++)
            {
                images[i].style.display = "none";
            }
            index++;
            if (index > images.length)
            {
                index = 1;
            }
            images[index-1].style.display = "block";
            setTimeout(displayImages, 4000); 
        }
    </script>

CSS

/*---- Slide Show ----*/

.slide-container
{
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
}
.image-slideshow 
{
    width: 100%;
    position:relative;
    margin: auto;
}
.image-slideshow img
{
    width: 100%;
}
.fade 
{
    animation-name: fade;
    animation-duration: 5s;
}
@keyframes fade 
{
    from {opacity: .5}
    to {opacity: 1}
}
.slide-text
{
    
    font-size: 50px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    position: absolute;
    top: 40%;
    left: 5%;
    z-index: 3;
    color: #fff;
    margin: 0;
}

Looking to add dots or dashes, whatever, on the bottom of the slides (on the slides, not under) so guests can flip through the slides. At the same time, I also want to keep it on an automatic slide (which right now it runs automatically). Thanks again.

Answer 1

Here's a very basic example. It creates elements based on the number of images and then puts them inside the wrapper, at the same time it also attaches event listeners.

.slide-container {
            margin-top: 30px;
            margin-bottom: 30px;
            width: 100%;
        }

        .image-slideshow {
            width: 100%;
            position: relative;
            margin: auto;
        }

        .image-slideshow img {
            width: 100%;
        }

        .fade {
            animation-name: fade;
            animation-duration: 5s;
        }

        @keyframes fade {
            from {
                opacity: .5
            }

            to {
                opacity: 1
            }
        }

        .slide-text {

            font-size: 50px;
            font-family: 'Oswald', sans-serif;
            font-weight: 500;
            line-height: 1.2;
            position: absolute;
            top: 40%;
            left: 5%;
            z-index: 3;
            color: #fff;
            margin: 0;
        }

        .indicators {
            display: flex;
        }

        .indicators>div {
            cursor: pointer;
            margin: 5px;
        }

<div class="slide-container" id="myslideshow" data-ride="carousel">
    <!--- Slide Wrapper--->
    <div class="image-slideshow" id="myslideshow" data-ride="carousel">
        <div class="slide-text">LAS VEGAS<br> WALK | EXPERIENCE</div>
        <div class="image fade">
            <img src="Images/eiffel_overlook_3-1.26.jpg" alt="Bachelorette Party at the Ghost Donkey Hidden Tequila Bar">
        </div>        
        <div class="image fade">
            <img src="Images/ghost_donkey_bechelorette_3-1.26.jpg" alt="Tour Stop Hidden Gem- Secluded View of Eiffel Tower">
        </div>        
        <div class="image fade">
            <img src="Images/love_sign_atrium_view_3-1.26.jpeg" alt="Laura Kimptons Love Sign at Palazzo Las Vegas">
        </div>
        <div class="image fade">
            <img src="Images/big_group_mex_2_3-1.26.jpeg" alt="Big Group Mexicans with Vegas Street Performers">
        </div>        
        <div class="image fade">
            <img src="Images/birdbar_group_1_3-1.26.jpg" alt="Tour group at Bird Bar Flamingo Las Vegas">
        </div>        
        <div class="image fade">
            <img src="Images/waldorf_view_3-1.26.jpg" alt="View of the Strip from the Skybar at Waldorf Astoria">
        </div>
        <div class="image fade">
            <img src="Images/venetian_stmarks_high_view_3-1.26.jpeg" alt="St. Mark's Square and gondolas at the Venetian Las Vegas">
        </div>
        <div class="indicators" id="indicators"></div>
    </div>
    <script src="main.js"></script>
</div>

<script>
    let index = 0;
    const images = document.getElementsByClassName("image");

    function createIndicators() {
        const indicatorWrapper = document.querySelector('#indicators');
        for (i = 0; i < images.length; i++) {
            const dot = document.createElement('div');
            dot.style.width = "10px";
            dot.style.height = "10px";
            dot.style.backgroundColor = "black";
            dot.dataset.imageIndex = i;

            dot.addEventListener('click', function (e) {
                const index = e.target.dataset.imageIndex;
                for (let i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[index].style.display = "block";
            })

            indicatorWrapper.append(dot)
        }
    }

    function displayImages() {
        for (let i = 0; i < images.length; i++) {
            images[i].style.display = "none";
        }
        index++;
        if (index > images.length) {
            index = 1;
        }
        images[index - 1].style.display = "block";
        setTimeout(displayImages, 4000);
    }

    displayImages();
    createIndicators();

</script>