2013-08-22 19 views
11

4 sürgü oluşturdum. Başlangıçta tüm 4 gizli (ekran: yok) bu yüzden ilgili kodun ilgili kategorisini tıklatarak görüntülemek için bu kodu kullandım.BxSlider son sürgü ilk slayt olarak gösteriliyor

Kaydırıcı yapılandırması. sürgüsü ilk sürgünün geçen slaytın slaytlar sayısını ters az 20 slaytlar sahip olduğunda

touchEnabled: true, 
    hideControlOnEnd: true, 
    preloadImages: 'all', 
    infiniteLoop: false, 
    mode: 'horizontal', 
    startSlide: 0, 
    slideWidth: 300, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 10, 
    pager: false, 
    slideSelector: ".isotope-item", 
    nextSelector: "#forefoo2_next", 
    prevSelector: "#forefoo2_prev", 
    nextText: '', 
    prevText: '', 
    onSliderLoad: function(){ 
     jQuery(".sliloading").hide(); 
    }, 


jQuery(window).ready(function(){ 
    var slider4 = jQuery('.cat_fore').bxSlider(); 
    var slider2 = jQuery('#cat_two').bxSlider(); 
    var slider3 = jQuery('.cat_three').bxSlider(); 
    var slider1 = jQuery('.cat_one').bxSlider(); 

    jQuery("#sel_cat a").on("click", function(){ 
     var current  = jQuery(this).attr("slider"); 
     jQuery(".sliloading").show(); 

     jQuery(".slider").hide(); 
     if(current == "cat_one"){ 
      slider1.reloadSlider(s1config); 
     }else if(current == "cat_two"){ 
      slider2.reloadSlider(s2config); 
     }else if(current == "cat_three"){ 
      slider3.reloadSlider(s3config); 
     }else if(current == "cat_fore"){ 
      slider4.reloadSlider(s4config); 
     } 
    } 
}); 

sorundur.

20 veya daha fazla slayt için 20 çalışır. Ayrıca this link listelenen farklı çözümler denedim ama benim için hiçbir şey çalıştı.
hangi iyi çalışıyor ama live üzerinde hala

Sorun yüksekliği veya son slayttan başlamak yapıyor diğer bazı css elemanı olduğunu düşünüyorum aynı sorun veriyor fiddle üzerinde aynı örneği çoğaltmak için çalıştı kemanda görünüm portu küçük olduğundan kaydırıcıyı ilk kaydıracaktır ve aynı zamanda çiş tarayıcının görünüm portunun boyutunu azaltmaya çalıştığı zaman, aynı zamanda kaydırıcıyı da doğru şekilde gösterir.

cevap

14

Ben de sadece son zamanlarda bu sorunu yaşıyordu. Çözüm, BxSlider örneğini $ (window) .load() olayı $ (window) .ready() 'de değil, örnek olarak koymak zorundasınız.

$(window).load(function(){ 
      $('.bxslider').bxSlider({ 
       pagerCustom: '#bx-pager', 
       randomStart: false, 
       controls: true, 
       auto: true 
      });  
     }); 

Size en az 7 slaytlar bir kez sorun devam başlar dikkat etmek önemlidir.

+2

Bu benim problemimi çözüyor :) çok teşekkür ederim. Mod 'yatay' olduğunda gerçekleşeceğini buldum. 'Fade' modunu değiştirmeye çalışıyorum ve gayet iyi çalışıyor (son slaydı göstermemek anlamına geliyor). – user1128331

+0

Bxslider belgelerinde .onReady kullanmanız gerektiğini ya da çalışmayacağını söylüyor. Sizinki çalışıyor, ancak bu geçici çözümün, dokümanın onlarla birlikte olmasını bekledikleri bir durumda değiştirmeleri durumunda dokümanlar ile uğraşmaktan kaçınmak isteyebilirsiniz. Bu sorunun çalışması için başka geçici çözümler/düzeltmeler var. –

+0

Ben 5 slayt var ve sorun oluyor, bu yüzden daha az 7 :( – Periback

0

Peki neden bilmiyorum ama bu satırı "minSlides: 2" kaldırdığımda doğru şekilde çalışmaya başlıyor.

8

Hızlı çözüm:

.bx-clone{ 
    display: none !important; 
} 

Eğer infiniteLoop animasyon kaybetmek istemiyorsanız:

onSliderLoad: function() { 
     $("YOUR_SLIDER_SELECTOR").css(
     "-webkit-transform", 
     "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)" 
    ); 
    } 
+0

Bu aslında bana yardımcı oldu! Ama eklemek zorundaydım! Önemli, çünkü bx kaydırıcı bu stili geçersiz kılan .bx-clone öğesine stil ekler. Teşekkürler! –

0
<li> 
    <img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/> 
</li> 

Kaydırıcıdaki resimlerdeki açık bir yükseklik ve genişlik etiketinin ayarlanması, 2-5 görüntü içeren sürgülerde bu sorunu benim için düzeltildi.

8

Bu, benim için yalnızca kromlu bir hatadır, ilk slayttan ilk geriye doğru kesintisiz kaydırma yapmak için tasarlanan "klon sürgüsü", ilk önce gerçek sürgüyü yoldan çekmeyi gösterir. Klon sürgüsünü gizlemek hızlı bir düzeltme ancak sonsuz kaydırma efekti kırıyor. Bu, aşağıdaki çözüm kesinlikle CSS ile benim için sabit

, hiçbir gnarly 3D ... CSS, JQuery, ya da bir şey dönüşümü

şimdi bootstrap ile Tamam oynar:

/* BUG FIX FOR CLONE SLIDE FIRST */ 

.bx-wrapper img { 
    max-width: 100%; 
    display: inline-block; 
} 

.bx-viewport li { 
    min-height: 1px; 
    min-width: 1px; 
} 

size jquery kullanarak eğer bence onSlide kullanarak klonu göster Çok önce gittiğinizden önce, özel durumunuza bağlı olarak muhtemelen bir CSS düzeltmesi vardır. Bazen BOOTSTRAP ile bir görüntü boyutu ve/veya görüntü stili sorunundan kaynaklanır, bu yüzden BS kullanıyorsanız, kesin bir CSS düzeltmesi vardır. Genel olarak, tüm slaytlarınız aynı boyuttaysa, resimler için yükseklik ve genişlik, maksimum yükseklik ve genişlik ve min yükseklik ve genişlik ayarlarını yapmayı deneyin ve düzeltin.

bu gerekli değildir, ama bu işe yaramazsa, bxSlider init seçenekleri useCSS deneyin: false, örn: OG Sean tarafından belirtildiği gibi

$(window).load(function(){ 
     $('.bxslider').bxSlider({ 
      pagerCustom: '#bx-pager', 
      randomStart: false, 
      controls: true, 
      auto: true 
      useCSS:false 
     });  
    }); 
+2

Teşekkürler! CSS sabitleme benim için çalışıyor! – Footniko

2

bir Chrome hatasına İt's. Sadece döngü durdurmak için gereken

.bx-viewport li { min-height: 1px; min-width: 1px; } 
3

:

Aynı sorun ve ben bu css kod oldu çalıştığımızda gerekli tek şey hade

infiniteLoop:false 

... ve orada artık .bx-klon

http://bxslider.com/options

+0

sonsuz döngü açık olması ve kaldırmak mümkün mü? bx-clones? – Ionut

+0

Bu sorunum giderildi, ancak sonsuz döngüye ihtiyaç duymadım, bu yüzden bir teklif anlaşması değil. – Mel

0

bxslider wa ile çalışma Hayatımın en büyük hatası.