Good morning.
I'm having a problem with the carousel and I do not know what I have to change to solve it. The problem is that the carousel takes the two photos well but does not slide well in the two photos.
It is in the first photo about 4 seconds and then in the second photo is not more than half a second before returning to the first photo.
This last change does it without slide, directly.
I attach the code to see if you can tell me what is wrong, since I do not see anything or the error escapes me:
$(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');
}
});
$("#news").mouseover(function(){
$("#news").css("background-color", "#800000");
$("#a").css("color",black);
});
$("#conciertos").mouseover(function(){
$("#conciertos").css("background-color", "#800000");
});
$("#videos").mouseover(function(){
$("#videos").css("background-color", "#800000");
});
$("#songs").mouseover(function(){
$("#songs").css("background-color", "#800000");
});
$("#lyrics").mouseover(function(){
$("#lyrics").css("background-color", "#800000");
});
$("#store").mouseover(function(){
$("#store").css("background-color", "#800000");
});
$(".listaArriba").mouseleave(function(){
$(".listaArriba").css("background-color","#B22222");
});
}); .headerEnd{
padding: 0px;
margin: 0px;
width: 100%;
background-color:#000000;
height:100px;
}
#fotoEndi{
margin-left: 100px;
}
@font-face{
font-family: "TituloEndi";
src: url("GameofBrush.ttf");
}
a:link{
text-decoration:none;
}
a:visited{
color: #000000;
}
#nombreEndi{
text-align: center;
margin:0 auto;
position: relative;
top: 50%;
color: #8B0000;
font-family: "TituloEndi";
font-size:40px;
}
.header{
height:100px; width:100%;
text-align:center;
}
.menu{
height: 37px;
width:100%;
background-color: #B22222;
color:#333;
text-align:center;
box-shadow:0px 4px 3px rgba(0,0,0,0)
}
.wrapper{ height:2000px;
width:100%;
padding-top:20px
}
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
width:100%;
box-shadow: 2px 2px 5px #999;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
font-size: 25px;
width: 100%;
}
body{
background-color: #DCDCDC;
margin: 0;
}
#menu li{
background: #DCDCDC;
display: inline-block;
list-style: none;
background-color:#B22222;
}
.listaArriba{
color: #000000;
width: 150px;
}
#titulua{
background-color:#000;
text-align:center;
margin-left: 300px;
margin-top: 7px;
}
.seccion1{
background-color: white;
height:749px;
width: 1350px;
margin-left: 0px;
margin-top: 0px;
}
#footer{
margin-top:0px;
height: 40px;
background-color:#B22222;
}
#soundcloud{
margin-right:40px;
margin-top: 3px;
}
.navigationFoot{
text-align: right;
}
#creditos{
font-size:12px;
text-decoration:none;
}
a{
color:black;
}
#o{
margin-left: 250px;
float: top;
} <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="headerEnd">
<div class = "cabecera">
<ul id = "lista1">
<a href="home.html" id="fotoEndi"><img src="endikasangroniz.png" id=titulua></a>
<a href="../EndiIngles/endi.html" id = "o"><img src="../Bandera/uk.png"></a>
<a href="../EndiCastellano/endi.html"><img src="../Bandera/banderaEspana.png"></a>
<a href="../EndiEuskera/endi.html"><img src="../Bandera/ikurrina.png"></a>
</ul>
</div>
</header>
<header class = "header">
<div class="menu" id="menu">
<nav class="top-menu">
<ul class = "navigation">
<li class="listaArriba" id="news"><a href="news.html">NEWS</a></li>
<li class="listaArriba" id="conciertos"><a href="gigs.html">GIGS</a></li>
<li class="listaArriba" id="videos"><a href="videos.html">VIDEOS</a></li>
<li class="listaArriba" id="songs"><a href="music.html">MUSIC</a></li>
<li class="listaArriba" id="lyrics"><a href="lyrics.html">LYRICS</a></li>
<li class="listaArriba" id="store"><a href="https://endikasangroniz.bandcamp.com/" target="_blank">STORE</a></li>
</ul>
</nav>
</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"></li>
<li data-target="#carousel-ejemplo" data-slide-to="1" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://tblla.com//assets/img/uploads/projects/Park-2-1350x750.jpg" alt="Stolen Kiss">
<div class="carousel-caption">
<h3>Stolen Kiss</h3>
<p>Second Videoclip</p>
</div>
</div>
<div class="item">
<img src="https://www.google.es/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjgrKfz0rHXAhXGuxQKHTIND8kQjRwIBw&url=http%3A%2F%2Ftblla.com%2Fprojects%2Fwhistler-olympic-paralympic-village&psig=AOvVaw0r6S37FmTYsThpv3APS60M&ust=1510322169410306" alt="One More Shot">
<div class="carousel-caption">
<h3>One More Shot</h3>
<p>First Videoclip</p>
</div>
</div>
</div>
<!--controls carousel-->
<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>
<div id="footer">
<ul class = "navigationFoot">
<a id="n" href="https://es-es.facebook.com/EndikaSangroniz/" target="_blank"><img src="../IconosRedes/iconoFacebook.png" ></a>
<a id="n" href="https://www.instagram.com/endikasangroniz/?hl=es" target="_blank"><img src="../IconosRedes/iconoInsta.png"></a>
<a id="n" href="https://endikasangroniz.bandcamp.com/" target="_blank"><img id="soundcloud" src="../IconosRedes/bandcamp.png"></a>
</ul>
</div>
</header>
</body> I hope that it can be executed as I have set it, if you can not let me know and I will edit the code.
Greetings.