Slick.js je javascriptový lightweight plugin umožňující snadnou implementaci carouselu do UI. My jej využíváme v uživatelské sekci pro přehlednější zobrazení vyúčtování na telefonech, ne však jako obyčejný carousel, ale spíše jako UI prvek usnadňující život uživatele.

Samotné nasazení nám zabralo jen chvilku, ale challenge přišel při řešení responzivity. Slick lze nakonfigurovat pro různá rozlišení různými způsoby, tvůrci ale nejspíše nepočítali se scénářem, kdy na mobilních zařízeních uživatel chce carousel, ale na desktopu nikoli. Samozřejmě lze v JS udělat funkci, která detekuje mobilní zařízení a inicializuje plugin, ale my jsme přemýšleli i nad scénářem, kdy hravý uživatel mění šířku okna a z mobilní verze používající carousel se dostane do desktopové verze. Opět to jde udělat v JS, ale to se nám tolik nelíbí. Rozhodli jsme se tedy zrušit carousel přes CSS. Po pár příkazech s “!important” byla práce hotova a všichni jsme byli spokojení.

Využití Slick.js na přehledu vyúčtování v Twisto.

Desktopová verze přehledu vyúčtování Twisto

Při testování na mobilních zařízeních jsme si všimli nepříjmené odezvy od zahájení swipe gesta po dokončení animace přechodu karet. Tato nepříjemnost se projevuje i na stránkách pluginu (http://kenwheeler.github.io/slick/). Během chvíle jsme přišli na původ této nepříjemnosti: doba animace. Slick totiž dobu animace začne v případě mobilního zařízení počítat až od doby, kdy uživatel dokončí swipe gesto, což působilo špatným dojmem. Zkrácením animace na 100ms se problém vyřešil a naše UX se tímto rozhodně zlepšilo.

A proč, že jsme chtěli do našeho jednoduchého UI přidávat věc jako je carousel? Mobilní uživatelé měli na jejich malých displayích stránku dlouhou tisíce pixelů kde byly věci, které většinou nepotřebují. Napadlo nás tedy, že když chytře implementujeme carousel, jedině nám to pomůže.

- Daniel Born, Twisto frontend developer