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

  • EminemVEVO

    EminemVEVO

    12 Mayıs 2009
  • Matthew Pearce

    Matthew Pear

    9 AĞUSTOS 2009
  • SaMmM123

    SaMmM123

    3 Mayıs 2006