Estoy tratando de agregar diapositivas a Bootstrap carrusel con jQuery pero no está actuando como un regulador en el navegador. En su lugar, se muestran las imágenes en la vista de lista.

<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
    onload=function(){

        for(var m=3;m>=0;m--)
        {
            var path="file_uploads/"+m+".jpg";
            $(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=\""+m+"\"></li>");
            $(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");             
        }

        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
        $('.carousel').carousel();
    }
</script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
    <ol class="carousel-indicators">

    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">       

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</body>
</html> 
InformationsquelleAutor idrisjafer | 2014-06-12

3 Comentarios

  1. 35

    Primero, voy a confiar en el hecho de que m es una matriz con la url adecuada a sus imágenes.

    El HTML debe ser como este:

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators"></ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner"></div>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

    Clase carrusel interior está vacío, no hay donde vas a colocar tus imágenes para luego carrusel.

    Clase carrusel-indicatiors también está vacía, serán llenadas por JS.

    Luego, viene la JS:
    (como ya he dicho, Estoy confiando en el hecho de que m es una matriz de imgs url)

    $(document).ready(function(){  
      for(var i=0 ; i< m.length ; i++) {
        $('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
        $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')
    
      }
      $('.item').first().addClass('active');
      $('.carousel-indicators > li').first().addClass('active');
      $('#carousel-example-generic').carousel();
    });

    Básicamente, anexar todas tus imágenes a la clase carrusel-interior, agregar el carrusel de control de li, a continuación, agregar la clase activa a la primera imagen y a la primera carrusel indicador de li., y por último, puede inicializar su carrusel. Tenga en cuenta que todo esto está dentro de un documento listo función, que es lo que te falta. Lo que se hace es definir una función llamada onload

    Espero que ayude !

    EDIT: he visto que está saliendo también de la etiqueta alt de las imágenes, pero eso es algo que no tiene que estar en mi respuesta, yo apuesto a que usted puede hacer sin problemas.

  2. 0

    Bien, Bootstrap Carrusel tiene varios parámetros para el control.

    es decir,

    Intervalo: Especifica el retardo (en milisegundos) entre cada diapositiva.

    pausa: Detiene el carrusel de ir a través de la siguiente diapositiva cuando el puntero del ratón entra en el carrusel, y se reanuda el deslizamiento cuando el puntero del ratón sale del carrusel.

    envoltura: Especifica si el carrusel debe ir a través de todas las diapositivas de forma continua, o parar en la última diapositiva

    Para su referencia:

    Agregar diapositivas a Bootstrap 3 carrusel de forma dinámica usando jQuery

    Para obtener más detalles por favor haga clic aquí…

    Espero que esto le ayudará 🙂

    Nota: esto es por la ayuda.. quiero decir, ¿cómo puede usted personalizar o cambiar el comportamiento por defecto una vez carrusel está cargado.

  3. 0

    Puede dar a este un intento.

    Marcado

    <div id="carousel-deck" class="carousel slide" data-ride="carousel"
        data-interval="false" data-wrap="false">
        <ol class="carousel-indicators">
        </ol>
        <div class="carousel-inner">
        </div>
        <a class="left carousel-control" href="#carousel-deck"
            data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span><span
                class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-deck"
            data-slide="next"><span
                class="glyphicon glyphicon-chevron-right"></span><span
                class="sr-only">Next</span>
        </a>
    </div>

    JS

    var markup = '';
    for (var index = 0; index < count; index++) {
        markup += '<li data-target="#carousel-deck" data-slide-to="' + index + '"></li>';
    }
    $('#carousel-deck .carousel-indicators').html(markup);
    markup = '';
    for (var index = 0; index < count; index++) {
        markup += '<div class="item">';
        markup += '<img src="/images/uploads/' + file.uuid + '/slides/slide_' + (index + 1) + '.jpg" style="width:100%;">'
        markup += '</div>';
    }
    $('#carousel-deck .carousel-inner').html(markup);
    $('#carousel-deck .item').first().addClass('active');
    $('#carousel-deck .carousel-indicators > li').first().addClass('active');
    $('#carousel-deck').carousel({
        pause: true,
        interval: false
    });

Dejar respuesta

Please enter your comment!
Please enter your name here