Tengo una implementación muy básica de la cuenta de Twitter Bootstrap Carrusel plugin en un sitio en el que estoy trabajando (http://furnitureroadshow.com/). Me estaba preguntando si alguien había extendido el Carrusel plugin para que se intensifique y se desvanece en transición de diapositiva?

He encontrado este problema #2050 en github.com (https://github.com/twitter/bootstrap/issues/2050) que parece sugerir que, en este punto, no es posible. Sólo quería ver si se podía o se ha hecho.

7 Comentarios

  1. 127

    Sí. Bootstrap utiliza las transiciones de la CSS por lo que se puede hacer fácilmente sin necesidad de Javascript.

    El CSS:

    .carousel .item { -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
    .carousel .active.left {left:0;opacity:0;z-index:2;}
    .carousel .next {left:0;opacity:1;z-index:1;}

    Me di cuenta sin embargo que la transición final del evento estaba disparando prematuramente con el intervalo predeterminado de 5s y una transición de fundido de 3s. Chocar la calesita intervalo de 8 proporciona un agradable efecto.

    Muy suave.

    • tenga en cuenta que el uso de la transición de css requiere CSS3 que sólo los navegadores modernos son compatibles
    • Bastante agradable la innovación, la ayuda a la promoción de CSS3 y «anima» a los usuarios con mal de los navegadores para actualizar. 🙂
    • Usted necesita agregar .carousel .active.right a cuenta para el movimiento de la otra manera a través de la galería, gracias por la dirección correcta.
    • Funciona, pero solo cuando se va al siguiente elemento… volver al elemento anterior, no tiene ningún tipo de cross-fade transición.
    • Si el carrusel no es completamente una imagen (es decir, que contiene el texto sin imagen de fondo) dar la .item un color de fondo, o la disuelva no es bastante suave.
  2. 75

    Sí.
    Aunque yo uso el siguiente código.

    .carousel.fade
    {
        opacity: 1;
    
        .item
        {
            -moz-transition: opacity ease-in-out .7s;
            -o-transition: opacity ease-in-out .7s;
            -webkit-transition: opacity ease-in-out .7s;
            transition: opacity ease-in-out .7s;
            left: 0 !important;
            opacity: 0;
            top:0;
            position:absolute;
            width: 100%;
            display:block !important;
            z-index:1;
            &:first-child{
                top:auto;
                position:relative;
            }
    
            &.active
            {
                opacity: 1;
                -moz-transition: opacity ease-in-out .7s;
                -o-transition: opacity ease-in-out .7s;
                -webkit-transition: opacity ease-in-out .7s;
                transition: opacity ease-in-out .7s;
                z-index:2;
            }
        }
    }

    A continuación, cambiar la clase en el carrusel de «carrusel de diapositivas» a «carrusel fade». Esto funciona en safari, chrome, firefox, e internet explorer 10. Se va a degradar correctamente en IE 9, sin embargo, la cara agradable efecto de que no suceda.

    Edit: Ya esta respuesta ha llegado a ser tan popular, he añadido la siguiente, que reescribe como puro CSS en lugar de la anterior que fue de MENOS:

    .carousel.fade {
      opacity: 1;
    }
    .carousel.fade .item {
      -moz-transition: opacity ease-in-out .7s;
      -o-transition: opacity ease-in-out .7s;
      -webkit-transition: opacity ease-in-out .7s;
      transition: opacity ease-in-out .7s;
      left: 0 !important;
      opacity: 0;
      top:0;
      position:absolute;
      width: 100%;
      display:block !important;
      z-index:1;
    }
    .carousel.fade .item:first-child {
      top:auto;
      position:relative;
    }
    .carousel.fade .item.active {
      opacity: 1;
      -moz-transition: opacity ease-in-out .7s;
      -o-transition: opacity ease-in-out .7s;
      -webkit-transition: opacity ease-in-out .7s;
      transition: opacity ease-in-out .7s;
      z-index:2;
    }
    • He probado un montón de otras respuestas que trabajaba para un montón de gente, pero por alguna razón, este es el único que trabajó para mí. Cuando tengo un momento, voy a tener que investigar…
    • Pero, esto perjudica la imagen de los títulos de las diapositivas; todas las imágenes no son display: none, así que el ratón siempre se cierne sobre la última .item, no importa que .item se muestra actualmente. CSS (>_<)
    • Por supuesto, puedo replicar la funcionalidad de la title atributo de forma manual, lo que acabo de hacer. Traté de configuración .item a display: none y .item.active a display: block, pero que impedía todo, pero la primera diapositiva de visualizar nunca.
    • He editado el anterior para agregar z-indexación que debe resolver su título en cuestión. Me he dado cuenta de que el código de inicio busca específicamente para la presentación de la clase cuando se trata de determinar que la diapositiva se muestra actualmente (La navegación de puntos). Aún funciona, pero el tiempo es un poco diferente para desvanecerse de la diapositiva. Los cambios de la navegación punto a la entrante, inmediatamente en vez de esperar a que el efecto de transición para terminar, que yo prefiero de todos modos. Solo que pensé que me gustaría señalar la singularidad en caso de errores de usted.
    • Nota: esto no se parece a CSS – es probablemente MENOS necesidades de la compilación.
    • Sí, es MENOS
    • MENOS porque Bootstrap es perfecto, esto funciona como un encanto. Había que añadir z-index = 2 &.a la derecha, &.de izquierda a hacer mi flechas de navegación de diapositivas (carrusel de control). Definitivamente la respuesta correcta.
    • si el uso de bootstrap mixin archivos también pueden usar .transition(.7s ease-in-out opacity);
    • Parece que funciona bien, pero se desvanece instaltly. Yo probé a cambiar el tiempo, pero no parece nada happends. El tiempo de fade es casi instantánea..y necesito algo más suave. Me pueden ayudar por favor?
    • Están realizando pruebas en IE 9?
    • No se desvanecen en Chrome – pivoture.com/best-practices/data-and-the-user-experience-part-1 (desplácese hacia abajo y ver a la derecha de la barra lateral ‘Qué hacemos’ elemento con paginado nav.
    • He cambiado .0s; para eliminar por ahora – antes de que esto se estaba convirtiendo en invisibles durante la transición.
    • No estoy seguro de lo que están viendo. He cambiado los estilos de volver a tener un 0,7 s de transición en su sitio, y fundidos cruzados en Chrome bien. Se ve igual en Firefox. Probado en Chrome 36, y Firefox 31.
    • Esto funciona muy bien con Bootstrap versión 3.3.4 carrusel. He copiado y pegado en mi plantilla HTML existente y funciona como un encanto. Agradezco mucho a @RobertMcKee. Usted no tiene idea de lo útil que era.
    • Que bueno saber que todavía funciona. Lo escribí para el Bootstrap 2.x línea.
    • Funciona de maravilla! Gracias!
    • Funciona a la perfección aquí, gracias……

  3. 19

    Sí. Bootstrap utiliza las transiciones de la CSS por lo que se puede hacer fácilmente sin necesidad de Javascript.
    Sólo el uso de CSS3. Por favor, echa un vistazo a

    carousel.carousel-fade

    en el CSS de los siguientes ejemplos:

    • Bootstrap 3 ejemplo: bootply.com/86170
    • Ejemplo mejor 🙂 codepen.io/Rowno/pen/Afykb
    • No te olvides de añadir «transform: none !importante;» a .clase de elemento de: .elemento { opacity: 0; transición de la propiedad: la opacidad; transform: none !importante; }
  4. 4

    Encontré con este problema cuando se utiliza Bootstrap 3.
    Mi solución fue añadir la carousel-fade clase para el carrusel principal DIV y la ranura de la siguiente CSS en, en algún lugar después de el Bootstrap CSS se incluye:

    .carousel-fade .item {
      opacity: 0;
      -webkit-transition: opacity 2s ease-in-out;
      -moz-transition: opacity 2s ease-in-out;
      -ms-transition: opacity 2s ease-in-out;
      -o-transition: opacity 2s ease-in-out;
      transition: opacity 2s ease-in-out;
      left: 0 !important;
    }
    
    .carousel-fade .active {
      opacity: 1 !important;
    }
    
    .carousel-fade .left {
      opacity: 0 !important;
      -webkit-transition: opacity 0.5s ease-in-out !important;
      -moz-transition: opacity 0.5s ease-in-out !important;
      -ms-transition: opacity 0.5s ease-in-out !important;
      -o-transition: opacity 0.5s ease-in-out !important;
      transition: opacity 0.5s ease-in-out !important;
    }
    
    .carousel-fade .carousel-control {
      opacity: 1 !important;
    }

    El estilo de transiciones que Bootstrap se aplica significa que usted tiene que tener mediados de la zancada transiciones (activo a la izquierda, la siguiente a la izquierda) de forma rápida, de lo contrario el producto, solo termina por desaparecer (de ahí el 1/2 segundo tiempo de transición).

    No he experimentado con el ajuste de la .item y .left tiempos de transición, pero que ellos probablemente necesitarán ajustar proporcionalmente para mantener el efecto de aspecto agradable.

  5. 2

    Si usted está usando Bootstrap 3.3.x, a continuación, utilizar este código
    (es necesario agregar el nombre de la clase carrusel-fade a su carrusel).

    .carousel-fade .carousel-inner .item {
      -webkit-transition-property: opacity;
              transition-property: opacity;
    }
    .carousel-fade .carousel-inner .item,
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
      opacity: 0;
    }
    .carousel-fade .carousel-inner .active,
    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
      opacity: 1;
    }
    .carousel-fade .carousel-inner .next,
    .carousel-fade .carousel-inner .prev,
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
      left: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-control {
      z-index: 2;
    }
    • Genial!!! Esto realmente … de imágenes en lugar de la eliminación de los inactivos uno y sólo de deslizamiento en la imagen activa. Pulgares para arriba!
  6. 0

    Nota: Si está utilizando Bootstrap + AngularJS + UI Bootstrap .a la izquierda .y derecho .el próximo clases nunca añadido. Utilizando el ejemplo en el siguiente enlace y de la CSS de Robert McKee respuesta obras. Yo quería hacer un comentario, porque llevaba 3 días para encontrar una solución completa. Espero que esto ayude a los demás!

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

    Recorte de código de interfaz de usuario Bootstrap Demo en el enlace de arriba.

    angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
      $scope.myInterval = 5000;
      var slides = $scope.slides = [];
      $scope.addSlide = function() {
        var newWidth = 600 + slides.length + 1;
        slides.push({
          image: 'http://placekitten.com/' + newWidth + '/300',
          text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
            ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
        });
      };
      for (var i=0; i<4; i++) {
        $scope.addSlide();
      }
    });

    Html De la interfaz de usuario de Bootstrap, Aviso he añadido el .fade clase para el ejemplo.

    <div ng-controller="CarouselDemoCtrl">
        <div style="height: 305px">
            <carousel class="fade" interval="myInterval">
              <slide ng-repeat="slide in slides" active="slide.active">
                <img ng-src="{{slide.image}}" style="margin:auto;">
                <div class="carousel-caption">
                  <h4>Slide {{$index}}</h4>
                  <p>{{slide.text}}</p>
                </div>
              </slide>
            </carousel>
        </div>
    </div>

    CSS de Robert McKee de la respuesta anterior

    .carousel.fade {
    opacity: 1;
    }
    .carousel.fade .item {
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    left: 0 !important;
    opacity: 0;
    top:0;
    position:absolute;
    width: 100%;
    display:block !important;
    z-index:1;
    }
    .carousel.fade .item:first-child {
    top:auto;
    position:relative;
    }
    .carousel.fade .item.active {
    opacity: 1;
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    z-index:2;
    }
    /*
    Added z-index to raise the left right controls to the top
    */
    .carousel-control {
    z-index:3;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here