Carrusel en Bootstrap no se muestra correctamente

publicado por: Anonymous

Estoy tratando de mostrar el siguiente carrusel en mi sitio web:

http://fiddle.jshell.net/JohnHalsey/abmtmjyz/

Pero en vez de aparecerme en varias columnas, sólo me aparece la primera columna pegada a la izquierda y nada más.

Carrusel no carga bien

He aquí el código de mi página donde está el slider:

https://github.com/ashcrimson/codelco/blob/master/index.html

solución

Si el código que activa el carrusel y que hace que se repitan los diferentes items está en el archivo js/carrusel.js y es el siguiente:

$('#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));
    }
});

el problema es que estás ejecutando el código JavaScript en el head antes de que se hayan cargado los elementos que intenta manipular que están en el body. En el JSFiddle te funciona sin problemas porque has puesto el código en la parte de JS que se ejecuta OnLoad (cuando la página ya se ha cargado) y por eso los elementos ya existen y no tienes el problema.

Para solucionarlo, tienes dos opciones:

  1. Encapsula el contenido de carrusel.js dentro de un $(document).ready para que se ejecute cuando la página haya terminado; o bien
  2. Mueve la carga de los archivos JS al final del documento, justo antes del cierre del body (práctica recomendada porque así no interferirán en la carga de la página)

Si haces lo segundo, el código se verá así y como puedes ver funciona sin problemas (cambie la referencia a carrusel.js por su contenido directamente):

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
	<meta charset="UTF-8">_x000D_
	<title>Codelco</title>_x000D_
	  <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
	  <link rel="stylesheet" href="css/style.css">_x000D_
	  _x000D_
</head>_x000D_
<body>_x000D_
	<header>_x000D_
	<nav class="navbar ">_x000D_
  <div class="container">_x000D_
    <div class="navbar-header">_x000D_
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">_x000D_
        <span class="icon-bar" style="color: black;"></span>_x000D_
        <span class="icon-bar" style="color: black;"></span>_x000D_
        <span class="icon-bar" style="color: black;"></span>_x000D_
      </button>_x000D_
      <a class="navbar-brand" href="#"><img src="img/Codelco-Lab-Layout-1.png" alt=""></a>_x000D_
    </div>_x000D_
    <div class="collapse navbar-collapse" id="myNavbar">_x000D_
     _x000D_
      <ul class="nav navbar-nav navbar-right">_x000D_
        <li><a href="#"> Inicio</a></li>_x000D_
      <li><a href="#"> Convocatoria</a></li>_x000D_
      <li><a href="#"> Objetivos</a></li>_x000D_
      <li><a href="#"> Bases</a></li>_x000D_
      <li><a href="#"> Postulación</a></li>_x000D_
      </ul>_x000D_
    </div>_x000D_
  </div>_x000D_
</nav>_x000D_
_x000D_
	</header>_x000D_
	<div class="container">_x000D_
	<div class="row">_x000D_
		<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>_x000D_
		  <!-- 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  -->_x000D_
		<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">_x000D_
		<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">_x000D_
		</video>_x000D_
		<div id="polina">_x000D_
			<h1>LLEVA AL MERCADO TU IDEA <br>_x000D_
			O PROYECTO BASADO EN COBRE, SUBPRODUCTOS Y LITIO</h1>_x000D_
			_x000D_
			<p>Conéctate con expertos en investigación, desarrollo, negocios y más.<br>_x000D_
			Postula con tu proyecto no minero para dar solución y apertura a diferentes mercados.</p>_x000D_
			<a href="#" class="btn btn-info" role="button">Ver Bases</a>_x000D_
			<a href="#" class="btn btn-info" role="button" style="margin-left: 30px;">Postular Proyecto</a>_x000D_
		</div>_x000D_
	</div>_x000D_
	<div class="row" style="text-align: center; padding: 60px;">_x000D_
		<h1>Innovación y desarrollo</h1>_x000D_
		<p>Creemos que el mundo puede funcionar mejor gracias<br>_x000D_
		a las propiedades del cobre, sus subproductos (como el molibdeno) y otros minerales como el litio. </p>_x000D_
	</div>_x000D_
<div class="row">_x000D_
	<div class="col-md-12 text-center">_x000D_
    <h3>Bootstrap 3 Multiple Slide Carousel</h3>_x000D_
</div>_x000D_
<div class="col-md-6 col-md-offset-3">_x000D_
    <div class="carousel slide" id="myCarousel">_x000D_
        <div class="carousel-inner">_x000D_
            <div class="item active">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="item">_x000D_
                <div class="col-xs-2"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>_x000D_
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>_x000D_
_x000D_
    </div>_x000D_
</div>_x000D_
</div>_x000D_
	<div class="row" style="background-color: gold; text-align: center; padding: 50px;">_x000D_
		<p>Codelco Lab te invita a potenciar y desarrollar proyectos vinculados a nuevos usos del cobre y molibdeno<br>_x000D_
		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>_x000D_
	</div>_x000D_
	<div class="row" style="background-color: gold; text-align: center; padding: 60px;">_x000D_
		<div class="col-sm-4">_x000D_
			<img src="img/paris.jpg" class="img-circle" alt="Cinque Terre" width="80" height="80">_x000D_
			<p style="margin-top: 5px;">Exploración</p>_x000D_
		</div>_x000D_
		<div class="col-sm-4">_x000D_
			<img src="img/paris.jpg" class="img-circle" alt="Cinque Terre" width="80" height="80">_x000D_
			<p style="margin-top: 5px;">Gestión de Proyectos</p>_x000D_
		</div>_x000D_
		<div class="col-sm-4">_x000D_
			<img src="img/paris.jpg" class="img-circle" alt="Cinque Terre" width="80" height="80">_x000D_
			<p style="margin-top: 5px;">Crecimiento</p>_x000D_
		</div>_x000D_
	</div>_x000D_
	<div class="row">_x000D_
		<div class="col-sm-6">_x000D_
			<img src="http://codelcolab.feriapixel.cl/wp-content/uploads/2015/10/flux_os.png" alt="">_x000D_
		</div>_x000D_
		<div class="col-sm-6" style="padding-top: 90px;">_x000D_
			<h1>Somos una aceleradora,<br>_x000D_
			incubadora y consultora</h1>_x000D_
			<p>Nuestro modelo de ingresos<br>_x000D_
			es en base a acuerdos comerciales livianos<br>_x000D_
			con royalties asociados<br>_x000D_
			y opciones de compras en compañías</p>_x000D_
		</div>_x000D_
	</div>_x000D_
	<div class="row" style="text-align: center;">_x000D_
		<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Acelerar time to market</div>_x000D_
		<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Articulación con stakeholders relevantes</div>_x000D_
		<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Basado en acuerdos comerciales</div>_x000D_
		<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Activa relación con universidades y centros tecnológicos</div>_x000D_
		<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>_x000D_
		<div class="col-sm-4" style="padding: 50px;"><span class="glyphicon glyphicon-glass"></span> Fuerte confinanciamiento con instrumentos públicos y privados</div>_x000D_
	</div>_x000D_
	<div class="row" style="background-color: black; color: #fff; text-align: center; padding: 50px;" >_x000D_
		<h1>CODELCO LAB</h1>_x000D_
		<p>conecta innovación y desarrollos tecnológicos para llevaros al mercado.</p>_x000D_
	</div>_x000D_
	<div class="row" >_x000D_
		<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>_x000D_
		<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>_x000D_
		<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>_x000D_
	</div>_x000D_
	<div class="row" style="background-image: url('img/LOUSKYi.jpg'); padding-top: 80px; padding-bottom: 80px; color: #fff; position: relative;">_x000D_
		<div style="position: relative; left: 700px;"><h1 >Contacto</h1>_x000D_
		<p>Escríbenos a [email protected]</p>_x000D_
		&nbsp;_x000D_
		<a href="#" class="btn btn-info" role="button">ENVIAR CORREO</a>_x000D_
		</div>_x000D_
		_x000D_
		_x000D_
	</div>_x000D_
	</div>_x000D_
  _x000D_
  <script src="js/video.js"></script>_x000D_
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
	  <!--<script src="js/carrusel.js"></script>-->_x000D_
  <script>_x000D_
    _x000D_
$('#myCarousel').carousel({_x000D_
    interval: 4000_x000D_
});_x000D_
_x000D_
$('.carousel .item').each(function () {_x000D_
    var next = $(this).next();_x000D_
    if (!next.length) {_x000D_
        next = $(this).siblings(':first');_x000D_
    }_x000D_
    next.children(':first-child').clone().appendTo($(this));_x000D_
_x000D_
    for (var i = 0; i < 4; i++) {_x000D_
        next = next.next();_x000D_
        if (!next.length) {_x000D_
            next = $(this).siblings(':first');_x000D_
        }_x000D_
_x000D_
        next.children(':first-child').clone().appendTo($(this));_x000D_
    }_x000D_
});_x000D_
    </script>_x000D_
  _x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *