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

  • Kyletiv7

    Kyletiv7

    28 Mayıs 2007
  • Sergio Lafuente Rubio

    Sergio Lafue

    11 Aralık 2008
  • whiteboy7thst

    whiteboy7ths

    1 Temmuz 2009