Jak zacząć pisanie slider JavaScript od podstaw?

0

Witam

Potrzebuje napisać sldier JS od podstaw tylko zastanawiam się w jaki sposób zacząć, jak rozplanować to wszystko ;) Szukałem trochę w dokumentacji JS ale w sumie to nie wiem od czego zacząć. Czy ktoż może mi pomóc?

0

Na przykład:

tablica ze ścieżkami do plików i funkcja, która co X ms inkrementuje (i ustawia na 0 żeby nie wyjść poza) indexer, a następnie ustawia obrazek slidera na tab[index]

0

A powiedz proszę - dlaczego chcesz to pisać od podstaw, zamiast skorzystać z jakiegoś gotowego (i sprawdzonego) rozwiązania?

Robisz to w ramach nauki, czy z jakiegoś powodu nie możesz skorzystać z gotowa?
Przecież skryptów z sliderami/lightbox'ami jest pełno w sieci. Są one bardzo różne i konfigurowalne - więc na pewno byś znalazł coś dla siebie.

0

Otwórz sobie ten kod: https://github.com/ruyadorno/simple-slider/blob/master/dist/simpleslider.js i zacznij czytać. Slider inicjalizuje się tak:

simpleslider.getSlider({
    container: document.getElementById('myslider'),
    transitionTime:1,
    delay:3.5
});

więc musisz zacząć czytać od linii 55

0

to da się napisać na kilkanaście linijek kodu JS (HTML/CSS sprawia większe problemy).

w jaki sposób zacząć, jak rozplanować to wszystko ;)

Jeśli chodzi o rozplanowanie, to prędzej właśnie HTML/CSS należy się martwić a nie JavaScriptem (pamiętam jak kiedyś coś mi nie wychodziło z zakodowaniem HTML/CSS i w końcu zrobiłem slider na Canvas, bo tak mi było łatwiej).

A JS to po prostu masz listę obrazków (albo listę elementów HTML, whatever, jakąś listę), masz to ponumerowane jakoś i po prostu dodajesz albo odejmujesz 1 i potem odpalasz jakąś animację. Plus dzielenie modulo do tego, żeby po ostatnim slajdzie włączał się poprzedni (czyli coś w stylu index = (index + 1) % count - z tym, że pamiętam, że chyba jeszcze dodawałem count na wstępie, bo przy wartościach ujemnych przy przechodzeniu wstecz mi się coś nie zgadzało.

Pod kątem programistycznym to jest mniej więcej poziom fizz buzz, a przynajmniej w podobny sposób można to rozwiązać (dzielenie z resztą).

Szukałem trochę w dokumentacji JS ale w sumie to nie wiem od czego zacząć.

Od kartki papieru i rozrysowania sobie tego, w jaki sposób slajdy mają lecieć, czyli od rozkminy. Dokumentacja nie ma tu nic do rzeczy, bo jeśli chodz o JS to jest to problem bardziej algorytmiczny niż techniczny.

Jednak myślę, że trudniejsze może być zakodowanie w HTML/CSS (tzn. może żeby zrobić proof of concept to nie trzeba wiele, ale jeśli chcesz zrobić coś, co ma ładnie wyglądać, i ma mieć super animacje, to może być problem już).

A powiedz proszę - dlaczego chcesz to pisać od podstaw, zamiast skorzystać z jakiegoś gotowego (i sprawdzonego) rozwiązania?

Ja pamiętam sytuację, kiedy gotowe rozwiązania nie spełniały kooosmicznych założeń graficzki, że taka ma być animacja, a nie taka i tak dalej, więc musiałem od zera robić, żeby było dokładnie tak, jak na designie. Było trudno, ale i tak łatwiej niż dostosowanie gotowca.

0

A jeśli chodzi o slider z paginacją to jak taki efekt uzyskać?

1 użytkowników online, w tym zalogowanych: 0, gości: 1