• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Slider CSS + javascript

VPS Starter Arubacloud
0 głosów
946 wizyt
pytanie zadane 19 lipca 2017 w JavaScript przez Łukasz Wasilewski Mądrala (5,190 p.)

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ł?

2 odpowiedzi

0 głosów
odpowiedź 19 lipca 2017 przez kosaa Stary wyjadacz (14,130 p.)
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
komentarz 19 lipca 2017 przez Łukasz Wasilewski Mądrala (5,190 p.)

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

0 głosów
odpowiedź 19 lipca 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)
Wrzuć kod na codepen, bo ciężko wywnioskować co tam porobiłeś.
komentarz 19 lipca 2017 przez Łukasz Wasilewski Mądrala (5,190 p.)
komentarz 19 lipca 2017 przez Łukasz Wasilewski Mądrala (5,190 p.)
Sry za brak zdjęć chodzi po prostu o samą ideę.
1
komentarz 21 lipca 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)

Parę uwag co do kodu.

Nie używaj onload tylko addEventListenerhttps://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. 

 

Podobne pytania

+2 głosów
1 odpowiedź 238 wizyt
0 głosów
0 odpowiedzi 124 wizyt
pytanie zadane 10 października 2019 w HTML i CSS przez livinsky Nowicjusz (230 p.)
0 głosów
1 odpowiedź 251 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...