web-dev-qa-db-ja.com

Twitter Bootstrap Carouselプラグインは、スライド移行時にフェードインおよびフェードアウトできますか

作業中のサイトにTwitter Bootstrap Carouselプラグインの非常に基本的な実装があります（ http://furnitureroadshow.com/ ）。誰かがCarouselプラグインを拡張して、スライド遷移でフェードインおよびフェードアウトするようにしたのではないかと思っていましたか？

Github.com（ https://github.com/Twitter/bootstrap/issues/205 ）でこの問題＃2050を見つけました。それができたか、行われたかを見たかっただけです。

jquerytwitter-bootstrapcarousel
67
generalopinion

はい。 BootstrapはCSSトランジションを使用するため、Javascriptなしで簡単に実行できます。

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

しかし、デフォルトの間隔5秒とフェード遷移3秒で、遷移終了イベントが時期尚早に発生していることに気付きました。カルーセル間隔を8秒にバンプすると、素晴らしい効果が得られます。

とてもなめらか。

127
StrangeElement

はい。私は次のコードを使用しますが。

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

次に、カルーセルのクラスを「カルーセルスライド」から「カルーセルフェード」に変更します。これは、safari、chrome、firefox、およびIE 10で機能します。IE 9で正しくダウングレードされますが、Niceフェイスエフェクトは発生しません。

編集：この答えはとても人気があったので、上記のLESSではなく、純粋なCSSとして書き直した次のものを追加しました：

.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;
}
75
Robert McKee

はい。 BootstrapはCSSトランジションを使用するため、Javascriptなしで簡単に実行できます。 CSS3を使用してください。ご覧ください

carousel.carousel-fade

次の例のCSS：

19
Jens A. Koch

これは私が見つけた最高のソリューションです：

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

11
Mike Stumpf

Bootstrap 3.を使用すると、この問題に遭遇しました。私の解決策は、カルーセルメインDIVにcarousel-fadeクラスを追加し、次のCSSをどこかにafter the 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;
}

Bootstrapが適用されるスタイルトランジションは、ミッドストライドトランジション（アクティブな左、次の左）をすばやく持たなければならないことを意味します。そうしないと、アイテムが消えてしまいます（したがって、トランジション時間が1/2秒になります）。

.itemおよび.leftの遷移時間を調整することを試したことがありませんが、効果をナイスに見せるには、おそらく比例して調整する必要があります。

4
Raad

Bootstrap 3.3.xを使用している場合は、このコードを使用します（カルーセルにクラス名carousel-fadeを追加する必要があります）。

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

注：Bootstrap + AngularJS + UI Bootstrapを使用している場合、.left .rightおよび.nextクラスは追加されません。次のリンクの例を使用して、Robert McKeeの回答のCSSが機能します。完全な解決策を見つけるのに3日かかったのでコメントしたかった。これが他の人に役立つことを願っています！

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

上記のリンクのUI Bootstrap Demoからのコードスニペット。

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 From UI Bootstrap、Notice.fadeクラスを例に追加しました。

<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>

上記のRobert McKeeの回答からのCSS

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

Bootstrapの場合3.3.6。 -上記の回答は、すべてのブラウザーで役に立ちませんでした（特にFirefoxで多くの問題が発生しました）。これが誰かを助けることを願っています。

次のようにクラスカルーセルフェードを追加するだけです。

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

このコードを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;
 }
0
D8tectx