I'm making a webpage for a friend and I wanted to add a carousel with Bootstrap but I can not get it to look and I can not find any error in the code. I'll leave it below to see if someone can explain to me what's wrong.
$(document).ready(function() {
$(".carousel").carousel()
var altura = $('.menu').offset().top;
$(window).on('scroll', function() {
if ($(window).scrollTop() > altura) {
$('.menu').addClass('menu-fixed');
} else {
$('.menu').removeClass('menu-fixed');
}
});
$("#conciertos").mouseover(function() {
$("#conciertos").css("background-color", "#800000");
});
$("#entrevistas").mouseover(function() {
$("#entrevistas").css("background-color", "#800000");
});
$("#videoclips").mouseover(function() {
$("#videoclips").css("background-color", "#800000");
});
$("#canciones").mouseover(function() {
$("#canciones").css("background-color", "#800000");
});
$("#sobreMi").mouseover(function() {
$("#sobreMi").css("background-color", "#800000");
});
$(".listaArriba").mouseleave(function() {
$(".listaArriba").css("background-color", "#B22222");
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<header class="headerEnd">
<div class="cabecera">
<a href="endi.html"><img src="endikaHeader.png" id=titulua></a>
</div>
</header>
<header class="header">
<div class="menu" id="menu">
<nav class="top-menu">
<ul class="navigation">
<li class="listaArriba" id="conciertos">CONCIERTOS
</li>
<li class="listaArriba" id="entrevistas"><a href="endi.html">ENTREVISTAS</a></li>
<li class="listaArriba" id="videoclips"><a href="endi.html">VIDEOCLIPS</a></li>
<li class="listaArriba" id="canciones"><a href="endi.html">CANCIONES</a></li>
<li class="listaArriba" id="sobreMi">;<a href="endi.html">SOBRE MI</a></li>
</ul>
</nav>
</div>
<div class="seccion1">
<img id="imagen0" class="img_carrusel " src="http://maaproject.org/maap/wp-content/uploads/2016/09/TambopataSept092016_ZOOMA_span_v2-1500x750.jpg" alt="Aqui pondria algo">
</div>
<div id="footer">
<ul class="navigationFoot">
<a href="https://es-es.facebook.com/"><img src="IconosRedes/iconoFacebook.png"></a>
<a href="https://www.instagram.com?hl=es"><img src="IconosRedes/iconoInsta.png"></a>
<a href="https://soundcloud.com"><img id="soundcloud" src="IconosRedes/soundcloud.png"></a>
</ul>
</div>
<div class="carousel">
<div id="carousel-ejemplo" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-ejemplo" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ejemplo" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://imgs.mongabay.com/wp-content/uploads/sites/20/2016/10/01175857/TambopataSept092016_ZOOMC_v2-1500x750.jpg" alt="...">
<div class="carousel-caption">
<h3>Endi</h3>
<p>Y su videoclip</p>
</div>
</div>
<div class="item">
<img src="http://maaproject.org/maap/wp-content/uploads/2016/09/TambopataSept092016_ZOOMA_span_v2-1500x750.jpg" alt="...">
<div class="carousel-caption">
<h3>Endi</h3>
<p>Y su primer videoclip</p>
</div>
</div>
</div>
<!--controles-->
<a class="left carousel-control" href="#carousel-ejemplo" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previo</span>
</a>
<a class="right carousel-control" href="#carousel-ejemplo" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
</header>
</body>PS: I have omitted some names, titles and links to maintain my friend's privacy. I have also removed the labels because they did not contribute anything.