Posuvník s popisom v jquery. Vytvorenie jednoduchého posúvača pomocou jQuery

Potrebujeme jednoduchý posuvník s automatickým posúvaním. Začnime...

Popis fungovania posúvača.

Snímky sa zoradia a po určitom čase sa budú posúvať.

Červený rámik zobrazuje viditeľnú časť posúvača.

Na konci posúvača musíte duplikovať prvú snímku. Je to potrebné na zabezpečenie posúvania z tretej snímky na prvú. Tiež je potrebné pridať poslednú snímku na začiatok, aby ste sa mohli posúvať dozadu od prvej snímky k tretej. Nižšie je znázornené, ako posúvač funguje v smere dopredu.

Keď posúvač dosiahne koniec, jeho kópia zo začiatku posúvača sa okamžite umiestni na miesto poslednej snímky. Potom sa cyklus znova opakuje. To vytvára ilúziu nekonečného posúvača.

HTML značky

Najprv si urobme jednoduchý posuvník s automatickým posúvaním. Na prevádzku sú potrebné dva kontajnery. Prvý nastaví veľkosť viditeľnej oblasti posúvača a druhý je potrebný na umiestnenie posúvačov do nej. Rozloženie posúvača bude vyzerať takto:

Štýly posúvača .slider-box( width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relatívne ; width : 10000px ; height : 210px ; ) .slider img( float : left ; 0 z-index; )

Container.slider-box určuje rozmery posúvača. Pomocou vlastnosti overflow:hidden sa skryjú všetky prvky, ktoré nie sú zahrnuté v oblasti vnútri prvku.

Container.slider je nastavený na veľkú šírku. Je to potrebné, aby sa všetky sklíčka zmestili do linky.

Snímky sú zarovnané pomocou vlastnosti float:left.

Nižšie je schematické rozloženie posuvných blokov.

Skript

Pohyb sklíčok sa bude vykonávať plynulou zmenou vlastnosti margin-left kontajnera.slider.

$(function () ( var width= $(".slider-box" ) .width () ; // šírka posúvača. interval = 4000 ; // interval výmeny posúvača. $(".slider img:last" ) .clone () .prependTo (.slider" ); // Kópia poslednej snímky sa umiestni na začiatok. $() .eq (1) .clone () .appendTo ( "slider" ); // Kópia prvá snímka sa umiestni na koniec. // Container.slider sa posunie doľava o šírku jednej snímky setInterval("animation()" , interval) ; // Spustí sa funkcia animation() na zmenu snímok. ) ); function animation() ( var margin = parseInt($(".slider") .css ("marginLeft" ) ) ; // Offset aktuálneho bloku.slider width= $(.slider-box" ) .width () , / / Šírka posúvača. slidersAmount= $(".slider" ) .children () .length ; // Počet snímok v posúvači. if (margin!= (- width* (slidersAmount- 1) ) ) // Ak je aktuálny snímka nie je posledná , ( margin= šírka-šírka okraja; // potom sa hodnota okraja zníži o šírku snímky. ) else ( // Ak je zobrazená posledná snímka, $(.slider" ) .css ( "margin-left" , - width) ; // potom sa vráti blok.posuvník východisková pozícia, okraj=- sirka* 2 ; ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider je posunutý doľava o 1 snímku. );

Výsledkom bol jednoduchý posuvník s nekonečným automatickým posúvaním.

Dobrý deň, milí čitatelia blogu. Dnes vám predstavím užitočný výber zadarmo posúvač jQuery ov s príkladmi. Ak sa predsa len rozhodnete umiestniť na svoj zdroj posúvač obrázkov, tento výber bude pre vás veľmi užitočný a verte mi, že máte z čoho vyberať. Všetky posúvače majú navyše príklady a každý z nich si môžete vyskúšať v akcii. Vo všeobecnosti vás nebudem rozptyľovať, vyberte si :-)

Jednoduchý posúvač obrázkov jQuery

Najbežnejší a malý posúvač miniatúr na vašom webe.

Posuvník miniatúr v JQuery

Veľmi jednoduchý a zaujímavý posúvač s miniatúrami, ktorý je vhodný pre takmer akýkoľvek dizajn.

Krásny posuvník pre stránku

Veľký a veľmi krásny posúvač obrázkov so zaujímavým posúvaním textu.

Bežný posúvač jQuery

Najbežnejší a najjednoduchší posúvač pre váš zdroj

Veľký posuvník s popisom

Veľkolepý slider, ktorý je nemožné prejsť okolo.

Posuvník a popis obrázka JQuery

Počkajte a štýlový posúvač textu s obrázkami a s krásnym efektom prevrátenia.

Posúvanie obrázkov s radami

Zaujímavé rolovanie obrázkov, ktoré sa posúva plynule a plynulo. V predvolenom nastavení sú obrázky rôznych druhov ovocia, ktoré si môžete zmeniť za svoje.

Posuvník jQuery s veľkými šípkami

Zaujímavý posuvník s veľkými ružovými šípkami, ktoré menia veľkosť zväčšovaním obrázka.

Adaptívny, alebo ak chcete, responzívny webdizajn už nie je len ďalším dizajnovým trendom, je už istým štandardom pre tvorbu webstránok, zabezpečujúcim všestrannosť webstránok a harmonické vizuálne vnímanie na obrazovkách rôznych užívateľských zariadení. Nedávno počas vývoja adaptívna šablóna, musel som čeliť rôznym ťažkostiam pri integrácii určitých posúvačov a galérií obrázkov bez narušenia celkového štýlu dizajnu. Teraz je všetko oveľa jednoduchšie, na internete je obrovské množstvo hotových riešení a poteší najmä to, že väčšina z nich je voľne dostupná, otvorená zdrojový kód.

Vzhľadom na rôznorodosť ponúkaných nástrojov som zostavil krátky prehľad najpozoruhodnejšieho vývoja responzívnych jQuery image sliderov, ktoré sa v poslednom čase objavili a sú distribuované bez akýchkoľvek obmedzení, t.j. úplne zadarmo.

Posuvník WOW

Responzívny posúvač obrázkov jQuery so skvelou sadou vizuálnych efektov (rotácia, roztiahnutie, rozmazanie, špirály, rolety atď...) a mnohými pripravenými šablónami. So vstavaným sprievodcom vložením stránky WOW Slider môžete jednoducho a bez námahy vytvárať úžasné prezentácie v priebehu niekoľkých minút. Webová stránka vývojára obsahuje všetku potrebnú dokumentáciu na nastavenie a používanie doplnku v ruštine, ako aj vynikajúce živé príklady fungovania doplnku. Na stiahnutie je k dispozícii aj samostatný doplnok Wordpress a modul pre Joomla. Som si istý, že tento nádherný slider sa bude páčiť mnohým, začiatočníkom aj skúseným webmasterom.

HiSlider

HiSlider - HTML5, posúvač Jquery a galéria obrázkov, úplne bezplatný doplnok pre osobné použitie na stránkach s populárnymi systémami - WordPress, Joomla, Drupal. Pomocou tohto jednoduchého, ale celkom funkčného nástroja môžete ľahko vytvárať úžasné a živé prezentácie, veľkolepé prezentácie a oznamy o nových správach na stránkach vašich webových stránok. Niekoľko hotových šablón a vzhľadov pre posúvač, úžasné efekty prechodu (zmeny) obsahu, výstup rôzneho multimediálneho obsahu: videá z YouTube a Vimeo, flexibilné vlastné nastavenia atď...

Nivo Slider

Nivo Slider je starý dobrý, všetkým znalým dobre známy, jeden z najkrajších a ľahko použiteľných posúvačov obrázkov. Doplnok JQuery Nivo Slider je možné stiahnuť a používať zadarmo a je licencovaný pod licenciou MIT. Existuje aj samostatný plugin pre WordPress, ale ten je už bohužiaľ platený a za jednu licenciu budete musieť zaplatiť 29 dolárov. Je lepšie urobiť malú mágiu so súbormi tém WP a pripojiť bezplatnú verziu jQuery doplnku Nivo Slider na svoj blog, pretože na internete je veľa informácií o tom, ako to urobiť.
Čo sa týka funkčnosti, tu je všetko v poriadku v úplnom poriadku. Na prácu sa používa knižnica jQuery v1.7+, krásne efekty prechody, jednoduché a veľmi flexibilné nastavenia, adaptívne rozloženie, automatické orezávanie obrázkov a mnoho ďalšieho.

Myšlienka posúvača bola inšpirovaná vývojármi, ktorí sú dobre známi svojim štýlom prezentácie Apple produkty, kde sa mení niekoľko malých objektov (obrázkov) kliknutím na vybranú kategóriu s jednoduchým efektom animácie. Codrops vám ponúka podrobnú lekciu, ako vytvoriť tento posúvač, kompletné rozloženie značiek Html, sadu CSS pravidlá a spustiteľný plugin jQuery, ako aj nádherný živý príklad použitia posúvača.

Štrbinový posúvač

Posuvník obrázkov na celej obrazovke pomocou JQuery a CSS3 + podrobný návod na integráciu doplnku do webových stránok. Cieľom je rozdeliť otvorenú aktuálnu snímku s konkrétnym obsahom pri prechode na nasledujúci alebo predchádzajúci obsah. Pomocou JQuery a CSS animácie môžete vytvoriť jedinečné prechody medzi snímkami. Responzívne rozloženie posúvača zaisťuje, že vyzerá rovnako dobre na všetkých obrazovkách rôzne druhy užívateľské zariadenia.

Posuvník elastického obsahu

Posuvník obsahu, ktorý sa automaticky prispôsobuje na šírku a výšku v závislosti od veľkosti nadradeného kontajnera, v ktorom sa nachádza. Celkom jednoducho implementovateľný a flexibilný v nastaveniach, posuvník beží na JQuery, s navigáciou v spodnej časti, pri zmene veľkosti obrazovky smerom nadol sa navigácia zobrazuje vo forme ikon. Veľmi podrobná dokumentácia (návod na tvorbu) a živé príklady použitia.

Posuvník 3D zásobníka

Experimentálna verzia posúvača, ktorý ukazuje obrázky s prechodmi z 3D roviny. Obrázky sú rozdelené do dvoch vodorovných stĺpcov, pričom pomocou navigačných šípok môžete každý nasledujúci obrázok zmeniť a prejsť do stavu zobrazenia. Vo všeobecnosti nič zvláštne, ale samotná myšlienka a technika vykonávania sú celkom zaujímavé.

Veľmi jednoduchý posúvač obrázkov jQuery na celú obrazovku so 100% odozvou. Činnosť posúvača je založená na prechodoch CSS (vlastnosť prechodu) v spojení s kúzlom jQuery. Hodnota maximálnej šírky je predvolene nastavená na 100 %, takže veľkosť obrázkov sa bude meniť v závislosti od zmien veľkosti obrazovky. V dizajne nie sú žiadne špeciálne animačné efekty ani ozdoby, všetko je jednoduché a navrhnuté pre bezproblémovú prevádzku.

Minimálne snímky

Názov hovorí sám za seba, je to možno jeden z najľahších a najminimálnejších posúvačov obrázkov jQuery, s ktorými som sa stretol (doplnok 1 kb). ResponsiveSlides.js je malý doplnok JQuery, ktorý vytvára prezentácie pomocou prvkov vo vnútri kontajnera. Funguje so širokou škálou prehliadačov, vrátane všetkých verzií IE - známej brzdy pokroku, od IE6 a vyššie. Práca využíva prechody CSS3 v spojení s javascriptom kvôli spoľahlivosti. Jednoduché používanie značiek neusporiadaný zoznam, nastavenie prechodov a časových intervalov, automatické a manuálne ovládanie prepínania snímok, ako aj podpora niekoľkých prezentácií naraz. Tu je také hravé „dieťa“.

fotoaparát

Fotoaparát je bezplatný doplnok JQuery na organizovanie prezentácií na webových stránkach, ľahký posúvač s mnohými prechodovými efektmi, 100% responzívne rozloženie a veľmi jednoduché nastavenia. Dokonale sa hodí na obrazovky všetkých používateľských zariadení (PC monitory, tablety, smartfóny a Mobilné telefóny). Možnosť predvedenia vloženého videa. Automatická zmena snímky a manuálne ovládanie pomocou tlačidiel a bloku miniatúr obrázkov. Takmer kompletná galéria obrázkov v kompaktnom prevedení.

bxSlider jQuery

Ďalší pomerne jednoduchý responzívny posúvač v jQuery. Na svoje snímky môžete umiestniť akýkoľvek obsah, video, obrázky, text a ďalšie prvky. Rozšírená podpora dotykové obrazovky. Použitie prechodových animácií CSS. Veľké množstvo rôznych variácií prezentácií a kompaktných obrázkových galérií. Automatické a manuálne ovládanie. Prepínajte snímky pomocou tlačidiel a výberom miniatúr. Malá veľkosť zdrojový súbor, veľmi jednoduchá konfigurácia a implementácia.

FlexSlider 2

FlexSlider 2 – Aktualizovaná verzia posúvača s rovnakým názvom s vylepšenou odozvou, minifikáciou skriptu a minimalizáciou pretavenia/prekresľovania. Plugin obsahuje základný posuvník, ovládanie posúvania s miniatúrami, vstavané šípky doľava a doprava a spodnú navigačnú lištu vo forme tlačidiel. Možnosť zobrazenia videa v snímkach (vimeo), flexibilné nastavenia (prechody, dizajn, časový interval), plne adaptívne rozloženie.

Galleria

Dobre známy a pomerne populárny responzívny doplnok jQuery na vytváranie vysoko kvalitných obrázkových galérií a posúvačov. Rozhranie posúvača vďaka ovládaciemu panelu vizuálne pripomína známy prehrávač videa, doplnok obsahuje niekoľko rôznych dizajnových tém. Podpora pre vložené videá a obrázky z obľúbených služieb: Flickr, Vimeo, YouTube a ďalšie. Podrobná dokumentácia o nastavení a používaní.

Čučoriedkový

Jednoduchý bezplatný posúvač obrázkov jQuery bez ozdôb napísaný špeciálne pre responzívny webový dizajn. Blueberry je experimentálny open source doplnok jQuery. Minimalistický dizajn, žiadne efekty, iba plynulo vyskakujúce obrázky, ktoré sa po určitom čase nahradia. Všetko je veľmi jednoduché, nainštalujte, pripojte a choďte...

jQuery popeye 2.1

Veľmi kompaktný posúvač obrázkov jQuery s prvkami Lightbox. Vďaka flexibilným rozmerom sa dá veľmi ľahko integrovať do akéhokoľvek kontajnera, do jediného vstupu vo forme miniatúr, pri najetí kurzorom myši alebo kliknutí na ne sa aktivuje lightbox so zväčšeným obrázkom a ovládacími prvkami. Je vhodné umiestniť takýto posuvník do bočných panelov na prezentáciu produktov alebo noviniek. Vynikajúce riešenie pre stránky s veľkým množstvom informácií.

Sekvencia

Voľný responzívny posúvač s pokročilými prechodmi CSS3. Minimalistický štýl, 3 motívy dizajnu, Každý rám sa posúva vodorovne, zobrazuje sa v strede, obrázok ide doľava, podpis vpravo, miniatúry sú duplikované v pravom dolnom rohu. Stránkovanie zobrazení produktov, ktoré sa majú zobraziť v každom rámci. Súčasťou ovládacích prvkov sú aj tlačidlá dozadu a dopredu. Podpora od všetkých moderné prehliadače.

Prejdite prstom

Funkčne aj nastavením veľmi jednoduchý posúvač obrázkov, medzi nastaveniami je zmena rýchlosti striedania snímok, aktivácia manuálneho režimu (ovládacie tlačidlá sú aktivované), plynulé premietanie snímok. Tento posúvač má právo na existenciu a zaujal ma len preto, že existuje; nenašiel som v tomto vývoji nič mimoriadne zaujímavé, možno som to nehľadal dobre)))

Responzívny posúvač obrázkov

Taký krásny, prispôsobivý posúvač obrázkov od Vladimíra Kudinova, súdruhovia. Solídny, dobre navrhnutý nástroj s jasnými príkladmi a podrobné pokyny o vytvorení, inštalácii a používaní. Adaptívny dizajn, pekné tlačidlá a zelené šípky, všetko je celkom pekné a pokojné, bez tlaku.

FractionSlider

Bezplatný posuvný doplnok JQuery s efektom paralaxy pre obrázky a textové snímky. Animácie snímok majú viacero hodnôt zobrazenia s plnou kontrolou v každom nastavení časovania a animácie. Schopnosť animovať niekoľko prvkov na snímke naraz. Môžete nainštalovať rôzne metódy animácie, blednutie snímok alebo prechody z určitého smeru. Automatické zobrazenie a manuálne ovládanie pomocou navigačných šípok, ktoré sa vyskakujú po umiestnení kurzora myši nad obrázok. 10 typov efektov animácie snímok a oveľa viac...

Recenzia sa ukázala byť pomerne rozsiahla, ale nie dostatočne informatívna veľká kvantita predmetné produkty. Všetky podrobnosti a podrobné popisy funkčnosť toho či onoho pluginu sa dozviete priamo na stránkach vývojárov. Môžem len dúfať, že som niekomu uľahčil hľadanie tohto veľmi potrebného nástroja na vytváranie farebných posuvníkov obrázkov na stránkach ich webových stránok.

Napadlo vám niekedy, že by bolo pekné vedieť pracovať so šablónami v ruskom jazyku? Len sa na chvíľu zamyslite. Nestrácajte čas prácou so šablónami v anglickom jazyku. Ponáhľame sa vás potešiť, že ho teraz nájdete na trhu TemplateMonster. Text ku každému z nich bol napísaný rukou. A, samozrejme, všetky hotové riešenia sa neuveriteľne jednoducho používajú.

So všetkou úctou, Andrew

Ak potrebujete na svoju stránku pridať kvalitný posúvač obrázkov jQuery, tak v tomto článku nájdete popis požadované pluginy. 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ú sprevádzané podrobnou dokumentáciou, takže pridávanie nových efektov alebo funkcií do nich nebude zložité. 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.

JQuery image slidery Jssor Responsive Slider

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 odlišné typy: snímky, 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álne efekty(domino, otočiť, rozostriť, prevrátiť a blikať, vyletieť, rolety) 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 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 na tvorbu jednoduchý dizajn internetový obchod, 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é zariadenia. 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ť iba 1 KB), ktorý vytvára responzívny posúvač pomocou prvkov vo vnútri kontajnera. ResponsiveSLides.js funguje s veľké množstvo prehliadače 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žívanie prechodov CSS na animáciu snímok (hardvérová akcelerácia);
  • Callback API 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 zdrojovým kódom, ktorý bol napísaný špeciálne pre prácu s responzívnymi šablónami.

Posuvník sa stal veľmi populárnym pomerne nedávno. Približne polovica všetkých šablón obsahuje posúvač.

Posuvník je oblasť webu (zvyčajne stredná časť, hneď za hlavičkou). Jeho cieľom je urobiť stránku informatívnejšou, „živou“, snahou popísať výhody firmy alebo produktu na niekoľkých obrázkoch.

Existuje veľa možností na vytvorenie posúvača. Pozrime sa na niektoré z najpopulárnejších. Ku každej metóde budú poskytnuté zdroje.

Možnosť 1. Posúvač v JQuery (JavaScript)

Toto je fotografia toho, čo získate touto možnosťou (zdroj s týmto príkladom je uvedený nižšie)

Aby posuvník fungoval, musíte urobiť nasledovné:

  • Zahrňte javascript (súbory Java) do značiek hlavičiek
  • Súbor štýlu je opäť v hlavičkových značkách
  • Na mieste, kde potrebujete zobraziť posúvač, vyplňte značku (ako v príklade vyššie)
Možnosť #2. Posuvník založený na CSS

Aby sa stránka nezaťažovala zbytočnými skriptami, existujú skvelý spôsob urobte posuvník založený iba na CSS (t. j. čisto na štýloch). Pozrime sa na príklad.

Príklad č.1

Príklad č.2

Príklad č.3

Toto by sa malo stať.