CODEWITHSUNDEEP
javascriptjqueryhtml
Bryan
Bryan

Reputation: 63

Carousel not displaying image

I have a carousel that is not displaying the images upon loading the webpage for some reason. I am working in dream weaver and for some reason the JS function only kicks in after clicking on one of the arrow buttons. I feel like I need to force feed the function one image in order for it show upon loading the page but I am not sure how to do this. Thanks for the help!

Here is the HTML (I have the JS fucntion in the head tags):

    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 src="testcar.js"></script>
    <section class="carousel">
	<div class="slideshow-container">
    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://www.healthypawspetinsurance.com/Images/V3/DogAndPuppyInsurance/Dog_CTA_Desktop_HeroImage.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.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" style="width:100%">
    <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://www.what-dog.net/Images/faces2/scroll001.jpg" style="width:80%">
    <div class="text">Caption Three</div>
    </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>
    </section>

Upvotes: 2

Views: 255

Answers (1)

Shashank
Shashank

Reputation: 5670

Just try loading your JS after the HTML.

Check out the difference here:

  1. https://jsfiddle.net/vy9uwxhk/ - look at the console for the error. As it's not finding the appropriate HTML, the code execution stops and results in non-working of the carousel.
  2. https://jsfiddle.net/6k92zvze/ - here the <script> is loaded after the HTML and as it finds the HTML, the execution is successful and the carousel works fine.

Hope this helps. Here's more info on where to include your script tags.

Upvotes: 1

Related Questions