SORU
2 Mart 2012, Cuma


Twitter Carousel eklentisi ve slayt geçiş üzerinde semboller Bootstrap olabilir

Ü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ı.

CEVAP
6 Mart 2013, ÇARŞAMBA


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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BruBearBaby

    BruBearBaby

    25 Ocak 2011
  • FattySpins's channel

    FattySpins's

    17 Mayıs 2009
  • Google Россия

    Google Ро

    9 Temmuz 2007