在 HTML 中看不到图像滑块

Question

我正在尝试将图像滑块添加到我的个人网页（通过 GitHub）。我有一些问题，所以我无法看到图像。但是，我可以在不使用滑块的情况下加载图像并且我可以看到它们，所以问题出在滑块上，我猜。

这是 HTML 和 JS：

<section id="GallerySlider">
    <!-- Slideshow container -->
    <div class="slideshow-container" style="margin-top: 1%;">
        <!-- Full-width images with number and caption text -->
        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="/Images/newyork_night.jpg" style="width:600px; height:1000px;">
            <div class="text"></div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="/Images/Atrapasuenyos.jpg" style="width:600px; height:1000px;">
            <div class="text"></div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="/Images/Burton.jpg" style="width:600px; height:1000px;">
            <div class="text"></div>
        </div>

        <!-- Next and previous buttons -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    
    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        // Next/previous controls
        function plusSlides(n) {
          showSlides(slideIndex += n);
        }

        // Thumbnail image controls
        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>

</section>

这是我现在看到的：

Answer 1

我认为问题是您的 img 标签的 src 属性。 您需要检查浏览器的“控制台标签”。

如果您的“图片”文件夹与您的 html 页面处于同一级别 您可以像这样设置 src 位置

也许效果不错。

Answer 2

以下是您可以拥有的代码：

<!--Slideshow Code-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

        <div class="container">
          <h2 class="select-none font-black">Highlights</h2>
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
        
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
        
              <div class="item active">
                <img src="Christmas.png" alt="Los Angeles" style="width:100%;">
                <div class="carousel-caption">
                </div>
              </div>
        
              <div class="item">
                <img src="agro chemicals.png" alt="Chicago" style="width:100%;">
                <div class="carousel-caption">
                  
                </div>
              </div>
            
              <div class="item">
                <img src="cleaning products by latan.png" alt="New York" style="width:100%;">
                <div class="carousel-caption">
                  
                </div>
              </div>

              <div class="item">
                <img src="textilesproducts by latan.png" alt="india" style="width:100%;">
                <div class="carousel-caption"></div>
              </div>

          
            </div>
        
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>