Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. jQuery
Code

20 nejlepších jQuery sliderů obrázků

by
Difficulty:BeginnerLength:LongLanguages:

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

Buďme upřímní - slidery jsou zábava. Trocha pohybu může opravdu oživit stránku.

Slidery - také známe jako "karusely" nebo "obrázkové slidery" - jsou interaktivním elementem pro zobrazování snímku nebo jiných medií na webové stránce.

Podívejte se na těchto 20 jQuery sliderů z Envato Marketu a uvidíte, že na sliderech je toho víc, než si umíte představit.

1. RoyalSlider

Mít responsivní slider, který je zároveň přátelský k dotykovým zařízením, je nyní důležitější, než kdy dříve a RoyalSlider je obojí.

Vyvinut pomocí nejlepší praxe v HTML5 a CSS3, je skvělou volbou.

RoyalSlider Touch-Enabled jQuery Image Gallery

Zde je pár dalších královsky skvělých funkcí:

  • SEO optimalizovaný
  • vysoce konfigurovatelný
  • přes 10 šablon pro začátek
  • obsahuje krytí s CSS3 přechody
  • a další

Myslím, že nejlepší funkcí je modulární architektura, která dává vývojářům možnost vypustit to, co nepotřebují z hlavního JS souboru, čímž vše zůstane maximálně zjednodušené.

The RoyalSilder je solidní JavaScript slider, který by měl solidním nástrojem pro každého webového developera.

2. Slider Revolution

Není jednoduché být "revoluční" ve sliderovém prostoru. Existuje pouze omezené množství možností, když dojde na slidery, ale Slider Revolution to zkouší skvěle.

Když dojde na jQuery slidery, tento dodá téměř vše co chcete.

Slider Revolution Responsive jQuery Plugin

Seznam funkcí pro tento slider je dlouhý, proto pouze vypíchnu to nejlepší:

  • parallax efekty a vlastní animace
  • SEO optimalizace a možnost líneho nahrávání
  • přidá neomezené vrsty a slajdy s možností odkazu
  • obsahuje připravené styly a je vysoce upravitelný
  • a mnoho dalšího

Možnost vložit snímek, vložený video přehrávač a zdroj sociálních médií, dělá ze Slider Revolution jeden z nejvíc flexibilních a upravitelných možností, jaké najdete.

3. LayerSlider

Název tohoto jQuery slideru nestačí jeho kvalitě. Obsahuje 200+ 2D a 3D přechodů, za čímž se mnoho lidí otočí.

LayerSlider Responsive jQuery Slider Plugin

Některé z důležitých funkcí:

  • obsahuje PST šablony pro design skinu
  • 13 skinů a 3 typy navigace
  • přidán pevný snímek přes slider
  • SEO přátelský a líné nahrávání snímků
  • hardware-akcelerované CSS3 přechody s jQuery jištěním
  • a další

Jako předchozí slider, můžete použít jakýkoliv obsah - i HTML5 self-hosted multimediální obsah.

LayerSlider přináší hodně akce mezi slidery a je naprosto skvělý.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow je jednoduché řešení. Je jednoduchý a neobětuje žádné základní funkce.

jQuery Banner Rotator Slideshow

Obsahuje:

  • tooltipy, popisy, atd
  • náhledy a možnost zobrazení komponent
  • časovač a možnost prodlení na globální nebo sliderové úrovni
  • několik přechodu pro více slidů nebo pro každý zvlášť
  • a další

Zatím co jQuery Banner Rotator / Slideshow je v porovnání s ostatními základ, neměl by být přehlížen, pokud chcete jednoduché a čisté rozhraní.

5. All In One Slider Responsive jQuery Slider Plugin

Každý slider přichází na trh se svojí vlastní unikátní perspektivou a přináší řešení čehokoliv, na co slidery míří.

Ale tento ne.

All In One Slider Responsive jQuery Slider Plugin je.. mno.. vše v jednom.

All In One Slider Responsive Jquery Slider Plugin

Myslím, že mnoho vývojářů a designérů má své řešení, ale zároveň se dívají po něčem novém.

Tohle by mohlo být tím něčím novým, protože obsahuje:

  • rotátor banneru
  • náhledový banner
  • banner s playlistem
  • slider obsahu
  • karusel

A všechny tyto slidery styly obsahují většinu - pokud ne vše - z funkcí, potřebných jQuery sildery.

Bude All In One Slider Responsive jQuery Slider Plugin vaším vše-v-jednom řešením?

6. UnoSlider

Pokud váš slider není responsivní a připraven na dotyková zařízení, neděláte to správně.

UnoSlider to dělá správně.

UnoSlider - Responsive Touch Enabled Slider

Tento slider našel místo přesně akorát mezi jednoduchostí a bohatostí na funkce.

Obsahuje funkce:

  • jednoduše měnící téma
  • 12 předpřipravených témat
  • 40 přechodů prezentace
  • podpora IE6+ (protože tam venku stále je!)
  • a další

Sada funkcí tíhne více k designu a stylu, což činí UnoSlider skvělým sliderem obsahu.

7. Master Slider

Hledáte jeden jQuery slider, který všem vládne?

Zkuste například Master Slider..

Master Slider - jQuery Touch Swipe Slider

Když přijde na dobrý vzhled, tento je ve vrchních patrech:

  • chytré před-nahrání
  • přes 25 šablon
  • přechody, akcelerované hardwarem
  • podporuje dotykovou navigaci a gesta swipe
  • a mnoho dalšího

Interaktivní přechody, animované vrstvy a hotspoty vás opravdu zaujmou.

MasterSlider kolekce je opravdu mistrovské dílo.

8. TouchCarousel

TouchCarousel láka na "podporu a upgrade zdarma", ale je tam toho mnohem více v tomto odlehčeném karuselovém slideru jQuery.

TouchCarousel - jQuery Content Scroller and Slider

S "touch" v názvu, je jasné, že je plně responsivní a podporuje dotykovou navigaci.

další funkce obsahují:

  • SEO přátelské
  • chytré automatické přehrávání
  • hardware-akcelerované CSS3 přechody
  • upravitelné UI pomocí Photoshop skinů
  • a další

Nicméně, TouchCarousel bere mobil na úplně nový level s jeho unikátním scrollovaním, založeným na fyzice.

9. Advanced Slider

jQuery slider není pouze pro web. Také může být užitečný, když je integrován do aplikací, tak to můžete udělat pomocí Advanced Slider.

Advanced Slider - jQuery XML Slider

Pomocí HTML markup nebo XML, Advanced Slider obsahuje mnoho věcí:

  • animované vrstvy a chytré video
  • 100+ přechodů a 150+ upravitelných vlastností
  • 15 slider skinů, 7 skinů scrollbarů a vestavěný lightbox support
  • navigace klávesnicí, podpora dotykové obrazovky a plně upravitelné rozhraní
  • a mnoho, mnoho dalšího

Ale nejlepší funkce, je API Advanced Slider - což z něj činí perfektní řešení pro vaši aplikaci.

10. jQuery Slider Zoom In/Out Effect Fully Responsive

Tohle je jeden z těch jQuery sliderů, kde nejdříve navštívíte demo, než začnete číst, protože chcete vědět, co sakra znamená "zoom in/out effect".

Představte si spořič obrazovky.

jquery Slider Zoom InOut Effect Fully Responsive

I když je efekt nenápadný, zoom efekt ve slideru přidá pěkný detail ve světe www statických snímku.

Tyto mazané slidery zahrnují:

  • CSS3 přechod vrstev
  • exit animaci parameter pro vrstvy
  • pevné, plnou šířku a fullscreen možnosti
  • CSS a HTML formátované animované texty
  • a další

Zatímco většina sliderů zkouší dodat mnoho efektů v jednom balíku, jQuery Slider Zoom In/Out Effect Fully Responsive dodá efekt Ken Burnse a dodá ho skvěle.

11. Content Timeline

Content Timeline je krásně designovaný a silný slider - perfektní řešení pro časové osy.

Od desktop k mobilu, časové osy nikdy nevypadali tak pěkně.

Content Timeline

Je to jednoduché. Vezmete váš obsah, seřadíte ho podle data, zavoláte funkci a je to!

Funkce obsahují:

  • mocný a jednoduchý
  • 11 upravitelných nastavení
  • plně interaktivní, flexibilní a intuitivní
  • plně responsivní a vytvořený pro mobily a desktopy
  • a další

Se sedmi vestavěnými metodami pro ovládání skriptů a obsahuje zmírňující efekty. Content Timeline je jedním z nejlepších sliderů pro časové osy, co najdete.

12. Sexy Slider

Sexy Slider už není tak sexy jak býval, ale zestárl dobře, což z něj činí věrohodné řešení.

Sexy Slider

Na první pohled není tak ohromující, ale s nějakým tím lazením, tento flexibilní jQuery slider může být nastaven, aby se perfektně hodil k vašemu designu.

Zahrnuje:

  • auto slide
  • popis snímků
  • nepřetržité slidování
  • 6 efektů přechodu
  • a další

Sexy Slider čeká jen na vás, aby odemknul svojí sílu a odhalil svůj potenciál.

13. Master Slider jQuery Slider Plugin with Visual Builder

Master Slider jQuery Slider Plugin with Visual Builder dělá tvoření sliderů jednoduché - bez obětování dobrého vzhledu.

Tento prémiový slider obsahu a snímků, nabízí pár opravdu pěkných hardware-akcelerovaných přechodu, které vás určitě zaujmou.

Master Slider jQuery Slider Plugin with Visual Builder

Funkce zahrnují:

  • chytré před-nahrání
  • vyrobeno pro mobil i desktop
  • přes 80 připravených příkladů sliderů
  • maskované vrstvy přechodu, akce vrstev a překrytí vrstev
  • a další

Master Slider jQuery Slider Plugin with Visual Builder je plně upravitelný, SEO přátelský a také podporuje videa. A samozřejmě, vizualní builder.

14. Translucent

Většina pluginů jQuery slideru obsahuje nějaký design chromu, zatím co můžete vše nastavit, tak aby se vám to líbílo, někdy chcete nechat vše na slidu.

Zde je Translucent slider.

Translucent - Responsive Banner Rotator Slider

Obsahuje mnoho přednastavení, takže vše co musíte udělat je nastavit a můžete frčet!

Funkce obsahují:

  • 6 variací stylu
  • 4 efekty přechodů
  • 2 dotekové swipe přechody
  • nastavitelná tlačítka a popisy
  • a další

Jako ostatní, je přátelský k dotykovému zařízení a dodá hardware akceleraci.

Translucent je minimalistický slider, který dělá skvělou práci, vložením obsahu dopředu.

15. Unleash

Hledáte slider typu akordeon? Potom Unleash je to co chcete!

Plný funkcí, tento nádherný slider je jedním z těch nejlepších sliderů co najdete.

Unleash

Obsahuje funkce:

  • HTML5 video support pro desktop
  • hardware-akcelerované animace
  • plně responsivní
  • podporuje dotykové obrazovky
  • a další

Uvolněte Unleash jQuery responsivní akordeon slider.

16. AviaSlider

AviaSlider je další dobře vypadající slider, který obsahuje některé opravdu moc pěkné efekty.

Tento jednoduchý jQuery slideshow plugin obsahuje 8 předdefinovaných přechodů, ale můžete jich vytvořit mnohem více.

AviaSlider

Některé další funkce zahrnují:

  • obsahuje preloader snímků
  • autoplay skončí, když uživatel zareaguje
  • funguje hned s prettyPhoto Ligthbox
  • a další

AviaSlider má ránu, ačkoliv zabalená verze má pouze 8kb.

17. Slider Evolution

Začněte slider revoluci se Slider Evolution! Nyní můžete jednoduše vytvořit JavaScript slider s těmi nejlepšími efekty.

Slider Evolution

Se Slider Evolution, můžete vytvořit nespočetné množství sliderů, každý s vlastním nastavením, umístěným kdekoliv na vaší stránce.

18. Accordionza

jQuery slidery už nebudou víc odlehčené než takhle.

Potřebuje pouze 3kb pro nahrání, Accordionza je super odlehčená možnost akordeon slideru.

Accordionza - jQuery Plugin

A pokud se vám nelibí ani jeden ze tří dodaných stylů, můžete upravit HTML a CSS toho flexibilního akordeonu.

Obsahuje funkce:

  • navigaci klávesnice
  • jednoduše upravitelné efekty a ovládání
  • progresivní vylepšení (viditelné bez povoleného JavaScriptu)
  • a další

Mějte na mysli, že Accordionza může zobrazit různe verze obsahu, což z něj dělá skvělou volbu pro flexibilní, akordeon slider.

19. mightySlider

Tento mightySlider je zaručeně mocný.

Můžete ho použít nejen jako jednoduchý slider snímků, ale také jako jednosměrný slider s navigací položkami, čímž je skvělý pro jednostránkové webové designy.

mightySlider - Responsive Multipurpose Slider

Pod kapotou se skrývá spoustu nastavení:

  • klávesnice, myš, podpora dotykových zařízení
  • hardware akcelerované CSS3 přechody
  • čistý, validní a SEO optimalizovaný
  • nespočet slidů, popisových vrstev a efektů popisu
  • a mnono dalšího

API je mocné a přátelské k vývojářům, přidáním mnoha způsobů jak může být použit.

Se svým čistým a dobře okomentovaným kódem, mightySlider je excelentním jQuery sliderem, který jde kupředu.

20. Parallax Slider

Parallax Slider funguje jako jQuery Responsive OneByOne Slider Plugin, dovoluje vám animovat každou vrstvu zvlášť na každém slidu.

Můžete to udělat s několika slidy nebo jen jedním slidem, přidáním par zajímavých parallax animaci na vaši stránku.

Parallax Slider - Responsive jQuery Plugin

Obsahuje čtyři různé typy sliderů, všechny nabízí stejný animovaný parallax efekt.

Jako mnoho dalších jQuery sliderů, obsahuje také:

  • plnou upravitelnost
  • podporu dotykových displejů
  • plně responsivní a nespočet vrstev
  • parametry autoplay, loop, výška a šířka a časovač
  • a další

Animované vrstvy nejsou limitovany na text a snímky. Můžete také obsahnout YouTube, Vimeo a HTML5 video.

Parallax Slider je dalším skvělým příkladem toho jak Flash efekty mohou být provedeny bez Flashe - a být podporovány napříč všemi zařízeními.

Shrnutí

Je zajímavé vidět jak se jQuery sildery vyvinuli z něčeho co se posouvalo snímky z jednoho na druhý, na širokou škálu kreativních nástrojů. Vidíme slidery kterou jsou 3D parallax, přes celou stránku, plně responsivní a zobrazitelné na dekstopu a mobilu.

Pokud jste nenašli jQuery slider co by se vám líbil, můžete vždy jít na Envato Tuts+ jQuery Code Tutorial a vyvinout něco kompletně nového a unikátního. Nebo se prokousejte dalšími skvělými jQuery slidery na Envato Marketu - jejich tam dost.

Který je váš oblíbený jQuery slider a proč?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.