I'm trying to show the following carousel on my website:
But instead of appearing in several columns, only the first column appears on the left and nothing else.
Here is the code of my page where the slider is:
If the code that activates the carousel and causes the different items to repeat is in the js/carrusel.js file, it is as follows:
$('#myCarousel').carousel({
interval: 4000
});
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
The problem is that you are running the JavaScript code in the head before the items you are trying to manipulate that are in body have been loaded. In the JSFiddle it works for you without problems because you have put the code in the part of JS that runs OnLoad (when the page has already been loaded) and that's why the elements already exist and you do not have the problem.
To solve it, you have two options:
carrusel.js within a $(document).ready to run when the page has finished; or body (recommended practice because this way they will not interfere in the loading of the page) If you do the latter, the code will look like this and as you can see it works without problems (change the reference to carousel.js by its content directly):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codelco</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="navbar ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="color: black;"></span>
<span class="icon-bar" style="color: black;"></span>
<span class="icon-bar" style="color: black;"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/Codelco-Lab-Layout-1.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> Inicio</a></li>
<li><a href="#"> Convocatoria</a></li>
<li><a href="#"> Objetivos</a></li>
<li><a href="#"> Bases</a></li>
<li><a href="#"> Postulación</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>LLEVA AL MERCADO TU IDEA <br>
O PROYECTO BASADO EN COBRE, SUBPRODUCTOS Y LITIO</h1>
<p>Conéctate con expertos en investigación, desarrollo, negocios y más.<br>
Postula con tu proyecto no minero para dar solución y apertura a diferentes mercados.</p>
<a href="#" class="btn btn-info" role="button">Ver Bases</a>
<a href="#" class="btn btn-info" role="button" style="margin-left: 30px;">Postular Proyecto</a>
</div>
</div>
<div class="row" style="text-align: center; padding: 60px;">
<h1>Innovación y desarrollo</h1>
<p>Creemos que el mundo puede funcionar mejor gracias<br>
a las propiedades del cobre, sus subproductos (como el molibdeno) y otros minerales como el litio. </p>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h3>Bootstrap 3 Multiple Slide Carousel</h3>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></a>
</div>
</div>
</div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
<div class="row" style="background-color: gold; text-align: center; padding: 50px;">
<p>Codelco Lab te invita a potenciar y desarrollar proyectos vinculados a nuevos usos del cobre y molibdeno<br>
Conectamos las innovaciones y desarrollos tecnológicos con el mercado, a través de la vinculación entre la ciencia, el emprendimiento y la empresa.</p>
</div>
<div class="row" style="background-color: gold; text-align: center; padding: 60px;">
<div class="col-sm-4">
<img src="img/paris.jpg" class="img-circle" alt="Cinque Terre" width="80" height="80">
<p style="margin-top: 5px;">Exploración</p>
</div>
<div class="col-sm-4">
<img src="img/paris.jpg" class="img-circle" alt="Cinque Terre" width="80" height="80">
<p style="margin-top: 5px;">Gestión de Proyectos</p>
</div>
<div class="col-sm-4">
<img src="img/paris.jpg" class="img-circle" alt="Cinque Terre" width="80" height="80">
<p style="margin-top: 5px;">Crecimiento</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="http://codelcolab.feriapixel.cl/wp-content/uploads/2015/10/flux_os.png" alt="">
</div>
<div class="col-sm-6" style="padding-top: 90px;">
<h1>Somos una aceleradora,<br>
incubadora y consultora</h1>
<p>Nuestro modelo de ingresos<br>
es en base a acuerdos comerciales livianos<br>
con royalties asociados<br>
y opciones de compras en compañías</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Acelerar time to market</div>
<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Articulación con stakeholders relevantes</div>
<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Basado en acuerdos comerciales</div>
<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Activa relación con universidades y centros tecnológicos</div>
<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Desarrollo y crecimiento de compañías apalancándose con fondos de inversión</div>
<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Fuerte confinanciamiento con instrumentos públicos y privados</div>
</div>
<div class="row" style="background-color: black; color: #fff; text-align: center; padding: 50px;" >
<h1>CODELCO LAB</h1>
<p>conecta innovación y desarrollos tecnológicos para llevaros al mercado.</p>
</div>
<div class="row" >
<div class="col-sm-4" style="background-color: green; text-align: center; padding-top: 250px; padding-bottom: 60px;"><h2 style="color: #fff; border: 2px solid;">VER BASES</h2></div>
<div class="col-sm-4" style="background-color: orange; text-align: center; padding-top: 250px; padding-bottom: 60px;"><h2 style="color: #fff; border: 2px solid;">DESCARGAR BASES</h2></div>
<div class="col-sm-4" style="background-color: yellow; text-align: center; padding-top: 250px; padding-bottom: 60px;"><h2 style="color: #fff; border: 2px solid;">POSTULAR PROYECTO</h2></div>
</div>
<div class="row" style="background-image: url('img/LOUSKYi.jpg'); padding-top: 80px; padding-bottom: 80px; color: #fff; position: relative;">
<div style="position: relative; left: 700px;"><h1 >Contacto</h1>
<p>Escríbenos a [email protected]</p>
<a href="#" class="btn btn-info" role="button">ENVIAR CORREO</a>
</div>
</div>
</div>
<script src="js/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="js/carrusel.js"></script>-->
<script>
$('#myCarousel').carousel({
interval: 4000
});
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>