html 和 javascript 滑块在本地工作但在实时服务器中不起作用

Question

我试图在我的网站中实现 HTML、CSS 和 Javascript 图片滑块。我只是从 w3schools 教程 link 复制代码并修改代码。它在我的本地工作，但当我将它上传到我的实时服务器时，滑块正在工作，但滑块图像未显示

下面是我实现的代码：

        <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>

我的网站 link 是 readymadetheme.com

如果您转到浏览器的控制台，您会看到图像出现 10 404 错误。我不明白为什么会这样。你有解决这个问题的办法吗？

Answer 1

您确定这些图像存在于您的实时版本中吗？

目前您的 mongoDb 图片显示正确 https://readymadetheme.com/images/mongodb-logo.png

但是您的滑块图像提供了 404 错误。意味着网站无法找到它们。 https://readymadetheme.com/images/slider-img/dashboard.png

确保图像存在于实时版本中。
尝试将滑块图像移动到图像文件夹。检查它是否有效。

html 和 javascript 滑块在本地工作但在实时服务器中不起作用

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

html

javascript

css

slider