Üzerinde çalıştığım bir sitede Twitter Bootstrap Carousel eklentisi (http://furnitureroadshow.com/) çok temel bir uygulama var. Eğer herkes soluyor böylece Carousel eklentisi genişletilmiş olsaydı sadece merak ettim ve dışarı slayt geçiş kaybolur?

Bu noktada, mümkün değil önermek gibi görünüyor bu sorunu github.com #2050 (https://github.com/twitter/bootstrap/issues/2050) buldum. Sadece eğer mümkün olup olmadığını görmek istedim yapılmadı.

Evet. Aşağıdaki kodu kullanıyorum ancak.

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

Bundan sonra bandın üzerine sınıf değiştirme """". carousel carousel fade slayt Bu safari, chrome, firefox ve IE 10'da çalışır. Doğru sürüm düşürme 9, ancak IE, güzel yüz etkisi olmaz.

Edit: bu cevap bu kadar popüler oldu bu Yana daha AZ olan: yukarıdaki yerine saf CSS olarak yazılmış olan aşağıdaki ekledim

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