Slidery a bannery

Jeden slider nestačí. Mějte jich, kolik potřebujete

Vestavěný slider PrestaShopu umí jediný pás obrázků na úvodní stránce — a tím končí. Modul Slidery vám dá sliderů libovolný počet: velký banner na homepage, úzký pás s akcí nad patičkou, karusel novinek uprostřed stránky. Každý slider má vlastní rozměry, chování i umístění a spravujete je všechny přehledně na jednom místě v menu Vzhled → Slidery.

Banner přes celou šířku, nebo karusel karet

U každého slideru zvolíte režim zobrazení:

Karusel je chytrý: šířka karty z nastavení je maximum a modul ji dopočítá tak, aby byly vždy vidět jen celé karty — žádná useknutá půlka na kraji obrazovky. K chování patří automatické přehrávání s nastavitelnou prodlevou a rychlostí, nekonečná smyčka, pauza při najetí myší, šipky, tečky a přechod posunem či prolnutím — vše s živým náhledem přímo ve formuláři, takže výsledek vidíte ještě před uložením.

Obrázky v přesném rozměru, WebP i retina — automaticky

Nahrajete jakýkoliv obrázek a modul se postará o zbytek: ořízne ho přesně na rozměr slideru, převede do úsporného formátu WebP a pokud je zdroj dost velký, vytvoří i dvojnásobnou verzi pro retina displeje. Žádné ruční řezání bannerů na pixely:

• zvlášť obrázek pro počítač a pro mobil — na telefonu se svislý formát nestahuje z desktopové šířky, ale má vlastní soubor,
• média per jazyk — česká verze banneru pro češtinu, slovenská pro slovenštinu; nevyplněné jazyky automaticky převezmou výchozí,
• MP4 video místo obrázku — tiché, ve smyčce, s náhledovým obrázkem; přehrává se jen aktuálně viditelný slide,
• nahrávání přetažením (drag&drop) s náhledem ve skutečném poměru stran slideru.

Obsah slidu přesně tam, kde ho chcete

Ke každému slidu patří text psaný ve WYSIWYG editoru, odkaz a popisek obrázku pro vyhledávače. Umístění obsahu vybíráte klikem v mřížce 3×3 — vlevo nahoře, na středu, vpravo dole… text se podle zvolené pozice sám správně zarovná. A protože bannery bývají kampaně, má každý slide platnost od–do: vánoční akci připravíte v listopadu, sama se zobrazí i skončí.

Šířka na stránce a vlastní CSS bez zásahu do šablony

Každé místo v šabloně má jinou šířku — proto si u slideru zvolíte, jak se má roztáhnout: podle umístění, přes celou obrazovku (full-bleed s volitelným bočním odsazením), nebo na vlastní procento šířky se zarovnáním na střed. K tomu svislé odsazení nad a pod sliderem. Pro jemné doladění má každý slider pole vlastního CSS s připravenými klikacími příklady — zakulacení rohů, úprava šipek a teček, textového boxu nebo skrytí šipek na mobilu — postavené na CSS proměnných --dmslider-*.

Rychlost především: stavěno na Core Web Vitals

• Žádná externí knihovna — posouvání řeší nativní CSS scroll-snap a pár kilobajtů vlastního JavaScriptu.
• Nulový skok stránky (CLS) — slider má správnou výšku hned při prvním vykreslení díky poměru stran z nastavených rozměrů.
• Rychlé LCP — první slide se načítá přednostně (fetchpriority), ostatní až líně; mobil si stahuje jen mobilní obrázek.
• Videa se přehrávají jen na viditelném slidu, animace respektují systémové nastavení omezení pohybu, šipky jsou inline SVG — žádný ikonový font.

Technické zázemí

• Zobrazení bez zásahu do šablony — slider zavěsíte na připravené pozice (úvodní stránka, nad/pod obsahem stránky, levý a pravý sloupec, nad patičkou), nebo vložíte kamkoliv widgetem: {widget name='dmslider' slider=1}.
• Správa jako v nativním PrestaShopu — záložky přímo v menu Vzhled, seznamy s miniaturami, změna pořadí přetažením, zapnutí/vypnutí jedním klikem.
• 8 jazyků administrace — čeština, slovenština, angličtina, němčina, polština a maďarština (včetně variant AT/GB).
• Podpora multistore — slidery per obchod.
• PrestaShop 1.7.7 až 9.x, responzivní administrace i web.

Nainstalujte, vytvořte první slider, nahrajte obrázky — a máte bannery, které vypadají skvěle na počítači i mobilu a neničí rychlost webu.