Chytrá komponenta
Carousel
Řada obrázků, kterou posunete prstem nebo šipkami. Galerie vždy „zacvakne“ na celý obrázek. Na telefonu je vidět jeden obrázek, na desktopu tři.
Jen HTML a CSS, včetně šipek a teček. V náhledu vidíte desktop, začneme na telefonu.
Struktura
Obrázky v seznamu
Galerie je seznam: každý obrázek je položka li s elementem figure a popiskem. Celek obalíme oddílem s nadpisem.
Bez CSS jsou obrázky pod sebou. Funguje to, jen je to dlouhé.
Layout
Jedna řada, posouvaná prstem
Seznam postavíme do řady flexboxem. Každá položka má 85 % šířky, a tak se do řady nevejdou. overflow-x: auto dovolí řadu posouvat do strany.
Proč 85 %, a ne 100 %? Kousek dalšího obrázku vykukuje u okraje a napoví, že galerie pokračuje.
Vychytávka
Galerie, která zacvakne
Zatím se dá galerie zastavit kdekoli, třeba v půlce obrázku. scroll-snap ji po posunutí vždy dorovná tak, aby byl jeden obrázek přesně uprostřed.
Zkuste v náhledu galerii posunout a pustit. x znamená vodorovně, mandatory „vždy dorovnat“.
Styl
Zaoblené obrázky a popisky
Obrázky dostanou zaoblené rohy a popisky tlumenou barvu. Scrollbar zúžíme, ale necháme ho, aby bylo na počítači vidět, že se dá posouvat.
Automatika
Na desktopu tři vedle sebe
Od 700 pixelů výš se vejdou tři obrázky. Šířku položky spočítáme: celá šířka minus dvě mezery, děleno třemi.
Čtvrtý obrázek je schovaný vpravo. Galerie se dá posunout kolečkem myši se Shiftem, scrollbarem nebo na touchpadu.
Novinka v CSS
Šipky a tečky bez JavaScriptu
Nejnovější CSS umí ke galerii vygenerovat tlačítka ::scroll-button() a tečky ::scroll-marker. Šipky posunou galerii o kus dál a tečka aktuálního obrázku je červená.
Za lomítkem v content je text pro screen readery. Šipky i tečky zatím umí jen některé prohlížeče. Ostatní je nezobrazí a galerie v nich funguje dál jako posuvná řada.
Recept
Carousel v kostce
- flexbox +
overflow-x: auto: řada, která se posouvá scroll-snap: vždy celý obrázek- vykukující další obrázek napoví, že je jich víc
- šipky a tečky v CSS jako bonus tam, kde je prohlížeč umí