Quiero usar bootstrap carrusel junto con angular js para mostrar imágenes en carrusel de contenido.
Pero, cuando la navegación en los enlaces, se muestra la página en blanco.

Mi ejemplo de código es como sigue. (Nota : Este código sólo funciona bien con Bootstrap 3.1.0 pero no junto con AngularJS 1.2.13)

<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/c.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/b.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/a.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
  • ¿recuerde incluir jquery antes de bootstrap.js?
  • Sí. He añadido antes de bootstrap.js.
  • puede agregar un jsfiddle o plnkr a la demo de este problema?
  • El siguiente enlace es mi demo. plnkr.co/editar/IVw6tSxi0VjhT2ppnaDZ?p=vista previa Fuente : he utilizado el código de demostración desde el enlace scotch.io/tutoriales/javascript/… & modificado
  • realmente están pidiendo mucho creo que cuando tienes que saltar a través de aros como este sólo para el uso de Bootstrap componente que SÓLO FUNCIONA en todas partes.
InformationsquelleAutor Rakesh | 2014-02-20

9 Comentarios

  1. 69

    Construyendo sobre lo que rbanning dijo, en lugar de agregar el controlador de eventos usted puede simplemente, después de la colocación de las etiquetas de anclaje con las etiquetas span, reemplazar el atributo href con un «data-target» atributo y bootstrap se encarga del resto.

    Así:

    <div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/c.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/b.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/a.png" class="img-responsive">
        </div>
    </div>
    <span class="left carousel-control" data-target="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </span>
    <span class="right carousel-control" data-target="#Carousel" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </span>
    </div>
    • no trabajo para mí, como yo estoy llamando a la función $(‘#carrusel’).carrusel («siguiente»); mientras que golpear la próxima por favor ayuda
    • Se está trabajando para, PERO creo que se le olvidó el ‘ # » en <li> datos de destino de la propiedad.
    • Gracias! funciona como un encanto
  2. 11

    Como se ha mencionado, el problema es con AngularJS y ngRoute interceptar un enlace clics. He tenido este problema pero no lo queremos usar Angular de la interfaz de usuario de Arranque (como se describe en otras respuestas).

    Así, he cambiado el .carrusel-elementos de control de enlaces (un etiquetas) a abarca.

    <span class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </span>
    <span class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </span>

    Entonces, he añadido un controlador de eventos de la siguiente manera…

      $('.carousel').carousel({
                    interval: 5000,
                    pause: "hover",
                    wrap: true
                })
                .on('click', '.carousel-control', handle_nav);
    
      var handle_nav = function(e) {
            e.preventDefault();
            var nav = $(this);
            nav.parents('.carousel').carousel(nav.data('slide'));
      }

    Espero que esto ayude…

    • gran trabajo, me ha ayudado y he estado tratando de arreglar esto durante horas!
    • me ayudó! Muchas gracias!
    • No trabajo para mí, no sé cómo se está trabajando para chicos u,
  3. 6

    Conjunto target="_self" en su carrusel de controles:

    <a class="left carousel-control" href="#Carousel" data-slide="prev" target="_self">
  4. 5

    Si usted no necesita obligar a su carrusel, se pueden resolver mediante la adición de un elemento de nivel superior con ng-non-bindable directiva:

    <div ng-non-bindable>
        <div id="Carousel" class="carousel slide">
            <!-- carousel content -->
        </div>
    </div>
  5. 4

    Usted también puede utilizar ng-haga clic en los controles.

    Estoy usando esto en mi sitio (nota href="" está en blanco ahora)

    A la vista:

        <a class="left carousel-control" href="" ng-click="slide('prev')" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" ng-click="slide('next')" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>

    De controlador:

    $scope.slide = function (dir) {
        $('#carouselId').carousel(dir);
    };
    • Este ejemplo es más probable que funcione en versiones recientes de angular y bootstrap. He probado con la versión 1.4.9 y 3.3.6, respectivamente.
  6. 0

    ¿Por qué no usar Angular de la interfaz de usuario para obtener Bootstrap y Angular para jugar bien a lo largo de ?

    http://angular-ui.github.io/bootstrap/#/carousel

    EDICIÓN:

    El código no está trabajando porque en los enlaces de navegación que han href conjunto de atributos en #Carrusel. Así que cuando usted haga clic en los enlaces Angular router intentará cambiar de vista y para mostrar el llamado Carrusel de la cual no está definido en su $routeProvider por lo tanto la página en blanco.

    Ya que usted está utilizando Bootstrap.js parece que es absolutamente necesario que estos atributos href así que tal vez deshacerse de el router. O darle una oportunidad a Angular de la interfaz de usuario 😉

    • Usted puede simplemente visitar la demo enlace mencionado anteriormente & me ayuda en solucionar el problema?
    • He utilizado Angular de la interfaz de usuario para solucionar este problema. Pero parece ser que no funcionan todavía. Aquí está el plunkerDemo
    • Yo sólo veo un <accordion> elemento en su contacto con la vista, pensé que te quería un carrusel?
    • Yo estaba buscando todos los archivos de inicio de elementos tales como el carrusel/acordeón/etc trabajo con angular js. Ahora tengo este trabajo. plunkerLink
    • Ok genial ! He añadido un <carousel> en la página acerca de la integridad del bien (ver plunker), no más problemas?
    • si eres bueno, puedes aceptar una respuesta 😉

  7. 0

    Esto funciona, sin modificar el original bootstrap ejemplo

    $("a.carousel-control").click(function(e){
        e.preventDefault();
        $(this).parent().carousel($(this).data("slide"));
    });
  8. 0

    Usted puede hacer la función y el lugar que en prev/next flecha en html.

    $scope.prevSlide = function() {
        $('#MY-CAROUSEL-ID').carousel('prev');
    };
    • Hola he creado una función, pero no es trabajo
    • Que deben trabajar, por favor revise su carrusel de id…

Dejar respuesta

Please enter your comment!
Please enter your name here