Slideshow obrázků

Ozvláštnit webovou stránku je možné obrázkovou galerií, kde se budou automaticky v určitém časovém intervalu prohazovat jednotlivé obrázky.

Rozhodně postup automatické změny nelze doporučit pro vytváření populárních prvků v hlavičkách stránek, kde se střídá důležitý obsah, na který má uživatel kliknout – tzv. kolotoč (carousel).

Měl bych použít kolotoč

Řešení

Cílem je tedy vytvořit box, kde se budou střídat jednotlivé obrázky s nějakou plynulou animací.

Pro lepší použitelnost se hodí přidat následující dvě funkce:

  • zastavit přehrávání při najetí na obrázek,
  • přeskočit na další při kliknutí

Plynulá změna

Asi nejsnazší způsob, jak dosáhnout plynulého přechodu, bude změna průhlednosti. Všechny obrázky se dají do společného <div>u a absolutně se naposicují přes sebe.

Všechny kromě aktivního obrázku budou 100% průhledné (opacity: 0). Aktivní bude naopak neprůhledný (opacity: 1). Přidáním transition pro průhlednost potom dosáhneme efektu prolnutí.

Živá ukázka

Responsivní

Trochu komplikovanější bude vytvořit celou věc, aby byla responsivní. Nabízí se třeba pro první obrázek (selektor :first-child) použít relativní/statickou posici, aby roztáhl obal.

Samostatná živá ukázka

Možné problémy

Kvůli tomu, že se jednotlivé obrázky překrývají, není možné si snadno přes pravé tlačítko myši aktuální obrázek uložit. Ukázka tomu přechází zvýšením z-indexu při najetí.

V IE 9 a starších nebude přechod plynulý kvůli nepodpoře transition.

Všechny obrázky se začnou načítat spolu se stránkou, ne až v momentě, kdy se mají zobrazit.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Animace

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Lazy loading obrázků

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Odpočítávání času v JavaScriptu

Odpočítávání času v HTML

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

Vlastní alert

Vlastní hláška alert

Jak si v JavaScriptu vytvořit vlastní hlášky jako je výchozí alert.

Komentáře