Výber adaptívnych posúvačov. Zaujímavý posúvač na jQuery jQuery plugin „Scale Carousel“

1. Vynikajúca jQuery Slideshow

Veľká, veľkolepá prezentácia využívajúca technológie jQuery.

2. Doplnok jQuery „Scale Carousel“

Škálovateľná prezentácia pomocou jQuery. Môžete si nastaviť veľkosti prezentácie, ktoré vám najviac vyhovujú.

3. Doplnok jQuery „slideJS“

Posuvník obrázkov s textovým popisom.

4. Plugin “JSliderNews”

5. Posuvník CSS3 jQuery

Keď umiestnite kurzor myši na navigačné šípky, zobrazí sa kruhová miniatúra ďalšej snímky.

6. Pekný posúvač „Presentation Cycle“ jQuery

Posuvník jQuery s indikátorom načítania obrázkov. K dispozícii je automatická výmena sklíčka.

7. Doplnok jQuery „Parallax Slider“

Posuvník s objemovým efektom pozadia. Vrcholom tohto posúvača je pohyb pozadia, ktoré pozostáva z niekoľkých vrstiev, z ktorých každá roluje inou rýchlosťou. Výsledkom je imitácia objemového efektu. Vyzerá to veľmi krásne, môžete sa sami presvedčiť. Efekt sa zobrazuje plynulejšie v prehliadačoch, ako je Opera, Google Chrome,IE.

8. Svieži a ľahký posúvač jQuery „bxSlider 3.0“

Na ukážkovej stránke v sekcii „príklady“ nájdete odkazy na všetky možné možnosti pomocou tohto pluginu.

9. Posuvník obrázkov jQuery, plugin „slideJS“.

Štýlový jQuery slider môže určite ozdobiť váš projekt.

10. jQuery slideshow plugin “Easy Slides” v1.1

Jednoducho použiteľný doplnok jQuery na vytváranie prezentácií.

11. Doplnok jQuery Slide

Jednoduché plugin jQuery v rôznych prevedeniach. K dispozícii je automatická výmena sklíčka.

12. jQuery CSS galéria s automatickou zmenou snímok

Ak návštevník do určitého času neklikne na šípky „Vpred“ alebo „Späť“, galéria sa začne automaticky posúvať.

13. Posuvník jQuery „Nivo Slider“

Veľmi profesionálny, kvalitný, ľahký plugin s platným kódom. K dispozícii je veľa rôznych prechodových efektov snímky.

14. Posuvník jQuery „MobilySlider“

Čerstvý posúvač. Posuvník jQuery s rôznymi efektmi na zmenu obrazu.

15. Doplnok jQuery „Slider²“

Ľahký slider s automatickým meničom diapozitívov.

16. Fresh javascript slider

Posuvník s automatickou zmenou obrazu.

Plugin na implementáciu prezentácií s automatickou výmenou snímok. Displej je možné ovládať pomocou miniatúr obrázkov.

Posuvník obrázkov jQuery CSS pomocou doplnku NivoSlider.

19. Posuvník jQuery „jShowOff“

Plugin na rotáciu obsahu. Tri možnosti použitia: bez navigácie (s automatickou zmenou formátu prezentácie), s navigáciou vo forme tlačidiel, s navigáciou vo forme miniatúr obrázkov.

20. Zásuvný modul „Portfólio efektov uzávierky“.

Čerstvý jQuery plugin pre návrh portfólia fotografa. Galéria má zaujímavý efekt meniacich sa obrázkov. Fotografie nasledujú za sebou s efektom podobným činnosti spúšte objektívu.

21. Ľahký javascriptový posúvač CSS „TinySlider 2“

Implementácia obrázkového posúvača pomocou javascriptu a CSS.

22. Úžasný posúvač „Tinycircleslider“

Štýlový okrúhly posúvač. Prechod medzi obrázkami sa vykonáva potiahnutím posúvača vo forme červeného kruhu po obvode. Dokonale zapadne do vášho webu, ak vo svojom dizajne použijete oblé prvky.

23. Posuvník obrázkov s jQuery

Ľahká posuvná súprava „Slider Kit“. Posuvník je k dispozícii v rôznych prevedeniach: vertikálne a horizontálne. Implementované sú aj rôzne typy navigácie medzi obrázkami: pomocou tlačidiel „Dopredu“ a „Späť“, pomocou kolieska myši, pomocou kliknutia myšou na snímku.

24. Galéria s miniatúrami „Slider Kit“

Galéria "Slider Kit". Posúvanie miniatúr sa vykonáva vertikálne aj horizontálne. Prechod medzi obrázkami sa vykonáva: kolieskom myši, kliknutím myši alebo umiestnením kurzora nad miniatúru.

25. Posuvník obsahu jQuery „Slider Kit“

Vertikálny a horizontálny posúvač obsahu pomocou jQuery.

26. Prezentácia jQuery „Slider Kit“

Prezentácia s automatickou výmenou snímok.

27. Ľahký profesionálny javascript CSS3 slider

Úhľadný posúvač jQuery a CSS3 vytvorený v roku 2011.

Prezentácia jQuery s miniatúrami.

29. Jednoduchá prezentácia jQuery

Prezentácia s navigačnými tlačidlami.

30. Úžasná prezentácia jQuery „Skitter“.

Doplnok jQuery Skitter na vytváranie úžasných prezentácií. Plugin podporuje 22 (!) typov rôznych animačných efektov pri zmene obrázkov. Môže pracovať s dvoma možnosťami navigácie na snímkach: pomocou čísel snímok a pomocou miniatúr. Nezabudnite si pozrieť demo, veľmi kvalitný nález. Použité technológie: CSS, HTML, jQuery, PHP.

31. Prezentácia „Nepríjemná“

Funkčná prezentácia. Snímky môžu byť vo forme: jednoduchých obrázkov, obrázkov s titulkami, obrázkov s popismi, videí. Na navigáciu môžete použiť šípky, číselné prepojenia a klávesy vľavo/vpravo na klávesnici. Prezentácia sa dodáva v niekoľkých verziách: s miniatúrami a bez nich. Ak chcete zobraziť všetky možnosti, kliknite na odkazy Demo #1 - Demo #6 umiestnené v hornej časti stránky s ukážkou.

Veľmi originálny dizajn pre posúvač obrázkov, pripomínajúci ventilátor. Animovaný prechod snímky. Navigácia medzi obrázkami sa vykonáva pomocou šípok. Nechýba ani automatický posun, ktorý je možné zapnúť a vypnúť pomocou tlačidla Play/Pause umiestneného na hornej strane.

Animovaný posúvač jQuery. Obrázky na pozadí sa pri zmene veľkosti okna prehliadača automaticky upravia. Pri každom obrázku sa zobrazí blok s popisom.

34. Posuvník „Flux Slider“ využívajúci jQuery a CSS3

Nový posúvač jQuery. Niekoľko skvelých animovaných efektov pri výmene snímok.

35. Doplnok jQuery „jSwitch“

Animovaná galéria jQuery.

Ľahká prezentácia jQuery s automatickou výmenou snímok.

37. Nová verzia pluginu “SlideDeck 1.2.2”

Profesionálny posúvač obsahu. K dispozícii sú možnosti s automatickým striedaním snímok, ako aj možnosť pohybu medzi snímkami pomocou kolieska myši.

38. Posuvník jQuery „Sudo Slider“

Ľahký posúvač obrázkov pomocou jQuery. Existuje veľa možností implementácie: horizontálna a vertikálna zmena obrázkov, s odkazmi na číslo snímky alebo bez nich, s popismi obrázkov alebo bez nich, rôzne efekty na zmenu obrázkov. Existuje funkcia automatická zmena diapozitívov. Odkazy na všetky príklady implementácie nájdete na stránke s ukážkou.

39. Prezentácia jQuery CSS3

Prezentácia s miniatúrami podporuje režim automatickej zmeny snímky.

40. Posuvník jQuery „Flux Slider“

Posuvník s mnohými efektmi na zmenu obrazu.

41. Jednoduchý posuvník jQuery

Štýlový posúvač obrázkov pomocou jQuery.

Temdo Slider je výkonný a ľahko použiteľný nástroj na vytváranie krásnych posúvačov pre váš web. Hlavné vlastnosti posúvača:

• Ako pozadie pre každú snímku si môžete vybrať ľubovoľný obrázok alebo video.
• Dodatočný prekryvný obrázok
• Animácia rolovania
• Animácia pri výmene snímok

Ak potrebujete vytvoriť krásny "klasický" posuvník (pozadie, nie viac ako dve ďalšie grafické vrstvy, názov, podnadpis, text a nie viac ako dve tlačidlá na každej snímke), odporúča sa použiť Temdo Slider, najmä ak potrebujete posúvače na celú obrazovku a videá na pozadí.

Vytvorenie posúvača

Ak chcete vytvoriť nový posúvač, v ľavej ponuke ovládacieho panela WordPress vyberte Posúvač > Pridať novú snímku:

Typ snímky

Základným nastavením snímky je typ pozadia (obrázok alebo video). V závislosti od výberu tohto parametra sa zmení rozhranie nastavení snímky: pri výbere videa namiesto skupiny nastavení Statické pozadie objaví sa skupina Animované pozadie.

Pozadie snímky

Vyberte obrázok na pozadí snímky. Majte na pamäti, že obrázok na pozadí sa roztiahne tak, aby vyplnil celú šírku obrazovky (pri zachovaní pomeru strán). Preto sa odporúča používať obrázky Plné rozlíšenie HD (1920 x 1080 pixelov). Ak chcete, aby posúvač nezaberal na výšku celú obrazovku, musíte výšku nastaviť v nastaveniach posúvača.

Prekryvný obrázok

Túto možnosť použite na prekrytie ďalšieho obrázka priehľadným alebo polopriehľadným pozadím na vrchu hlavného obrázka pozadia. Prekrytý obrázok bude replikovaný cez celý povrch snímky ako textúra.

Animácia na pozadí

Povoľte túto možnosť, ak chcete animovať obrázok na pozadí. Po povolení budú dostupné nasledujúce typy animácií:

• Zväčšenie vzhľadom na stred (predvolené)
• Zväčšenie vzhľadom na ľavý horný roh
• Zväčšenie vzhľadom na pravý horný roh
• Zväčšenie vzhľadom k ľavému dolnému rohu
• Zväčšenie vzhľadom na pravý dolný roh

Video na pozadí

Posuvník Temdo podporuje video formáty webm, mp4 a ogg.

Ak chcete použiť video ako pozadie, musíte ho najprv nahrať do knižnice médií vašej lokality. Ak to chcete urobiť, na ľavom paneli konzoly WordPress vyberte položku Mediálne súbory > Pridať nový. Po dokončení sťahovania videa skopírujte jeho adresu URL do schránky a vráťte sa k úprave snímky. Prilepte cestu k súboru videa zo schránky do príslušnej časti nastavení snímky. Odporúča sa používať video vo všetkých troch formátoch vždy, keď je to možné, aby ste podporili čo najviac moderných prehliadačov.

Vlastnosti snímky

Táto časť nastavuje základné parametre snímky:

• Dizajn hlavičky: Môžete si vybrať svetlý dizajn, ktorý sa hodí k tmavému pozadiu, alebo tmavý dizajn na kontrast hlavičky so svetlým pozadím.
• Farba navigácie: Vyberte farbu šípok doľava a doprava a navigačných bodov v spodnej časti posúvača
• Rolovanie na sekciu: zobrazí šípku, na ktorú sa po kliknutí posunie stránka na určené miesto. Zadajte názov kotvy, napríklad „#contact“
• Nezobrazovať názov: Povoľte túto možnosť, ak nechcete, aby sa na tejto snímke zobrazoval názov.
• Nezobrazovať tieň nadpisu: Vypnite tieň nadpisu pre túto snímku.
• Grafická animácia: Vyberte si z dvoch animačných efektov pre grafiku snímky
• Animácia obsahu: Vyberte si z dvoch spôsobov animácie názvu, titulkov, textu a tlačidiel

Nastavenie štýlu obsahu snímky

Nastavenia štýlu obsahu textu snímky (názov, podnadpis a text) sa nastavujú v príslušných skupinách nastavení:

• Názov snímky
• Podnadpis snímky
• Text snímky

V každej z týchto skupín môžete nastaviť font, farbu, veľkosť a ďalšie parametre štýlu pre každý prvok.

Grafika a SVG grafika

Tu môžete načítať ďalší grafický prvok (), ako aj vektorová grafika vo formáte SVG. Pre každý z týchto prvkov môžete nastaviť odkaz, ktorý sa otvorí po kliknutí na prvok.

Gombíky na snímke

V tejto časti môžete nastaviť parametre pre jedno alebo dve tlačidlá:

• Text tlačidla
• Link
• Animácia po umiestnení kurzora myši
• Ikona

Animácia snímky pri posúvaní

V tejto časti môžete zapnúť a vypnúť animáciu pri posúvaní celého obsahu snímky resp jednotlivé prvkyšmykľavka. Ak chcete (a môžete), môžete vyrobiť jemné ladenie animácie pomocou štýlov CSS.

Ukladá sa snímka

Pred uložením snímku ju pridajte do jedného alebo viacerých posuvníkov začiarknutím príslušných políčok v časti Posuvníky. Ak ešte nemáte žiadne posúvače, kliknite na odkaz + Pridať nový posúvač:

Ak potrebujete na svoju stránku pridať kvalitný posúvač obrázkov jQuery, tak v tomto článku nájdete popis potrebných pluginov. Aj keď JQuery značne uľahčil prácu s JavaScriptom, stále potrebujeme doplnky na urýchlenie procesu tvorby webu.

Môžeme vykonať zmeny v niektorých z týchto doplnkov a vytvoriť nové posuvníky, ktoré sú oveľa vhodnejšie pre účely našej stránky.

Pre ostatné posúvače jednoducho pridáte názvy, obrázky a vyberiete efekty prechodu snímok, ktoré sa dodávajú s posúvačom. Všetky tieto pluginy sú dodávané s podrobnou dokumentáciou, takže pridávanie nových efektov alebo funkcií k nim nie je ťažké. Ak ste skúsený programátor JQuery, môžete dokonca zmeniť spúšťače založené na udalostiach.

Najnovšie trendy ako responzívny dizajn sú pre webové projekty veľmi dôležité, či už implementujete plugin alebo skript. Všetky tieto prvky robia každý z týchto doplnkov veľmi flexibilným. Všetko, čo vyšlo v roku 2014, je zahrnuté v tomto zozname.

Posuvníky obrázkov jQuery

Responzívny jazdec Jssor

Nedávno som narazil na tento výkonný posúvač JQuery a mohol som z prvej ruky vidieť, že svoju prácu robí veľmi dobre. Obsahuje neobmedzené možnosti, ktoré možno rozšíriť prostredníctvom otvoreného zdrojového kódu posúvača:

• Adaptívny dizajn;
• Viac ako 15 možností prispôsobenia;
• Viac ako 15 efektov na zmenu obrazu;
• Galéria obrázkov, kolotoč, podpora veľkosti celej obrazovky;
• Vertikálny rotátor bannerov, zoznam snímok;
• Podpora videa.

Demo | Stiahnuť

PgwSlider - responzívny posúvač založený na JQuery / Zepto

Jedinou úlohou tohto pluginu je zobrazovať snímky obrázkov. Je veľmi kompaktný, pretože súbory JQuery majú veľkosť iba 2,5 KB, čo umožňuje jeho načítanie naozaj rýchlo:

• Adaptívne rozloženie;
• SEO optimalizácia;
• Podpora pre rôzne prehliadače;
• Jednoduché prechody obrázkov;
• Veľkosť archívu je len 2,5 kB.

Demo | Stiahnuť

Vertikálny posúvač správ Jquery

Flexibilný a užitočný posúvač JQuery určený pre spravodajské zdroje so zoznamom publikácií na ľavej strane a obrázkom zobrazeným napravo:

• Adaptívny dizajn;
• Vertikálny stĺpec na prepínanie správ;
• Rozšírené hlavičky.

Demo | Stiahnuť

Wallop Slider

Tento posuvník neobsahuje jQuery, ale rád by som ho predstavil, pretože je veľmi kompaktný a môže výrazne skrátiť čas načítania stránky. Dajte mi vedieť, či sa vám páči:

• Adaptívne rozloženie;
• Jednoduchý dizajn;
• Rôzne možnosti výmeny snímok;
• Minimálny kód JavaScript;
• Veľkosť je len 3KB.

Demo | Stiahnuť

Galéria Polaroid v plochom štýle

Galéria v štýle rozsypaných dokumentov na stole s flexibilným usporiadaním a krásnym dizajnom by mala zaujímať mnohých z vás. Vhodnejšie pre tablety a veľké displeje:

• Adaptívny posúvač;
• Plochý dizajn;
• Náhodná zmena snímky;
• Úplný prístup k zdrojovému kódu.

Demo | Stiahnuť

A-Slider

Demo | Stiahnuť

HiSlider – posúvač obrázkov HTML5, jQuery a WordPress

HiSlider predstavil nový bezplatný posuvný doplnok jQuery, pomocou ktorého môžete vytvárať rôzne galérie obrázkov s fantastickými prechodmi:

• Adaptívny posúvač;
• Nevyžaduje znalosti programovania;
• Niekoľko úžasných šablón a vzhľadov;
• Krásne prechodové efekty;
• Podpora pre rôzne platformy;
• Kompatibilné s WordPress, Joomla, Drupal;
• Schopnosť zobraziť obsah rôzne typy: obrázky, YouTube video a videá Vimeo;
• Flexibilné nastavenie;
• Užitočné doplnkové funkcie;
• Neobmedzené množstvo zobrazovaného obsahu.

Demo |Stiahnuť

Wow posuvník

WOW Slider je citlivý posúvač obrázkov jQuery s úžasnými vizuálnymi efektmi ( domino, otočiť, rozmazať, prevrátiť a blikať, vyletieť, žalúzie) a profesionálne šablóny.

WOW Slider prichádza so sprievodcom inštaláciou, ktorý vám umožní vytvoriť fantastické posúvače v priebehu niekoľkých sekúnd bez toho, aby ste museli rozumieť kódu alebo upravovať obrázky. Verzie doplnku pre Joomla a WordPress sú tiež k dispozícii na stiahnutie:

• Plne citlivý;
• Podporuje všetky prehliadače a všetky typy zariadení;
• Podpora pre dotykové zariadenia;
• Jednoduchá inštalácia na WordPress;
• Flexibilita v konfigurácii;
• SEO optimalizované.

Demo |Stiahnuť

Nivo Slider – bezplatný doplnok jQuery

Nivo Slider je známy po celom svete ako najkrajší a ľahko použiteľný posúvač obrázkov. Doplnok Nivo Slider je bezplatný a vydaný pod licenciou MIT:

• Vyžaduje JQuery 1.7 a vyššie;
• Krásne prechodové efekty;
• Jednoduchá a flexibilná konfigurácia;
• Kompaktné a prispôsobivé;
• Open source;
• Výkonný a jednoduchý;
• Niekoľko rôznych šablón;
• Automatické orezanie obrázka.

Demo |Stiahnuť

Jednoduchý posuvník jQuery s technickou dokumentáciou

Myšlienka bola inšpirovaná posúvačmi Apple, v ktorých môže niekoľko malých prvkov vyletieť s rôznymi animačnými efektmi. Vývojári sa pokúsili implementovať tento koncept s prihliadnutím minimálne požiadavky vytvoriť jednoduchý dizajn internetového obchodu, v ktorom „lietajúce“ prvky predstavujú rôzne kategórie:

• Adaptívne rozloženie;
• minimalistický dizajn;
• Rôzne efekty vypadávania a zmeny snímky.

Demo |Stiahnuť

Posuvník obrázkov jQuery v plnej veľkosti

Veľmi jednoduchý posuvník, ktorý zaberá 100 % šírky stránky a prispôsobuje sa veľkosti obrazovky mobilných zariadení. Pracuje s prechodmi CSS a obrázky sú „naskladané“ spolu s kotvami. Kotvu je možné vymeniť alebo odstrániť, ak nechcete k obrázku pripojiť odkaz.

Po inštalácii sa posúvač roztiahne na 100 % šírky obrazovky. Môže tiež automaticky zmenšiť veľkosť snímok:

• Adaptívny posúvač JQuery;
• Plná veľkosť;
• Minimalistický dizajn.

Demo |Stiahnuť

Posuvník elastického obsahu + návod

Posuvník elastického obsahu automaticky upraví šírku a výšku na základe rozmerov nadradeného prvku. Toto je jednoduchý posúvač jQuery. Skladá sa z oblasti snímky v hornej časti a lišty navigačných kariet v spodnej časti. Posuvník prispôsobuje svoju šírku a výšku podľa rozmerov rodičovskej nádoby.

Pri zobrazení na obrazovkách s malou uhlopriečkou sa navigačné karty zmenia na malé ikony:

• Adaptívny dizajn;
• Posúvanie kliknutím myši.

Demo |Stiahnuť

Bezplatný posúvač 3D zásobníka

Experimentálny posúvač, ktorý posúva obrázky v 3D. Tieto dva stohy pripomínajú stohy papiera, z ktorých sa pri posúvaní v strede posúvača zobrazia obrázky:

• Adaptívny dizajn;
• Flip - prechod;
• 3D efekty.

Demo |Stiahnuť

Celoobrazovkový Slit Slider založený na JQuery a CSS3 + tutoriále

Tento tutoriál vám ukáže, ako vytvoriť posúvač s otočkou: myšlienkou je „vystrihnúť“ a zobraziť aktuálnu snímku, keď otvoríte nasledujúci alebo predchádzajúci obrázok. Pomocou animácií JQuery a CSS môžeme vytvoriť jedinečné prechodové efekty:

• Adaptívny dizajn;
• Rozdelený prechod;
• Posuvník na celú obrazovku.

Demo |Stiahnuť

Unislider – veľmi malý posúvač jQuery

Žiadne zbytočné zvončeky a píšťalky, veľkosť menej ako 3 KB. Pre svoje snímky použite ľubovoľný HTML kód, rozšírte ho o pomocou CSS. Všetko, čo súvisí s Unsliderom, je hosťované na GitHub:

• Podpora pre rôzne prehliadače;
• podpora klávesnice;
• Výškové nastavenie;
• Adaptívny dizajn;
• Podpora dotykového vstupu.

Demo | Stiahnuť

Minimálne citlivé snímky

Jednoduchý a kompaktný plugin ( veľkosť je len 1 kB), ktorý vytvára adaptívny posúvač pomocou prvkov vo vnútri kontajnera. ResponsiveSLides.js funguje so širokou škálou prehliadačov vrátane všetkých verzií IE od IE6 a vyššie:

• Plne citlivý;
• Veľkosť 1 KB;
• CSS3 prechody s možnosťou spúšťania cez JavaScript;
• Jednoduché označovanie pomocou zoznamov s odrážkami;
• Schopnosť prispôsobiť prechodové efekty a trvanie zobrazenia jednej snímky;
• Podporuje možnosť vytvárania viacerých prezentácií;
• Automatické a manuálne rolovanie.

Demo |Stiahnuť

Fotoaparát - bezplatný posúvač jQuery

Fotoaparát je doplnok s mnohými prechodovými efektmi a citlivým rozložením. Jednoduché nastavenie, podporované mobilnými zariadeniami:

• Plne citlivý dizajn;
• Podpisy;
• Schopnosť pridávať videá;
• 33 rôznych farebných ikon.

Demo |Stiahnuť

SlidesJS, responzívny doplnok jQuery

SlidesJS je responzívny doplnok pre JQuery (1.7.1 a vyššie) s podporou pre dotykové zariadenia a prechody CSS3. Experimentujte s tým, vyskúšajte niekoľko hotových príkladov, ktoré vám pomôžu zistiť, ako pridať SlidesJS do vášho projektu:

• Adaptívny dizajn;
• prechody CSS3;
• Podpora pre dotykové zariadenia;
• Jednoduché nastavenie.

Demo | Stiahnuť

BX Jquery Slider

Toto je bezplatný responzívny posúvač jQuery:

• Plne citlivý - prispôsobí sa akémukoľvek zariadeniu;
• Horizontálna, vertikálna zmena posuvu;
• Snímky môžu obsahovať obrázky, videá alebo obsah HTML;
• Rozšírená podpora pre dotykové zariadenia;
• Použitie prechodov CSS na animáciu snímky ( hardvérová akcelerácia);
• API spätné volania a úplne verejné metódy;
• Malá veľkosť súboru;
• Jednoduchá implementácia.

Demo |Stiahnuť

FlexSlider 2

Najlepšie citlivý posúvač. Nová verzia bol upravený s cieľom zvýšiť rýchlosť a kompaktnosť.

Demo | Stiahnuť

Galleria – responzívna fotogaléria založená na JavaScripte

Galleria sa používa na miliónoch stránok na vytváranie obrázkových galérií vysoká kvalita. Počet pozitívnych recenzií na jej prácu je jednoducho mimo tabuľky:

• Úplne zadarmo;
• režim zobrazenia na celej obrazovke;
• 100% prispôsobivý;
• Nevyžadujú sa žiadne skúsenosti s programovaním;
• Podpora pre iPhone, iPad a ďalšie dotykové zariadenia;
• Flickr, Vimeo, YouTube a ďalšie;
• Niekoľko tém.

Demo | Stiahnuť

Blueberry – jednoduchý responzívny posúvač obrázkov jQuery

Predstavujem vám posúvač obrázkov jQuery napísaný špeciálne pre responzívny webdizajn. Blueberry je experimentálny doplnok na posúvanie obrázkov s otvoreným zdrojom zdrojový kód, ktorý bol napísaný špeciálne pre prácu s responzívnymi šablónami.

Povedzte mi, je možné vytvoriť posúvač obrázka na pozadí pomocou hladkého posúvača?
Google nepomáha (Dokumentácia hovorí, že obrázky je potrebné umiestniť do bloku div. Ale čo obrázky na pozadí?

@charset utf-8; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr,acronym,address,big,cite,code,del,dfn, em,font,img,ins,kbd,q,s,samp,small, strike,silný,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td(background: none repeat scroll 0 0 transparent; border: 0 none; font- size: 100%; obrys: 0 žiadne; vertikálne zarovnanie: základná čiara;okraj: 0;odsadenie: 0;)tabuľka(zbalenie okraja: zbalenie;medzera medzi okrajmi: 0;) adresa,článok,na stranu,plátno,podrobnosti,nápis,obrázok,päta,hlavička,hskupina, nav, section, Summary(display: block;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box ) a, a:hover, button, button:hover, .anime ( -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; -webkit- prechod:všetko 200ms lineárny prechod:všetko 200ms lineárny kurzor: ukazovateľ) .F_COL_C-START_I-CENTER (zobrazenie: flex; flex-flow: stĺpec nowrap; 12vw;

Pri samostatnom použití poskytujú CSS3 a jQuery širokú škálu možností. Ale ak sa použijú spolu... Potom dokážu urobiť efekty naozaj pôsobivé. Niekedy vzniká problém, ako lepšie a kreatívnejšie usporiadať viacero obrázkov či fotografií so spoločnou témou na jednom mieste. Ako možnosť môžete vytvoriť posúvač (najmä preto, že ich je veľké množstvo). Ale v tomto návode vytvoríme interaktívnu 3D galériu pomocou CSS3 a jQuery. Aby ste na to rýchlo prišli a použili posuvník na svoj web, odporúčam stiahnuť si demo verziu (je dostupná aj v úplných novinkách) a jednoducho to urobiť analogicky v príklade.

Reálny príklad je možné vidieť tu:

Stiahnuť

HTML časť - Zaujímavý posuvník jQuery

Kontajner s triedou hlavné sa použije na zobrazenie pozadia. A potom do bloku s identifikátorom immersive_slider môžete pridať toľko snímok, koľko potrebujete. Tlačidlá na pohyb po snímkach je možné odstrániť, ak ich nepotrebujete:

časť jQuery

Ako ste si mohli všimnúť pri prezeraní príkladu posúvača, existujú rôzne . Všetky nastavenia pre tieto prechody sú vo funkcii vyššie. Pozrime sa na tieto nastavenia:

• animácie— hodnota, ktorá určuje, ako sa budú snímky meniť. Akceptuje hodnoty „fade“, „slide“ alebo „bounce“. A aby ste mohli vykonať vertikálnu zmenu snímok, musíte zadať „slideUp“ alebo „bounceUp“.
• slideSelector— selektor na výber blokov so sklíčkami.
• kontajner— táto vlastnosť definuje hlavný kontajner, ktorého pozadie sa zmení.
• cssBlur Toto je skúšobná funkcia. Ak nechcete nastaviť rozostrenie, potom túto vlastnosť nenastavujte.
• stránkovanie— aktivuje navigáciu.
• autoStart— automatické spustenie prezentácie.