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ść n*100% (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 n*100% 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: https://blog.dsinf.net/wp-content/uploads/2016/09/sflider-demo/01_simple.html

Skrypt, którego użyjemy to: http://davidjbradshaw.github.io/iframe-resizer/. Są trzy elementy: plik JS dla strony trzymającej iframe, plik JS dla każdej strony, która się pojawi wewnątrz iframe i wywołanie JavaScript na stronie z iframe. Działa wszędzie poza Operą Mobile (ale kogo to dziwi…) i WinPhone_IE10 (na WinPhone_IE11 nie wybucha i blokuje się na maksymalnych rozmiarach).

 
Strona „host”:

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<iframe id="nazwa" width="500px" scrolling="no" src="plik.html"></iframe>
<script src="https://raw2.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js"></script>
<script>$("#nazwa").iFrameResize({});</script>

L1: jQuery [opcjonalny – można ładować iFrameResize({}) przez natywny kod JS]
L2: docelowy iframe; zdefiniowanie na sztywno któregoś z wymiarów zablokuje jego zmiany
L3: skrypt iframeResizer.min.js
L4: podpięcie funkcji pod obiekt

 
Strona „gość”:

<script src="https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js"></script>
treść lalala-trolololo; lorem ipsum

L1: skrypt iframeResizer.contentWindow.min.js
L2+:treść

 
Oczywiście skrypty należy załadować na swój własny serwer żeby było porządniej. Porządna, ale przydługa jak na błyskawiczne rozwiązanie typu „wirtualny duct-tape” – http://davidjbradshaw.github.io/iframe-resizer/.

@font-face {
	font-family: "Andika";
	src: url("/andika-r-webfont.eot") !important;
	src: url("/andika-r-webfont.eot") format('embedded-opentype');
	src: url('/Andika-R.ttf') format('truetype') ;			
}

Kilka słów wyjaśnienia: EOT jest obsługiwany zdaje się tylko przez IE – zostanie załadowany najpierw, ale nie wiem czemu bez !important czcionka nie jest ładowana – może występuje próba użycia wpisu z TTF? Kolejna linijka to zabezpieczenia dla starych wersji IE, które nie radzą sobie z detekcją, co to za typ czcionki i dopiero last but not the least wpis dla "reszty świata" spoza rezerwatu IE. Lepiej dać na wszystkie czcionki niż mieć niespodziankę – brak zgodności zauważyłem przypadkiem.
Na koniec przydatny link: online’owy konwerter czcionek – http://onlinefontconverter.com/

Brzmi jak wstęp do starożytnej szkoły HTMLa (no dobra – średniowiecznej, bo w starożytności uczono frame’ów), czyż nie?

Jak wygląda kod wycentrowania napisu na całą stronę (np. komunikat błędu, strona zastępcza itp.)? A tak:

coś, co ma być w środku



			

				

					
					Cache status: 
					
						-
					
				
				

					
					Memory usage: 
					
						- MB
					
				
				

					
					SQL queries: 
					
						-
					
				
				

					
					Page generation time: 
					
						- (sec)
					
				
			

  

Przykład (odpowiednio zmiejszony + border):