JavaScript Carousel help needed

I am trying to build a carousel into an existing web page (prototype only). I found a lot of code - the sample I used is below:

<!DOCTYPE html SYSTEM "about:legacy-compat">
<html lang="EN">
<head>
<title>Carousel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script src="lib/js/jquery-1.8.3.min.js"></script>
<script src="lib/js/bootstrap.min.js"></script>
</head>
<body>
		
	
	
	<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>

		</ol>
		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="images/image1.jpg" alt="Chania">
			</div>

			<div class="item">
				<img src="images/image2.png" alt="Chania">
			</div>

			<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>

Open in new window


However, the carousel doesn't show up as I expect on the browser -

What the webpage looks like
Any idea what could be wrong?
mightyestmeAsked:
Who is Participating?
 
Julian HansenCommented:
This seems to work
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html lang="EN">
<head>
<title>Carousel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    
  
  
  <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>

    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/image1.png" alt="Chania">
      </div>

      <div class="item">
        <img src="images/image2.png" alt="Chania">
      </div>

      <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>

Open in new window


Working sample here
1
 
Mukesh YadavFull Stack DeveloperCommented:
Hi mightyestme,

Where you added code to implement Carousel?

Thanks,
Mukesh Yadav
0
 
mightyestmeAuthor Commented:
Hi. Its under lib/js/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Mukesh YadavFull Stack DeveloperCommented:
What Carousel are you trying to implement?
0
 
Julian HansenCommented:
First up I don't see where you are including the Bootstrap CSS file

Try adding this to your code

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Open in new window

0
 
Mukesh YadavFull Stack DeveloperCommented:
Answer with working example. :)
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.