HTML Images in slideshow not showing??

October 11, 2017

So i have a website and I am trying to make a slideshowbased off this W3 schools one. I tried using my images, but the showed up as white space, and even W3 school's didn't work. What did I do wrong?

Code:

<!DOCTYPE html>
<!--
Copyright (c) 2017 Ryan Shane
All rights reserved.
-->
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="imports/favicon.ico">
        
        <title>Title</title>

        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    </head>
    <body>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./contact">Contact</a>
                </li>
            </ul>
          </div>
        </nav>

        
        <div class="container" style="padding-top:60px">
            <!-- Begin page content -->
            <div class="mt-3">
                <h1>Header</h1>
                <p>Other header</p>
                <br/>
                <div class="slideshow-container">
                    <div class="mySlides fade">
                        <div class="numbertext">1 / 3</div>
                        <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
                        <div class="text">Caption Text</div>
                    </div>
                    <div class="mySlides fade">
                        <div class="numbertext">2 / 3</div>
                        <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
                        <div class="text">Caption Two</div>
                    </div>
                    <div class="mySlides fade">
                        <div class="numbertext">3 / 3</div>
                        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
                        <div class="text">Caption Three</div>
                    </div>
                    <a href="" class="prev" onclick="plusSlides(-1)">&#10094;</a>
                    <a href="" class="next" onclick="plusSlides(1)">&#10095;</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> 
                </div>
            </div>
        
            <!-- Footer -->
            <hr/>
            <footer>
                <p>&copy; Copyright Ryan Shane 2017</p>
            </footer>
        </div>
        
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        
        <script>
            var slideIndex = 1;
            showSlides(slideIndex);

            function plusSlides(n) {
              showSlides(slideIndex += n);
            }

            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>

    </body>
</html>

BTW: Im using NetBeans IDE and XAMPP

sample_text · October 14, 2017

Hey 1080,

It looks like there is something wrong with the fade class you've added to your slides. This class will be default set the opacity for your element to 0.

You forgot to overwrite this. Have a look at step 2 on the w3schools page.

- Marnix