html and javascript slider working locally but doesn't work in live server

Question

I have trying to implement a HTML, CSS and Javascript image slider inside my website. I just copy and pest code from w3schools tutorial link . It's working in my local but when I upload it my live server, slider is working but slider image is not showing

Here is my implemented code below:

        <div class="container">
            <div class="section_header">
                <h1>Administrator Features</h1>
                <p> Readymade theme administrator features </p>
            </div>

            <div class="slideshow-container">
                <div class="mySlides fade">
                    <img src="./images/slider-img/dashboard.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/product.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/add-product.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/manage-slider.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/order.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/subscriber.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/message.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/user-controller.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/theme-settings.png" style="width:100%">
                </div>
                <div class="mySlides fade">
                    <img src="./images/slider-img/page-content.png" style="width:100%">
                </div>
                <a class="prev" onclick="plusSlides(-1)">
                    <i class="bi bi-chevron-left"></i>
                </a>
                <a class="next" onclick="plusSlides(1)">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </div>
            <br>
            <div style="text-align:center">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
                <span class="dot" onclick="currentSlide(4)"></span>
                <span class="dot" onclick="currentSlide(5)"></span>
                <span class="dot" onclick="currentSlide(6)"></span>
                <span class="dot" onclick="currentSlide(7)"></span>
                <span class="dot" onclick="currentSlide(8)"></span>
                <span class="dot" onclick="currentSlide(9)"></span>
                <span class="dot" onclick="currentSlide(10)"></span>
            </div>

            <script>
                var slideIndex = 1;
                showSlides(slideIndex);
                function plusSlides(n) {
                    showSlides(slideIndex += n);
                }
                setInterval(function () { plusSlides(1) }, 10000);
                function currentSlide(n) {
                    showSlides(slideIndex = n);
                }
                function showSlides(n) {
                    var i;
                    var slides = document.getElementsByClassName("mySlides");
                    var dots = document.getElementsByClassName("dot");
                    if (n > slides.length) { slideIndex = 1 }
                    if (n < 1) { slideIndex = slides.length }
                    for (i = 0; i < slides.length; i++) {
                        slides[i].style.display = "none";
                    }
                    for (i = 0; i < dots.length; i++) {
                        dots[i].className = dots[i].className.replace(" active", "");
                    }
                    slides[slideIndex - 1].style.display = "block";
                    dots[slideIndex - 1].className += " active";
                }
            </script>
        </div>
    </section>

My website link is readymadetheme.com

If you go to console of your browser you will see there 10 404 error with image. I can't understanding why this happening. Do you have any solution for this problem?

Answer 1

Are you sure that those images exist in your live version?

Currently your mongoDb image displays correctly https://readymadetheme.com/images/mongodb-logo.png

But your slider images provides 404 error. Meaning the Website can't find them. https://readymadetheme.com/images/slider-img/dashboard.png

1. Make sure that images exist in the live version.
2. Try moving slider images to images folder. To check if it works.