Me parece que estoy teniendo un arranque de Carrusel problema único para las otras versiones/revisiones publicadas. Esto es extraño.

En primer lugar, el sitio web que contiene el error: nastassiafreeman.com

Segundo, el error de la consola:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
    at c.slide (https://www.nastassiafreeman.com/js/bootstrap.min.js:6:6890)
    at c.next (https://www.nastassiafreeman.com/js/bootstrap.min.js:6:6128)
    at e (https://www.nastassiafreeman.com/js/jquery.js:2:3957)

Tercero, cómo el error está provocado:

Al hacer clic en una imagen, un modal/carrusel aparece que permite la navegación. Cuando haga clic en la flecha, el error está provocado y que no puede continuar a la siguiente imagen.

Hecho extraño:

Cuando actualice la página y vuelve a intentarlo, funciona.

Mi html es establecer hasta donde tengo solo 1 vacío carrusel y muchas imágenes, aviso, el carrusel está vacía:

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">



    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

mi archivo js, a continuación, busca un evento click, y rellena el carrusel con imágenes basadas en lo que se ha hecho clic:

  if($(this).attr('id') == 'fall_A'){
    $('.item').remove();
    $( '.carousel-inner' ).append('<div class="item active"><img id="img1" src="img/fall_A1.png" alt="..."><div class="carousel-caption"></div></div>');
    $('.item').after('<div class="item"><img id="img2" src="img/fall_A2.png" alt="..."><div class="carousel-caption"></div></div>');
    $('.item').last().after('<div class="item"><img id="img3" src="img/fall_A3.png" alt="..."><div class="carousel-caption"></div></div>');
  }
  else if($(this).attr('id') == 'fall_B'){
    $('.item').remove();
    $( '.carousel-inner' ).append('<div class="item active"><img id="img1" src="img/fall_B1.png" alt="..."><div class="carousel-caption"></div></div>');
    $('.item').after('<div class="item"><img id="img2" src="img/fall_B2.png" alt="..."><div class="carousel-caption"></div></div>');
    $('.item').last().after('<div class="item"><img id="img3" src="img/fall_B3.png" alt="..."><div class="carousel-caption"></div></div>');
  }

y así sucesivamente…

Me han asegurado que el primer carrusel elemento está activo, el cual fue la solución a algunos otros puestos similares. Lo que realmente me confunde es que funciona de manera intermitente. He pensado trabajar con otro código abierto carrusel, pero ahora mi deseo de entender me tiene trabajando en este problema más que el deseo de ver fija.

Los pensamientos?

  • Usted js es la ejecución después de la ventana de carga?
  • Puedes probar a utilizar bootstrap.js en lugar de bootstrap.min.js para crear secuencias de comandos más legible mientras que usted está buscando la solución.
  • sí, la ventana de carga. Me han resuelto este problema mediante la implementación de un diseño diferente por completo. También he resuelto a nunca usar Bootstrap de nuevo si me pueden ayudar a ello.
InformationsquelleAutor NFD | 2016-12-05

2 Comentarios

  1. 5

    1. Quitar el data-ride="carousel" el atributo de la corrección de error de JS

    La documentación explica:

    La data-ride="carousel" atributo es utilizado para marcar un carrusel como la animación de inicio en la página de carga de

    Pero su carrusel todavía está vacío cuando se carga la página. La secuencia de comandos no puede encontrar los elementos para la animación y se produce un error.

    Por lo tanto, quitar este atributo y ejecutar el carrusel después de añadir algo en su interior.

    2. Por favor revisar mi código. Es lo que quiere lograr?

    http://codepen.io/glebkema/pen/LbmPoX

    JS:

    var selectCarousel = $('#carousel-1');
    var selectInner = selectCarousel.find('.carousel-inner');
    
    $('#btn-1').click( function() {
      selectInner.children('.item').remove();
      selectInner.append('<div class="item active"><img src="//placehold.it/900x300/c69/f9c/?text=1" alt=""></div>');
      selectInner.append('<div class="item"><img src="//placehold.it/900x300/9c6/cf9/?text=2" alt=""></div>');
      selectInner.append('<div class="item"><img src="//placehold.it/900x300/69c/9cf/?text=3" alt=""></div>');
      selectCarousel.carousel();
    })
    
    $('#btn-2').click( function() {
      selectInner.children('.item').remove();
      selectInner.append('<div class="item active"><img src="//placehold.it/900x300/c69/f9c/?text=4" alt=""></div>');
      selectInner.append('<div class="item"><img src="//placehold.it/900x300/9c6/cf9/?text=5" alt=""></div>');
      selectInner.append('<div class="item"><img src="//placehold.it/900x300/69c/9cf/?text=6" alt=""></div>');
      selectCarousel.carousel();
    })

    CSS:

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    
    .btn {
      margin: 15px;
    }
    .carousel-inner img {
      width: 100%;
    }

    HTML:

    <div class="container">
      <button id="btn-1" type="button" class="btn btn-primary btn-lg">Items form 1 to 3</button>
      <button id="btn-2" type="button" class="btn btn-primary btn-lg">Items form 4 to 6</button>
     
      <div id="carousel-1" class="carousel slide">
        <div class="carousel-inner" role="listbox">
        </div>
        <a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
        <a href="#carousel-1" class="right carousel-control" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
      </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    • yo no veo ninguna imagen de carga en su codepen pero sí, esto era lo que yo buscaba en general. Me han resuelto un diseño diferente en la final, pero la necesidad de llenar un carrusel con imágenes en haga clic en es probable que una práctica común para los desarrolladores y una buena solución sería útil.
    • He utilizado los marcadores de posición en lugar de la imagen real de los archivos. Haga clic en los botones para ver cómo los dos conjuntos de elementos de cambiar al otro. También, he añadido en la respuesta a la explicación del error de JS, que encontró.
  2. 0

    Ejecutar en el mismo problema similar con dos carruseles en una página.

    He recibido de error con carousel.js:

    No se puede leer la propiedad ‘intervalo’ null’

    a la derecha después de pasar a una segunda. Después de inspeccionar el plugin que he descubierto el error causado por el fragmento de código dentro de

    if (this._config.pause === 'hover') {
    ...
    }

    (como resultó hover es el valor predeterminado y, en mi caso es indeseable) que me lleva a la solución.

    Así que sólo tenemos que establecer pause a false al inicializar el carrusel con el plugin de llamadas de método

    $(car1).carousel('dispose')
    $(car2).carousel({interval: false, ride: false, pause: false})

    Desde entonces no he visto ningún error.

Dejar respuesta

Please enter your comment!
Please enter your name here