Dzień Dobry,
Czy wie ktoś może, jak zrobić płynne przechodzenie już na ostatnie dziecko w liscie, aby już znajdowało się pierwsze dziecko listy.
A w nastepnym kroku z ostatniego do pierwszego i drugie było już widoczne.
Będę bardzo zobowiązany za każdą pomoc.
Link do mojego przykładu:
http://jsfiddle.net/8qk0v41j/
Pozdrawiam,
MiP
Najlepszą opcją jest niewynajdowanie koła od nowa i skorzystanie z istniejących rozwiązań. Może być?
dzek69 napisał(a):
Najlepszą opcją jest niewynajdowanie koła od nowa i skorzystanie z istniejących rozwiązań. Może być?
Nie, bo potrzebuję zrobić 3 różne slidery z różnymi animacjami( w sumie są już gotowe, tylko nie zabardzo wiem jak je zapętlić).
Słaby argument, ale ok.
Generalnie musisz powielić swoje elementy slidera przy inicjalizacji.
Jeżeli slajdów jest 5, to łącznie musi być ich 10 (czasem i 15 będzie potrzebne, zależy od tego co robisz)
Załóżmy, że wszystkie elementy zajmują łącznie 500px. Gdy przewijasz elementy musisz tak przeskakiwać pikselami, żeby nigdy nie zbliżyć się w 100% do granic 0 lub 1000 (jeżeli powieliłeś elementy raz). W tym konkretnym przypadku możesz sobie bazować w granicach 100-900. Gdy dojdziesz do 900 to zamiast przesuwać bardziej w prawo - skocz do 400 - ponieważ powielasz elementy - będzie widać dokładnie to samo co przy 900 - i przesuń dalej ile tam potrzebujesz. Podobnie w drugą stronę - zejdziesz poniżej 100 - przeskocz sobie do góry o 500.
Pooglądaj inne slidery jak działają, wtedy to najlepiej widać.
Zapewne znajdziesz w necie też tutoriale opisujące ten problem.
Wykonałem powyższe zadanie, mniej więcej zgodnie z Pana wskazówkami.
Wszystko działa dobrze, dopóki użytkownik wolna wciska przyciski. Natomiast gdy zacznie intensywnie naciskać jakis jeden klawisz to aplikacja sie wysypuję.
Ma Pan jakąś radę??
Kod przykładu:
http://jsfiddle.net/8qk0v41j/1/
Program działa poprawnie, gdy czas animacji wynosi 100ms. Natomiast przy wyżej prędkości, program się wykrzacza.
$('#horizontalSlider ul').animate({left: '-='+$("ul").children().eq(((currentChild == 0) ? (numerOfChildlenElements -1) : (currentChild - 1))).width() }, 100, 'linear', function (){});
daj .stop(true, true) przed .animate
Po dodaniu funkcji stop(), animacja działa jak wcześniej.
$('#horizontalSlider ul').stop(true, true).animate({left: '+='+$("ul").children().eq((currentChild)).width() }, 500, 'linear', function () {
Nie patrzyłem wcześniej na kod nawet ;) zrób tak:
http://jsfiddle.net/8qk0v41j/7/
Być może będziesz chciał to inaczej poprawić - poczytaj sobie o funkcji stop i przemyśl jak to dostosować do Twojego problemu
Takie, średnie rozwiązanie by zachować płynność animacji.
Ja zrobiłem sekundowe zablokowanie buttonu na sekundę animacji.