Cannot see the image slider in HTML

Question

I am trying to add an image slider to my personal web page (through GitHub). I am having some issues so I am not able to see the images. However, I can load images without using the slider and I can see them, so the issue is on the slider, I guess.

Here is the HTML and the 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>

Here what I see now:

Answer 1

Following is the code that you can have:

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

Answer 2

I think problem is your src attribute of img tag. you need to check "console tag" of browser.

If your "Images" folder is same level of your html page you can set the src location like this

It maybe works well.