2013-10-07 76 views
14

ブートストラップ3カルーセルのスライド効果をフェードイン/フェードアウトに変更しようとしていました。私はBootstrap3カルーセルの遷移でスライドアニメーションをフェードイン/アウトに変更するにはどうすればいいですか?

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

私の例のリンクは、このpagragraphのの末尾にある以下のCSSコードは(リンクで言った)され、ここでCan the Twitter Bootstrap Carousel plugin fade in and out on slide transition

の指示に従って、私はそれを作っていますが、問題は、以前のですボタンが完全に動作していない、ソリューションがbootstrap2に最適であるかもしれない、私はbootstrap3を使用しています、誰も私を助けることができますか?アドバイスあなたの助けをありがとう。私はここに新しいです、私の貧しい英語のために非常に残念と私は愚かな質問をした場合!

https://dl.dropboxusercontent.com/u/35758776/xenxbd/contrastic/index.html#parallux-wrapper-04

+0

.prevクラスの不透明度も変更する必要があるようです。例:http://bootply.com/86170 – ZimSystem

+0

ありがとう、私は今それを得た。しかし、私はあなたに親指を与えることはできません、理由を知らない! –

答えて

30

このカルーセルフェード例を試してみてください。それは、前と次のボタンの不透明度を変更する方法を示します。

.carousel-fade .carousel-inner .item { 
    opacity: 0; 
    -webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -o-transition-property: opacity; 
    transition-property: opacity; 
} 
.carousel-fade .carousel-inner .active { 
    opacity: 1; 
} 
.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right { 
    left: 0; 
    opacity: 0; 
    z-index: 1; 
} 
.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right { 
    opacity: 1; 
} 
.carousel-fade .carousel-control { 
    z-index: 2; 
} 

http://bootply.com/86170

0

はあなたのカルーセルにクラス ".carouselフェード" を追加します。 css:

.carousel-fade .active.left { 
     left:0; 
     opacity:0; 
     -webkit-transition: opacity 1s; /*time < to $.carousel.interval setup */ 
     -moz-transition: opacity 1s; 
     -ms-transition: opacity1s; 
     -o-transition: opacity 1s; 
     transition: opacity 1s; 
     z-index:2; 

} 

.carousel-fade .next { 

    left:0; 
    opacity:1; 
    z-index:1; 

} 
関連する問題