0 závislostí

Hero Slider · vanilla JS

Príbehy, ktoré zaujmú na prvý pohľad

Elegantný posuvník v čistom HTML, CSS a JavaScripte. Žiadne frameworky, žiadne závislosti – len rýchly a plynulý zážitok.

Preskúmať funkcie Ako použiť

Výkon

Plynulé prechody bez sekania

Animácie bežia výhradne na GPU – len vlastnosti transform a opacity. Stabilných 60 fps aj na mobilných zariadeniach.

Zistiť viac

Ovládanie

Gestá, klávesnica aj dotyk

Prejdenie prstom so živým náhľadom, šípky, bodky aj automatické prehrávanie s pauzou pri zameraní alebo prejdení kurzorom.

Prehľad skratiek

Prístupnosť

Dostupné pre každého

Sémantika ARIA, ovládanie z klávesnice, oznamovacia oblasť pre čítačky a rešpektovanie nastavenia zníženého pohybu.

Ako to robíme

Bezpečnosť

Bezpečne a bez kompromisov

Prísna politika obsahu (CSP), žiadne inline skripty a validácia všetkých nastavení. Kód je pripravený na produkciu.

Integrovať vlastný slider

Čo ponúka

Funkcie na prvý triede

Všetko, čo od moderného hero slidera očakávaš – bez jediného riadku cudzieho kódu.

  • Plynulé animácie

    Tri režimy prechodu – posun, preblik a priblíženie – s easing krivkou a odsunutým vstupom obsahu.

  • Gestá a dotyk

    Ťahanie prstom alebo myšou so živým náhľadom, detekciou smeru a gumenou päťou na okrajoch.

  • Autoplay s pauzou

    Automatické prehrávanie sa pozastaví pri prejdení kurzorom, zameraní klávesnicou aj pri prepnutí karty.

  • Klávesnica

    Šípky, medzerník, Home/End aj skratky pre nastavenia a celú obrazovku. Všetko zdokumentované nižšie.

  • Prístupnosť

    ARIA roly, oznamovacia oblasť pre čítačky, viditeľné zameranie a rešpektovanie zníženého pohybu.

  • Bezpečnosť

    Prísna CSP, žiadne inline skripty ani eval, validácia nastavení z localStorage proti poškodeným dátam.

  • Výkon

    Animuje len transform a opacity (GPU akcelerácia), progres beží na requestAnimationFrame, obrázky sa lenivě načítajú.

  • Nastavenia

    Panel s živým náhľadom – animácia, rýchlosť, trvanie, Ken Burns, slučka a viditeľnosť prvkov. Uloží sa do localStorage.

Ovládanie

Klávesové skratky

Prehľad klávesových skratiek slidera
← →predchádzajúci / nasledujúci snímok
Medzerníkspustiť alebo pozastaviť prehrávanie
Home Endprvý / posledný snímok
Sotvoriť / zavrieť nastavenia
Fcelá obrazovka
Esczavrieť nastavenia

Integrácia

Ako slider použiť

Trieda HeroSlider je samostatný súbor bez závislostí. Stačí ho pripojiť a inicializovať.

<section class="hero">
  <article class="slide">…</article>
  <article class="slide">…</article>
  <!-- ovládacie prvky [data-control="prev|next|dots|play|…"] -->
</section>

<script src="js/hero-slider.js" defer></script>
<script src="js/app.js" defer></script>
const slider = new HeroSlider(document.querySelector('.hero'), {
  animation: 'slide',  // 'slide' | 'fade' | 'zoom'
  autoplay:  true,
  interval:  6000,     // ms na snímok (2 000 – 15 000)
  duration:  700,      // trvanie prechodu (200 – 1 500 ms)
  kenburns:  true,
  loop:      true,
});

slider.addEventListener('change', (e) => {
  console.log('Aktívny snímok:', e.detail.index);
});

Celé API: next(), prev(), goTo(i), play(), pause(), setOptions(obj), hold(kľúč, bool) a udalosti change, options, play, pause. Inštanciu nájdeš aj v konzole ako window.heroSlider.