What is wrong with my image carousel?

Question

I am making a very simple webpage. I am a total novice and so the standard is quite low. My page currently looks like this: https://i.stack.imgur.com/SC1OY.png

What am I missing here?

Here is my code:

<html>

<head>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/CSS" href="Style.css" />

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header id="container">
    <h1>
          <a href="a">My Interactive Webpage</a>
        </h1>
    <h1>
          <a href="a">Games Page</a>
        </h1>

    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover:not(.active) {
        background-color: #111;
      }
      .active {
        background-color: #4CAF50;
      }
    </style>

    <ul>
      <li>
        <a class="active" href="#home">Home</a>
      </li>
      <li>
        <a href="#news">Information</a>
      </li>
      <li>
        <a href="#contact">Games</a>
      </li>
      <li>
        <a href="#about">Career</a>
      </li>
    </ul>
  </header>

  <div id="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img_chania.jpg" alt="Chania">
          <div class="carousel-caption">
            <h3>Chania</h3>
            <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
          </div>
        </div>

        <div class="item">
          <img src="deus.jpg" alt="Deus">
          <div class="carousel-caption">
            <h3>Deus Ex</h3>
            <p>Deus Ex is a cyberpunk-themed action-role playing video game—combining first-person shooter, stealth and role-playing elements—developed by Ion Storm and published by Eidos Interactive in 2000.
            </p>
          </div>
        </div>

        <div class="item">
          <img src="diablo.jpg" alt="Diablo">
          <div class="carousel-caption">
            <h3>Diablo III</h3>
            <p>Diablo III is an action role-playing video game developed and published by Blizzard Entertainment. It is the third installment in the Diablo franchise and was released in 2012.
            </p>
          </div>
        </div>

        <div class="item">
          <img src="hitman.jpg" alt="Hitman">
          <div class="carousel-caption">
            <h3>Hitman: Blood Money</h3>
            <p>Hitman: Blood Money is a stealth video game developed by Danish developer IO Interactive and published by Eidos Interactive in 2006.
            </p>
          </div>
        </div>

        <div class="item">
          <img src="oblivion.jpg" alt="Oblivion">
          <div class="carousel-caption">
            <h3>Elder Scrolls IV: Oblivion</h3>
            <p>The Elder Scrolls IV: Oblivion is an action role-playing video game developed by Bethesda Game Studios and published by Bethesda Softworks and the Take-Two Interactive subsidiary, 2K Games and was released in 2006.
            </p>
          </div>
        </div>

        <div class="item">
          <img src="wow.jpg" alt="WoW">
          <div class="carousel-caption">
            <h3>World of Warcraft</h3>
            <p>World of Warcraft (WoW) is a massively multiplayer online role-playing game (MMORPG) created in 2004 by Blizzard Entertainment.
            </p>
          </div>
        </div>


      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</body>

</html>

I've added a Stack Snippet to this post. It's something that allows us to run your code on this site. Take a moment to be sure that the snippet exhibits the same problems as your code on your machine. — Makoto, Dec 10 '15 at 23:15

score 0 · Answer 1 · edited Dec 15 '15 at 09:46

You are missing 2 things:

A reference to jQuery
A reference to Bootstrap's JS

Inside of your <head></head> tag add this:

  <script src="//code.jquery.com/jquery.js" />
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />

So your end result will look like this:

<head>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/CSS" href="Style.css" />
  <script src="//code.jquery.com/jquery.js" />
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

What is wrong with my image carousel?

1 Answers1