Slider CSS + javascript

Question

Cześć forumowicze,

dawno mnie tu nie było i wracam z pytaniem, ponieważ nie mogę sobie poradzić z jednym zagadnieniem.

 

Jak zapewne z tytułu się domyślacie wykonuję slider. Polega on na tym, że mam div'a o nazwie "slider", a w nim 6 zdjęć <img>. Kiedy strona się załaduje w JS uruchamiam Interval który zmienia położenie slidera o 10 px w lewo z każdą iteracją. Dzięki CSS 5.0 wszystko wygląda płynnie, niestety problem pojawia się na końcu, gdy wszystkie zdjęcia już przelecą, a slider nadal się przesuwa.

Nie mam za bardzo jak tego pokazać, gdyż wszystko robię na razie bez udziału serwera, jednak mam nadzieję że wiecie o co chodzi.

 

Myśląc o problemie wymyśliłem następujące rozwiązania:

a) zatrzymać Interval przy ostatnim zdjęciu

b) zacząć przesuwać slider w drugą stronę. 

Niestety z doświadczenia wiem że w IT nie ma rzeczy nie możliwych, a wszystko ogranicza się do naszej kreatywności, a więc chciałbym by slider powtarzał się w nieskończoność. Tak więc by po ostatnim zdjęciu pierwsze "płynęło" jak by była to nieskończona pętla tych 6 zdjęć. 

 

Ktoś ma jakiś pomysł?

Answer 1

no to po stronie JS musisz zaprogramowac jakas funkcje next() i w niej sprawdzac czy current == 6, jesli tak to wracaj do 1

mozesz zrobic jakas pomocnicza pseudo klase gdzie albo podasz ID diva wewnatrz ktorego masz obrazki, albo przekazesz arraya z lista obrazkow

popatrz jak zrobili to w bootstrapie - jest open source

Comments

Tylko że slider wygląda tak, on się po prostu przesuwa, nie ma wartości na której jest obecnie.

Answer 2

Wrzuć kod na codepen, bo ciężko wywnioskować co tam porobiłeś.

Comments

https://codepen.io/anon/pen/yXdRoo  :)

---

Sry za brak zdjęć chodzi po prostu o samą ideę.

---

Parę uwag co do kodu.

Nie używaj onload tylko addEventListener. https://forum.pasja-informatyki.pl

Do stylowania używaj klas nie ID https://forum.pasja-informatyki.pl

Linia 8 slider.style.Width -  width małą literą

Jeżeli chcesz aby przy ostatnim zdjęciu cofał.

Dodaj do JS warunek, po którym górny prawy róg ostatniego zdjęcia znajdzie się po prawej stronie ekranu i zastosuj pętlę z sliderPossition -= 5. Podobnie gdy pierwsze zdjęcie znajdzie się przy lewej stronie tylko z sliderPossition += 5. Przy takim rozwiązaniu nie będziesz miał "dziur" po pierwszym i ostatnim zdjęciu.

Jeżeli chcesz aby slider obracał się w dookoła:

Używasz diva slider jako kontenera do zdjęć, a później go przesuwasz. Tu jest problem, bo gdy końcówka slidera będzie wychodziła poza ekran po lewej stronie, to powinien pojawić się początek po prawej stronie.Div slider nie może być w dwóch miejscach naraz.
Lepszym rozwiązaniem jest traktowanie każdego zdjęcia osobno. Gdy pierwsze zdjęcie znajdzie się poza ekranem po lewej stronie, ląduje na końcu kolejki po prawej stronie.

Można to zrobić nadając klasę dla obrazka, który wyszedł poza ekran poprzez JS np. flex order lub klasę z nowymi współrzędnymi położenia.