Sorunlu görüntü atlıkarınca sarmalı

Question

Atlıkarınca güzelce sarılmıyor.

Sağ tıklamaya devam edersem, gösterilecek son resim ilk olanı olacaktır. Daha sonra dört kez daha tıklamak zorundayım, bu noktada bu görüntü karuselin hemen solunda olacak. Sağ tarafta görüntü yok. Sonra aniden hepsi bir anda ortaya çıkıyor. Bu, karusel baştan başladığında olur.

ben "Geçiş 2" çerçeve böylece sağ taraftaki "Img 2." var ve olacağını beklersiniz.

Ben kapalı ya

o yardımcı olabilir artan kapalı ya slidesToShow ayarı ile işe yaramaz

ayarı sonsuz dönüm ve ayarını autoplay dönüm

• çalıştı, ancak ettik ben değişken genişliğe sahip beri görüntüler ve bir duyarlı tasarım, bu ayar
• en son Chrome'da ve FF

küçük ekranlarında görüntülerin sadece küçük bir miktar gösterecektir

aşağıdaki ayarlarla slick.js 1.5.8 kullanıyorum: Aşağıdaki HTML ile

$("#myslick").slick({ 
    autoplay: true, 
    variableWidth: true 
    }); 

(kaygan atlıkarınca bir Bootstrap 3 kap içinde):

<div class="container"> 
    <div id="myslick"> 
     a few <img> tags with variable dimensions 
    </div> 
</div> 

kullandığım CSS tema dosyalarını dahil, ancak aşağıdaki

.slick-slide { 
    height: 100px; 
    margin: 0 15px; 
} 

Answer 1

Ben kaygan atlıkarınca aşina değilim eklemiş ama oluşturarak mümkün olduğunca fazla bilinmeyen çıkarmadan öneririm herhangi bir bootstrap veya ekstra özel CSS içermeyen kaygan atlıkarınca. Eğer bootstrap/custom css olmadan planlandığı gibi çalışan karuseli bulursanız, bazı CSS'nin slick ile çakıştığını bilirsiniz. Aksi halde, slick kurulumunuzda bir şeyler yanlış olmalıdır.

Ben de http://kenwheeler.github.io/slick/

... Eğer kaygan sahip olduğu tüm yapılandırma seçenekleri inceledim eminim kaygan bazı büyük kullanımları vardır gibi görünüyor, ama ben kullanarak çok başarılı oldu bootstrap carousel. Kaygan çalışmazsa denemeye değer.

Answer 2

slick varsayılan olarak 1 olan bir slidesToShow ayarına sahiptir. Bu ayarı "3" olarak değiştirmek istiyorsunuz. Bu kodu vardır http://kenwheeler.github.io/slick/: "Birden Öğeler" Burada ayarını kontrol edin

$('.multiple-items').slick({ 
infinite: true,  // Keep on looping 
slidesToShow: 3, // Number of slides to show at one time 
slidesToScroll: 3 // Number of slides to scroll per click 
});