multiple - carousel jquery

¿Puede el plugin Twitter Bootstrap Carousel desvanecerse en la transición de diapositivas?

Question

Tengo una implementación muy básica del complemento Twitter Bootstrap Carousel en un sitio en el que estoy trabajando ( http://furnitureroadshow.com/ ). Me preguntaba si alguien extendió el complemento de carrusel para que se desvanezca y desaparezca en la transición de diapositivas.

Encontré este número # 2050 en github.com ( https://github.com/twitter/bootstrap/issues/2050 ) que parece sugerir que en este punto, no es posible. Solo quería ver si se podía o se hizo.

Answer 1

Esta es la mejor solución que encontré:

http://untame.net/2013/04/twitter-bootstrap-carousel/

Answer 2

Me encontré con este problema cuando usé Bootstrap 3. Mi solución fue agregar la clase de carousel-fade al DIV principal del carrusel y colocar el siguiente CSS, en algún lugar después de incluir Bootstrap CSS:

.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;
}

Las transiciones de estilo que aplica Bootstrap significan que debe tener las transiciones de paso medio (activo a la izquierda, a la izquierda) rápidamente; de ​​lo contrario, el ítem simplemente termina desapareciendo (de ahí el tiempo de transición de 1/2 segundo).

No he experimentado con el ajuste de los tiempos de transición de .item y .left , pero es probable que necesiten un ajuste proporcional para que el efecto se vea agradable.

Answer 3

Nota: Si está utilizando Bootstrap + AngularJS + UI Bootstrap, las clases .left .right y .next nunca se agregan. Usando el ejemplo en el siguiente enlace y el CSS de Robert McKee, la respuesta funciona. Quise hacer un comentario porque tardó 3 días en encontrar una solución completa. Espero que esto ayude a otros!

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

Recorte de código de UI 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 UI Bootstrap, aviso Agregué la clase .fade al 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 la respuesta de Robert McKee arriba

.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;
}

Answer 4

Para Bootstrap 3.3.6. - Cualquier respuesta publicada anteriormente no me ayudó para todos los navegadores (especialmente experimenté muchos problemas en Firefox). Espero que esto ayude a alguien.

Simplemente agregue clase-carrusel-fade como este:

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">

y agrega este código a tu css:

.carousel-fade .carousel-inner .item {
    -webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    -moz-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    -ms-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    -o-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    transition: all 1.1s ease-in-out, opacity 1s ease-in;
}
 .carousel-fade .carousel-inner .item,
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner .active.right {
     opacity: 0 !important;
 }
 .carousel-fade .carousel-inner .active,
 .carousel-fade .carousel-inner .next.left,
 .carousel-fade .carousel-inner .prev.right {
     opacity: 1 !important;
 }
 .carousel-fade .carousel-control {
     z-index: 2 !important;
 }

Answer 5

Sí. Aunque 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, cambie la clase en el carrusel de "carrusel deslizante" a "carrusel fundido". Esto funciona en Safari, Chrome, Firefox e IE 10. Se degradará correctamente en IE 9, sin embargo, el efecto agradable de la cara no sucede.

Editar: Dado que esta respuesta se ha vuelto tan popular, he agregado lo siguiente, reescrito como CSS puro en lugar de lo anterior, que era 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;
}

Answer 6

Sí. Bootstrap usa transiciones CSS para que pueda hacerse fácilmente sin ningún Javascript. Solo usa CSS3. Por favor, eche un vistazo a

carousel.carousel-fade

en el CSS de los siguientes ejemplos:

• http://jsfiddle.net/seemly/ww67B/123/
• http://bootply.com/86170
• http://codepen.io/Rowno/pen/Afykb

Answer 7

Sí. Bootstrap usa transiciones CSS para que pueda hacerse fácilmente sin ningún 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;}

Sin embargo, noté que el evento final de transición se estaba disparando prematuramente con el intervalo predeterminado de 5s y una transición gradual de 3s. Alterar el intervalo del carrusel a 8s proporciona un efecto agradable.

Muy suave.

Answer 8

Si está utilizando Bootstrap 3.3.x, utilice este código (debe agregar el nombre de 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;
}