Problemowa karuzela obrazka owinięta

Question

Karuzela nie ładnie się owija.

Jeśli kliknę w prawo, ostatni obraz, który się pojawi będzie pierwszy. Następnie muszę kliknąć jeszcze cztery razy, w którym to momencie obraz będzie znajdował się po lewej stronie karuzeli. Po prawej stronie nie są wyświetlane żadne obrazy. A potem nagle wszystkie pojawiają się naraz. Dzieje się tak, gdy zaczyna się karuzela.

będę oczekiwać, że "Przejście 2" rama miałaby "img # 2" po prawej stronie, i tak dalej.

Próbowałem

• obracając odjeżdżać lub na
• obracając nieskończoność odjeżdżać lub na
• błahy z ustawieniem slidesToShow oraz zwiększenie może pomóc autoodtwarzanie, ale ponieważ mam zmienną szerokość obrazy i responsywna konstrukcja, to ustawienie pokaże tylko niewielką ilość zdjęć na mniejszych ekranach
• to najnowsze Chrome i FF

mam slick.js 1.5.8 korzystania z następującymi ustawieniami:

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

z następującymi HTML (Plama karuzela jest w Bootstrap 3 pojemnika):

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

używam zawiera pliki CSS tematu, ale zostały dodane następujące

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

Answer 1

nie jestem zaznajomiony z śliskiego karuzeli, ale chciałbym zaproponować usunięcie tyle niewiadomych, jak to możliwe poprzez stworzenie zręczna karuzela bez żadnego bootstrapu lub niestandardowych niestandardowych CSS. Jeśli uważasz, że karuzela działa zgodnie z przeznaczeniem bez bootstrap/custom css, to wiesz, że niektóre CSS koliduje ze zręcznością. W przeciwnym razie coś musi być nie tak z twoją zgrabną konfiguracją.

Jestem pewien, że przejrzałem wszystkie opcje konfiguracyjne zręczny ma ... http://kenwheeler.github.io/slick/

Ponadto, wydaje się, że zręczny ma kilka świetnych zastosowań, ale miałem wiele sukcesów za pomocą karuzela typu bootstrap. Może warto spróbować, jeśli slick się nie sprawdzi.

Answer 2

slick ma ustawienie slidesToShow, które domyślnie wynosi 1. Chcesz zmienić to ustawienie na "3". Sprawdź „kilka pozycji” ustawienie tutaj: http://kenwheeler.github.io/slick/ który ma ten kod:

$('.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 
});