Solved

JavaScript Carousel help needed

Posted on 2016-08-15
7
24 Views
Last Modified: 2016-09-03
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?
0
Comment
Question by:mightyestme
  • 3
  • 3
7 Comments
 
LVL 6

Expert Comment

by:Mukesh Yadav
Comment Utility
Hi mightyestme,

Where you added code to implement Carousel?

Thanks,
Mukesh Yadav
0
 

Author Comment

by:mightyestme
Comment Utility
Hi. Its under lib/js/
0
 
LVL 6

Expert Comment

by:Mukesh Yadav
Comment Utility
What Carousel are you trying to implement?
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points (awarded by participants)
Comment Utility
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
 
LVL 6

Expert Comment

by:Mukesh Yadav
Comment Utility
Answer with working example. :)
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now