Reputation: 61

My first image doesn't show in my slideshow for website

I have searched high and low for a solution to my problem - I am new to coding and have tried to insert a slideshow into my website using javascript... Everything works fine just the first image does not show for whatever reason? I assume the answer is to do with something in my css file but I could be wrong? When I click on the dots at the bottom of my page the slideshow works and images fire up, it's just getting the first image to show that is the problem.

Any help would be greatly appreciated :)

    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";
    }

    * {box-sizing:border-box}

    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
       }

    /* Hide the images by default */



    .mySlides {
        display:none;
    }



    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      }

    /* Position the "next button" to the right */
    .next {
     right: 0;
     border-radius: 3px 0 0 3px;
     }

     /* On hover, add a black background color with a little bit see-
    through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor:pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;

    }



        @-webkit-keyframes fade {
          from {opacity: .4} 
          to {opacity: 1}
        }

        @keyframes fade {
          from {opacity: .4} 
          to {opacity: 1}
        }

    <html>
	    <head>
		
		    <script src="slideshow-container.js"></script>
		    <link href="css/styles.css" "slider.css" rel="stylesheet" 
    type="text/css" media="screen" >
			    <link href="css/slideshow-container.css" rel="stylesheet" 
    type="text/css">
	    </head>

    <body>
    <div id="wrapper">
		
      <div id="logo">
		
	    <li>
		      <div id="links">
		        <ul>
		          <li></li>
		          <li></li>
		          <li><a href="index.html">Welcome </a></li>
		          <li><a href="about.html">About</a></li>
		          <li><a href="gallery.html">Treatments</a></li>
		          <li><a href="contact.html">Contact</a></li>
	       
			      </ul>
	      
		
		
		    </div> 
		      <a href="maintest.html"><img src= "Images/untitled folder/My 
    Choice Logo.jpg" width="350" class="fade">
		    
            </a></li>
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
	
	
	    <!-- Slideshow container -->
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text -->
      <div id="slide1" class="mySlides fade">
   
        <img src="Images/untitled folder/My Choice Logo.jpg" 
    style="width:100%">
 
      </div>

      <div class="mySlides fade">
    
        <img src="Images/untitled folder/Natural-Dog-Law-2-To-dojhgs,-energy-
    is-everything.jpg" style="width:100%">
   
      </div>

      <div class="mySlides fade">
   
        <img src= "Images/untitled folder/Treatment room.jpg" 
    style="width:100%">
   
      </div>

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

    <!-- The dots/circles -->
    <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>

Upvotes: 2

Answers (2)

Elysia

Reputation: 1

Call the function

currentSlide(1);

in your js which will make the first slide visible on page load.

Upvotes: 0

Kev Harper

Reputation: 61

I've managed to fix this. Not sure how good of a fix this is but a bit of playing about with the other functions of css and my basic understanding of html and css I created a new for slide one only and closed it the commanded in css that the image was show as a block... because it was in its own it hasn't placed it on top of the other images as it would normally

new html

     <!-- Full-width images with number and caption text -->
   <div id="slide1" class="mySlides fade" >

    <img src="Images/untitled folder/MyChoiceLogo.jpg" 
style="width:100%">

  </div>

  <div class="mySlides fade">

    <img src="Images/untitled folder/Natural-Dog-Law-2-To-dojhgs-
energy-is-everything.jpg" style="width:100%">

  </div>

new css (added)

.mySlides {


    display:none;
}

#slide1 {display:block}

Thanks for the people who looked and this and I hope my solution doesn't cause any problems? Hopefully this can help anyone who is struggling like I did and I am open to any other ideas on how to fix :) Thanks again

Upvotes: 4

My first image doesn&#39;t show in my slideshow for website

Answers (2)

Related Questions

My first image doesn't show in my slideshow for website