CODEWITHSUNDEEP
javascriptcsshtml
Elitezen
Elitezen

Reputation: 91

CSS slideshow animations will not occure

I am mocking a slide show animation by W3 Schools by integrating it into one of my websites. The slides do change in right times but the fade top/bot commands do not seem to do anything. I have checked my divs and javascript but it gets tricking trying to mock something and translating it into my website

is there an issue on my animation callout or what may be the problem?

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2550);
}
body {
  font: 15px/1.5 Ariel, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/*Global Settings*/

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  float: right;
  margin-top: 10px;
}


/* Header */

header {
  background: #0D98BA;
  color: #FFD700;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #FF4500 3px solid;
}

#a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header .highlight,
header .current a {
  color: #000000;
  font-weight: bold;
}

header a:hover {
  color: #fffffff;
  font-weight: bold;
}


/* Showcase */

#showcase {
  min-height: 400px;
  background: url('');
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="Developer" content="Alejandro Muratalla / ElitePower">
  <title>Power Training | Home</title>


</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1>Power Clan <span class="highlight">Training</span></h1>
      </div>
      <nav>
        <ul>
          <li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
          <li><a href="theory.html" id="a">Theory</a></li>
          <li><a href="more.html" id="a">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section id="showcase">
    <div class="container">
      <div class="w3-content w3-section" style="max-width:500px">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
        <img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">

      </div>

      <h1>Learn Professional Stratagies With Us</h1>
      <p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
    </div>
  </section id="newslater">
  <div class="container">
    <h1>Subscribe To Our Channel</h1>
    <form action="https://www.youtube.com">
      <button id="subscribe">Subscribe</button>
    </form>

    <section id="boxes">
      <div class="container">

        <div class="box">
          <img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
          <h3>Learn Theory</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
          <h3>Explore Team Plays</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
          <h3>Tips and Tricks Videos</h3>
          <p></p>
        </div>

      </div>
    </section>
    <footer>
      <p>&copy; Power Clan Super Rocketball , ElitePower 2018</p>
    </footer>

</body>

</html>

Upvotes: 0

Views: 52

Answers (1)

Ashu
Ashu

Reputation: 2266

In javascript the class name you have used is mySlides

var x = document.getElementsByClassName("mySlides");

but in HTML you have used class name as slides

Change on either side and it will start working. 

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2550);
}
body {
  font: 15px/1.5 Ariel, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/*Global Settings*/

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  float: right;
  margin-top: 10px;
}


/* Header */

header {
  background: #0D98BA;
  color: #FFD700;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #FF4500 3px solid;
}

#a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header .highlight,
header .current a {
  color: #000000;
  font-weight: bold;
}

header a:hover {
  color: #fffffff;
  font-weight: bold;
}


/* Showcase */

#showcase {
  min-height: 400px;
  background: url('');
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="Developer" content="Alejandro Muratalla / ElitePower">
  <title>Power Training | Home</title>


</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1>Power Clan <span class="highlight">Training</span></h1>
      </div>
      <nav>
        <ul>
          <li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
          <li><a href="theory.html" id="a">Theory</a></li>
          <li><a href="more.html" id="a">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section id="showcase">
    <div class="container">
      <div class="w3-content w3-section" style="max-width:500px">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
        <img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">

      </div>

      <h1>Learn Professional Stratagies With Us</h1>
      <p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
    </div>
  </section id="newslater">
  <div class="container">
    <h1>Subscribe To Our Channel</h1>
    <form action="https://www.youtube.com">
      <button id="subscribe">Subscribe</button>
    </form>

    <section id="boxes">
      <div class="container">

        <div class="box">
          <img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
          <h3>Learn Theory</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
          <h3>Explore Team Plays</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
          <h3>Tips and Tricks Videos</h3>
          <p></p>
        </div>

      </div>
    </section>
    <footer>
      <p>&copy; Power Clan Super Rocketball , ElitePower 2018</p>
    </footer>

</body>

</html>

Upvotes: 1

Related Questions