Bootstrap carousel slide with fading + sliding

Question

我已經在自舉旋轉木馬上掙扎了幾天，它應該像默認旋轉木馬一樣向左/向右滑動，但是增加了褪色（新物品在進入時慢慢變得不透明，前一個項目在移出時慢慢失去不透明度），我已經嘗試了很多變種，但其中一些在Firefox中不起作用，其他一些在歌劇等方面都失敗了。

這是HTML：

<section>
    <div class="container">
        <h2>Some title</h2>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
                <p>Some text</p>
                <div class="ingo col-sm-8 col-sm-offset-2">
                    <div id="pubCarousel" class="carousel slide" data-ride="carousel">

                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
                                <h3 class="name longn">Carousel text</h3>
                            </div>

                            <div class="item">
                                <img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
                                <h3 class="name">Carousel text</h3>
                            </div>
                        </div>

                        <div class="pub-counter">
                            <p class="counter-line"></p>
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev">
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next">
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

這是我的旋轉木馬設置不起作用（我知道它現在很糟糕，我嘗試了10個解決方案，但它無論如何都不起作用），其余的輪播是默認的：

.ingo .carousel-inner>.item {
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out;
    transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active {
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out;
    transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel .item {
    opacity:0;
}
.ingo .carousel .carousel-inner .active {
  opacity: 1;
}
.ingo .carousel .carousel-inner .next,
.ingo .carousel .carousel-inner .prev
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
  left: 0;
  opacity: 0;
}
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
  opacity: 1;
}

我沒有使用任何JS修改。 我希望這個答案不會復制一些已發布的問題，我找不到解決方案。

感謝所有幫助人員，非常感謝。

Answer 1

sitepoint上的本教程應該可以幫到你： http ： //www.sitepoint.com/bootstrap-carousel-with-css3-animations/

Animate.css是一個非常好的CSS3庫，我在很多項目中都使用它來“加強思考”。

Answer 2

在經歷了很多努力之后，我終於設法獲得了幻燈片+淡入淡出效果，我也發現了這個Stackoverflow話題，Twitter Bootstrap Carousel插件可以在幻燈片轉換時淡入淡出 ，但任何發布的解決方案都不適用於每個瀏覽器 - 尤其是Firefox很麻煩。 所以有一個解決方案。 希望這有助於某人。

.ingo .carousel .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;
}
.ingo .carousel .carousel-inner .item,
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
    opacity: 0 !important;
}
.ingo .carousel .carousel-inner .active,
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
    opacity: 1 !important;
}
.#pubCarousel.carousel .carousel-control {
    z-index: 2 !important;
}

Answer 3

試試這一個，並檢查示例代碼HERE

 .carousel-caption{ padding-bottom:100px; } .rw-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #f65a3a; font-weight:400 !important; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #0d9b56; } .rw-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #f65a3a; } .rw-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color:#0d9b56; } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } .rw-words{ display: inline; text-indent: 10px; } .agileits-banner-info span { color: #fff; font-size: 28px; letter-spacing: 3px; font-weight: 700; text-align: left !important; } .agileits_w3layouts_more a { font-size: 1.1em; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; background:#0d9b56; padding: .7em 2em; display: inline-block; margin-top: 40px; border-radius:2px; } .agileits_w3layouts_more a:focus{ outline:none; } .agileits_w3layouts_more a:hover{ background:#f65a3a; } .agileits_w3layouts_more.menu__item { text-align: center; } .carousel-fade .carousel-inner .item { opacity: 0; 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; } /* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." now override the 3.3 new styles for modern browsers & apply opacity */ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4500"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://www.script-tutorials.com/demos/284/images/pic1.jpg" alt="Los Angeles" style="width:100%;"> <div class="carousel-caption"> <div class="agileits-banner-info bannertext-desktop"> <span>A Powerful But Simple Way to Manage Your </span> <div class="rw-words rw-words-1"> <span>Company</span> <span> People</span> <span>Happiness</span> <span>Wonder</span> </div> <div class="agileits_w3layouts_more menu__item"> <a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a> </div> </div> </div> </div> <div class="item"> <img src="http://www.script-tutorials.com/demos/284/images/pic2.jpg" alt="Chicago" style="width:100%;"> <div class="carousel-caption"> <div class="agileits-banner-info bannertext-desktop"> <span>A Powerful But Simple Way to Manage Your </span> <div class="rw-words rw-words-1"> <span>Company</span> <span> People</span> <span>Happiness</span> <span>Wonder</span> </div> <div class="agileits_w3layouts_more menu__item"> <a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a> </div> </div> </div> </div> <div class="item"> <img src="http://www.script-tutorials.com/demos/284/images/pic3.jpg" alt="New York" style="width:100%;"> <div class="carousel-caption"> <div class="agileits-banner-info bannertext-desktop"> <span>A Powerful But Simple Way to Manage Your </span> <div class="rw-words rw-words-1"> <span>Company</span> <span> People</span> <span>Happiness</span> <span>Wonder</span> </div> <div class="agileits_w3layouts_more menu__item"> <a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a> </div> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>