Estoy tratando de implementar el twitter bootstrap carrusel, y no funciona – no cambiar las imágenes de forma automática, Y los botones anterior/siguiente no funcionan.

He intentado cambiar a jquery 1.7.1 como se sugiere en Bootstrap Carrusel No De Forma Automática Corredera y Bootstrap Carrusel No funciona, pero nada parece ayudar.

Cualquier idea se agradece.

<!DOCTYPE html>
<html>
    <head>
        <title>Slideshow Test</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide" style="width:450px">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active"><img src="img/IMG_2.jpg"></div>                
                <div class="item"><img src="img/IMG_3.jpg"></div>
                <div class="item"><img src="img/IMG_1.jpg"></div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>    
    </body>
</html>

Usted puede ver sus archivos vinculados en www.abbymilberg.com/bootstrap.

InformationsquelleAutor | 2012-09-23

7 Comentarios

  1. 9

    Debe incluir bootstrap.js después de incluir jquery.js:

    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    • También, bootstrap-transition.js debe venir antes que otros Bootstrap plugins (pero aún después de jQuery, como Daniil correctamente identificados).
    • Gracias! Que se fija – eres el mejor!
    • Gracias Daniil!!! Tu respuesta me ha ayudado mucho!
    • encantado de ayudar 🙂
  2. 15

    Tuve el mismo problema, incluso .js en el propper orden, y me fijo usando javascript en ‘onclick’ evento de la siguiente manera:

    <a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="$('#myCarousel').carousel('prev')"></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="$('#myCarousel').carousel('next')"></a>

    Sé que no es la solución más limpia, pero funciona.

    • Si usted tiene este problema, asegúrese de que el atributo href en los botones prev/next se refiere a la correcta IDENTIFICACIÓN. Debe ser el número de identificación (jquery notación). Debería haber ninguna necesidad de agregar onclick.
    • Mismo problema aquí. Voy por el onclick sucio arreglar pero si por casualidad usted a saber por qué no funcionó yo estaría encantado de oír hablar de ella.
    • También puede agregar return false como este onclick=»$(‘#carouselInner’).carrusel («siguiente»); return false;»
    • Mismo aquí en bs4
  3. 2

    Intente cerrar «carrusel-interior» antes de que los controles de inicio de

    <div id="myCarousel" class="carousel slide" style="width:450px">
        <div class="carousel-inner">
            <div class="item active"><img src="img/IMG_2.jpg"></div>                
            <div class="item"><img src="img/IMG_3.jpg"></div>
            <div class="item"><img src="img/IMG_1.jpg"></div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    
    </div>
    • Esto es debido a que OP incluye jquery después de bootstrap. Esto no va a ayudar a
    • También trabajó para estos chicos twitter.github.com/bootstrap/javascript.html#carousel
    • Pero no va a resolver OP problema.
    • A su derecha, lo intenté.
    • Esto es debido a que bootstrap tratando de usar jQuery antes de jQuery está disponible para su uso.
    • Gracias, entiendo. Realmente pensé que era ese div, aunque.
    • Poner jquery antes de bootstrap solucionado mi problema original, pero después de que hice que todavía no era el bucle correctamente después de ir a través de todas mis diapositivas. Siguiendo esta sugerencia solucionado ese problema, así que gracias!

  4. 2

    Yo tenía el mismo problema y lo he solucionado añadiendo z-index de css:

    .carousel-control.left, .carousel-control.right {
      left: 0;
      z-index: 1;
    }
    • Esto me ayudó ya que yo estaba usando un hack para cambiar el .carousel-caption‘s z-index, así que tuve que cambiar también el z-index de los controles así que aparecían en la parte superior de la leyenda.
  5. 2
    <div class="left carousel-control" data-target="#myCarousel" data-slide="prev"/>
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous</span>
    </div>
    <div class="right carousel-control" data-target="#myCarousel" data-slide="next"/>
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next</span>
    </div>
    • Hacer una clase a su botón y poner los datos de objetivo comprobar en mi código, gracias:)
    • echa un vistazo a mi código funciona de inmediato
  6. 1

    Más a la respuesta por user2139170, esta es la forma correcta de estructurar el carrusel (BootStrap 3.3.5):

    jsFiddle Ejemplo

    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
                <br>
                <span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
            </div>
            <div class="item">
                <h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
                <br>
                <span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
            </div>
        </div>
    
        <a href="" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a href="" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- #myCarousel -->
    
    <script>
        $(function(){
    
            $('.carousel-control').click(function(e){
                e.preventDefault();
                $('#myCarousel').carousel( $(this).data() );
            });
    
        });//END document.ready
    </script>

    Nota: esta respuesta requiere de jQuery, así que asegúrese de que la biblioteca se carga. Por supuesto, bootstrap requiere de jQuery así que usted debe tener ya que hace referencia.

  7. 0

    Yo tenía los mismos síntomas, pero mi problema era que yo no lo incluye un id a mi carrusel. Añadir un id en el mismo div que tiene el .carousel clase, y el uso de href="#my-carousel" en el botón/enlaces resuelto el problema, para mí, como sugerido por otros usuarios en los comentarios.

    <div id="my-carousel" class="carousel slide" style="width:450px">
                ^----------------------------------v
        <a class="carousel-control left" href="#my-carousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#my-carousel" data-slide="next">&rsaquo;</a>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here