• Wordpress  slider
  • Responsive  slider
  • Bootstrap  carousel
  • Bootstrap  slider
Wordpress slideshow

Slide Effect & Blast Design Image Slider

Denne slider er en ren CCS slider i fuld vidde, der er dramatisk og flot. Den har rør-og-stryg aktivering, hvilket gør den ideel til tabletter og smartphones, og den loader også virkelig hurtigt.

Fordi slider’en er i fuld vidde, har billederne maksimal effekt, hvilket gør denne slider til et fantastisk valg for fotografer og andre folk, der ønsker, at billederne skal være i fokus på deres websted.

Der er to navigationspile og en pause/play knap, der dukker op, når brugeren interagerer med eller dvæler på billederne. Disse er fede hvide ikoner mod en dybt blå cirkulær baggrund. De synes at ‘falde’ på plads, idet de fader ind og kryber i størrelse. Det er en dramatisk og attraktiv effekt, der virker ligeså godt baglæns, hvor ikonerne synes at ‘stige’ op fra slider’en. Alt i alt får dette designet til at virke 3-dimensionelt.

Hvis du dvæler på ikonerne, dannes der en blå rand, der synes at udstråle fra den centrale cirkel og så fade ud. Igen er det en stilfuld og dramatisk effekt, der virkelig får dette slider design til at udmærke sig.

Ikonerne gør nøjagtig, hvad man ville forvente: et klik på næste/forrige pilene tager dig til de pågældende billeder, og et klik på afspil/pause knappen vil enten standse slideshow’et eller sætte det i gang.

Brugeren kan også navigere mellem billederne ved at bruge cirklerne nederst på midten af skærmen. Disse cirkler er dybt blå, og hver af dem repræsenterer et billede i slideshow’et. Når et nyt billede kommer ind i visningsfeltet, får den tilsvarende cirkel en halvgennemsigtig fed kant, der drager blikket og hjælper brugeren forstå, hvordan cirklerne virker.

Hvis man interagerer med cirklerne, vises der et forhåndsvisningsbillede i en blå ramme. Dette forhåndsvisningsbillede daler ned og letter på samme måde som de andre ikoner. Hvis man klikker på en cirkel, oploader den så det tilsvarende billede til slideshow’et.

Hvert billede i slidehow’et ‘glider’ over til det næste, enten til venstre eller højre afhængigt af, om det er det næste billede eller et tidligere. Når man bruger cirklerne til at navigere hen til et billede, der er to eller tre billeder længere henne, eller når slideshow’et når til ‘enden’ af billederne og går tilbage til begyndelsen, løber det hurtigt gennem alle billederne. Dette giver det en naturlig, ‘realistisk’ virkning, der er ret spidsfindig, men får slider’en til at virke venlig og organisk.

Der er en billedtekst i det nederste venstre hjørne. Der er en titel og en undertitel, begge hvid tekst på et halvgennemsigtigt blåt rektangel. Billedteksterne ‘falder’ og ‘stiger’ på plads og ud igen på samme måde som de andre ikoner og forhåndsvisningsbillederne. Den halvgennemsigtige blå baggrund lader farverne fra fotoet nedenunder skinne igennem, hvilket får billedteksten til at se en anelse blødere ud.

Billedteksterne bruger Duru Sans, en sans-serif font, der blander humanistisk og modernistisk design. Resultatet er meget elegant og får designet til at virke raffineret.

Fordi der hverken er JQuery, javascript eller billeder, er denne slider hurtig og virker på enhver platform. Den vil være perfekt for mobil-først designere.