2

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

0

1 respuesta 1

2

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):

<!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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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>
		&nbsp;
		<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>

1
  • 1
    Muchas gracias, puse el script al final del body y asunto arreglado. Qué fácil era. el 30 sep. 2016 a las 12:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.