Prosty slider

Znalezienie prostego (czyli nie wymagającego includowania tony pluginów do jQuery i pisania konfigu na kiladziesiąt linii) slidera w HTML proste nie jest. Dlatego napisałem własny - sflider (od oryginalnego projektu - SFlIder - SFI slider).

Istnieje co prawda opcja oparcia takowego na samym CSS3 i jego atrybucie animation (np. https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/), ale dodanie potem sterowania (poprzedni/następny) jest niemożliwe w wygodny sposób (-> https://css-tricks.com/controlling-css-animations-transitions-javascript/) - prosto spauzujemy i wznowimy animację (swoją drogą jak zwykle “kompatybilnie” potrzeba nam dwóch reguł - jednej zwykłej i drugiej z -webkit-* ), po przyłożeniu się obliczmy aktualny slajd (ale przejścia są kolejnymi klatkami animacji więc można spauzować w połowie przejścia), a po trudnej pracy zmodyfikujemy klatki animacji żeby jakoś na nią wpłynąć. Najlepiej przerzucić się na jQuery który w swoim zestawie funkcji animate wykorzystuje CSSowy silnik animacji i jest konfigurowalny.

W projekcie sflider wykorzystałem kilka wartych wspomnienia rozwiązań:

• Chcąc osiągnąć pauzowanie przejść animacji po najechaniu myszką bez resetowania odliczania (żeby nie wystąpił efekt że po każdym wyjechaniu myszą ze slajdera czas do następnego przejścia zawsze wynosił przykładowo 5 sekund) a jednocześnie resetowanie odliczania po ręcznej nawigacji (żeby po kliknięciu “wstecz” w czwartej z pięciu sekund odstępu i opuszczeniu slidera nie stracić aktualnego widoku z oczu) wykorzystałem fakt iż setTimeout zwraca handle do timera (podobnie jak setInterval ), który można podstawić do zmiennej, a następnie zniszczyć funkcją clearTimeout .
  Zastosowana logika jest następująca: stworzenie slidera powołuje pierwszy setTimeout, funkcja przezeń wołana chainowo tworzy kolejny i tak w kółko - efekt podobny do emulowania setInterval. Ale inna funkcja może ten licznik zresetować bez większych problemów.
• Własna implementacja dzielenia modulo bo JavaScript wariuje na liczbach ujemnych (a to ci niespodzianka).
• Budowa slidera jest następująca: duży div zawiera mniejsze o tej samej wysokości (display: inline-block; )co rodzic ale o szerokości ekranu (position: relative; width: 100%; ) -wtedy rodzic ma szerokość n100% (n - ilość slajdów). Zmiana widoku odbywa się poprzez zmianę parametru offsetu left - może być zwykłą animacją, może być zapewne na jakieś inne sprytne sposoby. Ważna uwaga - wielkość fontu diva rodzica musi być ustawiona na zero - inaczej białe znaki (np. łamanie linii + taby) które HTML zawsze zwinie do jednej spacji utworzą nieoverridowalny margines między divami (inline-block!) który spowoduje że mimo układu: n divów po 100% w divie szerokości n100% ostatni nie zmienści się w wierszu. Jeśli używamy np. bootstrapa lub jakkolwiek overridujemy styl fonta divów ze slajdami to nie musimy nic robić, jednak w przeciwnym wypadku trzeba wymusić czcionkę bo zdziedzicy się ona do zerowej.
• Automagia polega na przerzuceniu liczenia szerokości divów slajdów względem rodzica na javascript - jest to zbyt skomplikowanie dla CSS na ten moment.

Kod źródłowy: https://github.com/danielskowronski/sflider

Demo: /wp-content/uploads/2016/09/sflider-demo/01_simple.html