Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Adding slider to home page with js

a slider to homepage, I have used js within my html to animate. However when i move the js to an external file it stops working. please assist.

html

div class="home-container">

        <div class="slider-container">
                  
          <div class="mySlides fade">
            <img
              src="Media/slider/2.jpg"
              alt="Roller Coaster">
            <div class="text">Teddy Tinkers</div>
              
          </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/7.jpg"
              alt="Splash Park"
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/6.jpg"
              alt="Eating Area"
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/8.jpg"
              alt="Park Map"
              >
              <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
           <img
              src="Media/slider/10.jpg"
              alt="Park Map"
             >
            <div class="text">Teddy Tinkers</div>
            </div> 
            <div class="mySlides fade">
          <img
              src="Media/slider/11.jpg"
              alt="Park Map"
              >
            <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
         <img
              src="Media/slider/12.jpg"
              alt="Park Map"
              >
            <div class="text">Teddy Tinkers</div>
            </div>
           </div> 
        
       </div>

this is the js i have moved externally and the slider no longer works..

document.getElementById("smallA").onclick = function(){changeSize("small")};

document.getElementById("mediumA").onclick = function(){changeSize("medium")};

document.getElementById("largeA").onclick = function(){changeSize("large")};

function changeSize(c)
{
    document.getElementsByTagName("body")[0].className="c"
}




      let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }

        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
      }

I also want to add it into a thick box and keep it contained at a certain height width on fullwidth mode but keeping responsive for mobiles etc.

If someone could help point me in the right direction I would really appreciate it.

Tags:

2

Answers


  2. 0

    There’s a mistake in your changeSize function:

    function changeSize(c)
{
    document.getElementsByTagName("body")[0].className="c"
}

    You’re setting the class name to the string "c" instead of the value of the parameter c. Change it to this:

    function changeSize(c) {
    document.getElementsByTagName("body")[0].className = c;
}

    Also, add defer attribute to your opening script tag:

    <script rel="text/javascript" href="JS/javascript.js" defer></script>

    defer tells a browser to execute the script after the document has been parsed, but before firing DOMContentLoaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search