I am using carousel in my website but my code is not working. Can anyone please guide me and tell me if there is something wrong with the code?
<!DOCTYPE html>
<html>
<head>
<title>Welcome to COMPEDDED. </title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="nav">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
<ul class="nav nav-pills" >
<li role="presentation" class="active"><a href="file:///home/tejvir/Compedded/test.html">Home</a></li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/browse.html">Browse</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="nav nav-pills" >
<li role="presentation" ><a href="file:///home/tejvir/Compedded/signup.html">Sign Up</a></li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/Login.html">Log In</a> </li>
<li role="presentation" ><a href="file:///home/tejvir/Compedded/contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="file:///home/tejvir/Firefox_wallpaper.png" alt="firefox">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="file:///home/tejvir/1920x1080.png" alt="ubuntu">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="file:///home/tejvir/1920x1080.png" alt="example">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3> ST microelectronics </h3>
<p> Compiler to compile different embedded codes </p>
<p>
<a href="http://www.tico-india.com"> See how to use this compiler </a>
</p>
</div>
<div class="col-md-4">
<h3> How a compiler works? </h3>
<p> Description Text. </p>
<p>
<a href="http://www.facebook.com"> Link text. </a>
</p>
</div>
<div class="col-md-4">
<h3> Reliability </h3>
<p> From experienced engineers these compilers have been tested and verified several times. </p>
<p>
<a href="http://www.google.com"> Learn more about reliability at Compedded </a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
The problem is that the carousel is showing my the first image and the buttons for left and right. but it is not actually working. I mean the image is not sliding and even the buttons wont work. I am sure this is not the first time someone is having this problem. But i have tried reading the details of the framework from bootstraps website. And still i am not able to do what i need to do.
Thanks
