> >

Štýly posúvača

Tlačidlá zaujmú svoje miesto vďaka absolútne umiestnenie vzhľadom na kontajner.slider-box

Slider-box( position : relatívne ; width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relatívne ; width : 10000px ; height : 210px ; ) .slider img( float : left; ) .slider .prev , .slider-box .next( position : absolute ; top : 100px ; display : block ; width : 29px ; height : 29px ; kurzor : pointer ; ) .slider-box .prev( left : 10px ; background : url ( ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next ( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; )

Skript

Posuvník sa posúva automaticky. Štandardne ide pohyb zľava doprava, no v prípade potreby môžete zmeniť smer jeho pohybu pomocou premennej kurzu. Pri zmene hodnoty premennej z 1 na -1 sa zmení smer posúvača.

Obrázky v posúvači by sa nemali meniť, keď je kurzor v posúvači. Načo to je? Všetko je jednoduché. Ak sa kurzor myši nachádza na posúvači, znamená to, že návštevníka stránky zaujíma jej obsah. Momentálne nemeňte snímky automaticky.

$(funkcia () ( var slider = $(.slider" ) , sliderContent = slider.html () , // Obsah posúvača slideWidth = $(".slider-box") .outerWidth() , // Šírka posúvača slideCount = $(".slider img") .length , // Počet snímok prev = $(".slider-box .prev" ) , // tlačidlo Späť ďalej = $(.slider-box .next" ), // Tlačidlo dopredu interval posuvníka = 3300 , // Interval výmeny snímok animateTime = 1000 , // Čas na zmenu snímok kurz = 1 // Smer pohybu posúvača (1 alebo -1) margin = - slideWidth; // Počiatočný posun snímok$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Kópia poslednej snímky sa umiestni na začiatok.$(".slider img" ) .eq (1) .clone () .appendTo (".slider" ) ; // Kópia prvej snímky sa umiestni na koniec.$(".slider" ) .css ("margin-left" , - slideWidth) ; // Container.slider je posunutý doľava o šírku jednej snímky. funkcia nextSlide() ( // Spustí funkciu animation() na vykonanie prechodu medzi snímkami. interval = window.setInterval (animate, sliderInterval) ; ) funkcia animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Ak posuvník dosiahol koniec slider.css (( "marginLeft" :- slideWidth) ); // potom sa block.slider vráti do pôvodnej polohy margin=- slideWidth* 2 ; ) else if (margin== 0 && kurz==- 1 ) ( // Ak je posuvník na začiatku a je stlačené tlačidlo späť slider.css (( "marginLeft" :- slideWidth* slideCount) ); // potom sa posuvník bloku presunie do konečnej polohy margin=- slideWidth* slideCount+ slideWidth; ) inak ( // Ak vyššie uvedené podmienky zlyhajú, margin = margin - slideWidth* (priebeh) ; // hodnota okraja je nastavená na zobrazenie ďalšej snímky) slider.animate (( "marginLeft" : okraj) , animateTime) ; // Block.slider sa posunie doľava o 1 snímku.) funkcia sliderStop() ( // Funkcia na zastavenie posúvača window.clearInterval(interval); )prev.click(function()( // Stlačené tlačidlo Späť var kurz2 = kurz; kurz = -1; animovat() ; // Volanie funkcie animate(). kurz = kurz2 ; )); next.click(function()( // Stlačené tlačidlo Späť if (slider.is (":animated" ) ) ( return false ; ) // Ak nenastane žiadna animácia var kurz2 = kurz; // Dočasná premenná na uloženie hodnoty samozrejme kurz = 1 ; // Nastavenie smeru posúvača sprava doľava animovat() ; // Volanie funkcie animate(). kurz = kurz2 ; // Premenná kurzu sa vráti na svoju pôvodnú hodnotu)); slider.add(next) .add(prev) .hover(function()( // Ak je kurzor myši v rámci posúvača sliderStop() ; // Funkcia sliderStop() sa volá na pozastavenie posúvača), ďalšia snímka); // Keď kurzor opustí posúvač, animácia sa obnoví. dalsiSlide() ; // Volanie funkcie nextSlide(). } ) ;

Ukázalo sa, že taký posúvač s tlačidlami „vpred“ a „späť“

Od autora: Napriek fámam o údajnej „smrti“ časti webových stránok viditeľnej bez rolovania, potreba dobrého posuvníka nikde nezmizla. Buďme na chvíľu úprimní – posúvače sú zábavné. Navyše nič iné, na rozdiel od presúvania obsahu, nespôsobuje v používateľovi „wow“ efekt. Všetky posuvníky sú súpravou niekoľkých snímok, ktoré sa navzájom nahrádzajú a je mimoriadne dôležité, aby bol kód posuvníka čo najľahší. Tu príde vhod jQuery.

Pozrite sa na 20 posuvníkov jQuery z Envato Market a uvidíte, že existujú posuvníky, ktoré sú viac než len blok posuvníkov.

1. RoyalSlider – Galéria obrázkov s dotykovou obrazovkou s jQuery

Teraz citlivý posúvač, ktorý je tiež priateľský k dotykovej obrazovke, znamená oveľa viac, ako býval. RoyalSlider spája obe funkcie: prispôsobivosť a prácu s dotykovými obrazovkami. Dobrá voľba, keďže galéria je napísaná v HTML5 a CSS3.

Niekoľko zaujímavých funkcií:

Ako si vytvoriť webovú stránku sami?

SEO optimalizácia

Vysoká prispôsobiteľnosť

Viac ako 10 štartovacích šablón

Pre prechody CSS3 existuje rezerva

Podľa môjho názoru je najúžasnejšou funkciou „modulárna skriptová architektúra“, ktorá vám umožňuje zakázať nepotrebné veci z hlavného súboru JS, čím sa znižuje hmotnosť. RoyalSlider, galéria obrázkov dotykovej obrazovky jQuery, je robustný posúvač JavaScriptu, ktorý by mal byť nevyhnutnou súčasťou súpravy nástrojov každého vývojára.

2. Doplnok jQuery reagujúci na revolúciu posúvača

Nie je jednoduché urobiť niečo „revolučné“ so sliderom. Pokiaľ ide o posúvače, existuje veľa funkcií, ktoré k nim môžete pridať. Slider Revolution je však naozaj dobrý pokus. Medzi posuvníkmi jQuery táto inštancia spĺňa všetky vaše možné požiadavky.

Zoznam funkcií posúvača je taký dlhý, takže uvediem len to najlepšie:

Paralaxový efekt a vlastná animácia

Neobmedzené množstvo vrstiev a snímok s odkazmi

pripravené na použitie, hlboko prispôsobiteľné štýly

a oveľa viac

Možnosť pridať obrázok, vstavaný prehrávač videa a odkazy z sociálne siete robí Slider Revolution jednou z najflexibilnejších a najprispôsobiteľnejších možností na webe.

3. LayerSlider Responsive jQuery slider plugin

Názov „LayerSlider Responsive jQuery Slider Plugin“ v skutočnosti tomuto posúvaču nezodpovedá.
200+ 2D a 3D prechodov snímok zatočí s každým.

Pár pozoruhodných vlastností:

13 vzhľadov a 3 typy menu

Schopnosť umiestniť pevný obrázok na hornú časť posúvača

A záložný jQuery

A oveľa viac

Rovnako ako v prípade predchádzajúceho posúvača je možné pridať takmer akýkoľvek obsah, dokonca aj rezidentný multimediálny obsah HTML5. LayerSlider oživuje posúvače a je tiež veľmi pekný.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow je celkom jednoduchý posuvník, ktorý neobetuje žiadnu zo základných funkcií.

Schopnosti:

Popisy, vkladanie textu atď.

Náhľad a rôzne možnosti prezerania komponentov

Časovač s oneskorením pre jeden posuvník alebo pre všetky

Viacnásobné prechody pre všetky snímky alebo rôzne prechody pre každý jednotlivo

jQuery Banner Rotator / Slideshow má v porovnaní s ostatnými jQuery slidery len základné funkcie, ale nemali by ste na to zabúdať.

5. All In One Slider – Responzívny doplnok jQuery Slider

Každý slider, ktorý sa objaví na webe, má svoju jedinečnú víziu a rieši akékoľvek problémy vo svojom odbore. Ale tento nie. All In One Slider možno nazvať „all inclusive“.

Myslím si, že väčšina webových vývojárov a dizajnérov má osvedčené riešenie, no stále hľadajú niečo nové. A toto „niečo nové“ zahŕňa:

Bannerový rotátor

náhľadový banner

Banner zoznamu videí

Posuvník obsahu

Kolotoč

Všetky typy posuvníkov podporujú väčšinu, ak nie všetky funkcie požadované posuvníkmi jQuery. Bude All In One Slider vaším All Inclusive?

6. UnoSlider – Citlivý posúvač dotykovej obrazovky

Ak váš posúvač nereaguje a nepodporuje dotykové obrazovky, potom máte nesprávny posúvač. UnoSlider má pravdu.

Tento posúvač si našiel svoje miesto na slnku medzi jednoduchosťou a bohatou sadou funkcií. Funkcie:

Podpora témy

12 vopred pripravených tém

40 prechodov

Podpora IE6+

Všetky funkcie so zameraním na dizajn a štýl, vďaka čomu je UnoSlider skvelým posúvačom obsahu s možnosťou pridávať motívy.

7. Hlavný posúvač – posúvač dotykovej obrazovky jQuery

Hľadáte „jeden posúvač jQuery, ktorý bude vládnuť všetkým“? Vyskúšajte Master Slider – posúvač dotykovej obrazovky jQuery pre rôzne veľkosti obrazovky…

Pokiaľ ide o dobrý dizajn, tento príklad je jedným z najlepších:

Viac ako 25 šablón

Hardvérové ​​zrýchlené prechody

Podpora dotyku a potiahnutia

A oveľa viac

Interaktívne prechody, animované vrstvy a aktívne body určite upútajú vašu pozornosť. Master Slider je umelecké dielo.

8. TouchCarousel – posúvač a posúvač obsahu jQuery

TouchCarousel láka na bezplatnú podporu a aktualizácie. To však nie sú všetky funkcie tohto ľahkého posúvača kolotoča jQuery.

Ak názov obsahuje slovo „touch“, môžete hádať, že posuvník je plne citlivý a podporuje dotyk. Ďalšie vlastnosti:

SEO optimalizácia

Inteligentné automatické prehrávanie

Hardvérovo zrýchlené prechody CSS3

Prispôsobiteľné používateľské rozhranie a 4 vzhľady pre Photoshop

TouchCarousel je vďaka svojmu jedinečnému fyzickému posúvaniu snímok úplne novou úrovňou skúseností na mobilných zariadeniach.

9. Advanced Slider – jQuery XML Slider

Posuvníky jQuery možno použiť nielen na webové stránky. Môžu byť tiež užitočné vo webových aplikáciách. Pokročilý posúvač vám to umožňuje.

Vďaka značeniu HTML alebo XML vytvára tento pokročilý posúvač trvalý dojem:

Animované vrstvy a inteligentné video

100+ prechodov a 150+ vlastných vlastností

15 vzhľadov posúvača, 7 vzhľadov posúvača a natívna podpora lightboxu

Navigácia pomocou klávesnice, dotyková podpora a úplné prispôsobenie

A oveľa viac

Avšak najviac najlepšia vlastnosť je to Advanced Slider - jQuery XML Slider API, vďaka ktorému je slider ideálnou voľbou pre vašu webovú aplikáciu.

10. Posuvník jQuery Efekt priblíženia/oddialenia Plne reaguje

Jeden z tých posuvníkov jQuery, vďaka ktorým si budete chcieť pozrieť ukážku skôr, ako začnete čítať o jeho funkciách. Chcete len pochopiť, čo znamená tento "efekt priblíženia/oddialenia".

Efekt priblíženia je dosť slabý, ale dodáva obrazu pocit kontroly a skutočný dotyk, zatiaľ čo zvyšok posúvača je statický. Vlastnosti posúvača:

Prechody vrstiev CSS3

Možnosť ukončenia animácie pre vrstvy

Možnosti pevnej šírky, celej obrazovky a plnej šírky

Animovaný text s formátovaním HTML a CSS

Väčšina sliderov sa snaží zabaliť čo najviac efektov a jQuery Slider Efekt Priblíženie/Oddialenie Plne reagujúci má iba efekt Kena Burnsa, ale je dobre implementovaný.

11. jQuery Carousel Evolution

Podobne ako spomínaný Advanced Slider – jQuery XML Slider, aj jQuery Carousel Evolution má svoje vlastné API, ktoré možno použiť na vylepšenie funkčnosti alebo integráciu jazdca do iného projektu.

Ako si vytvoriť webovú stránku sami?

Aké technológie a znalosti sú dnes potrebné na vlastnú tvorbu webových stránok? Učte sa intenzívne!

S obrázkami, značkami HTML, videami YouTube a Vimeo získate aj:

SEO optimalizácia

9 štýlov kolotoča

Efekty tieňov a odrazov

Veľkosť obrázka je možné upraviť, vpredu aj vzadu

jQuery Carousel Evolution je jednoduchý kolotoč s mnohými možnosťami využitia.

12 Sexy posúvač

Sexy Slider už nie je taký sexi ako predtým. Vzhľadom na svoj vek je však tento slider dôveryhodný.

Posuvník na prvý pohľad nie je veľmi pôsobivý, ale ak je dobre nakonfigurovaný, dokonale zapadne do vášho dizajnu. Schopnosti:

Automatické prehrávanie snímok

Popisky obrázkov

Nepretržité prehrávanie snímok

6 prechodových efektov

Sexy Slider čaká na vás, aby ste odomkli jeho plnú silu a uvoľnili jeho potenciál.

13. jQuery Image & Content Scroller s Lightboxom

So všetkými týmito dizajnmi a podporou pre mobilné zariadenia dotykové obrazovky pekné vidieť posúvač jQuery, na ktorý som nezabudol stolné počítače.

jQuery Image & Content Scroller w/ Lightbox okrem iného podporuje vstup z klávesnice a koliesko myši:

Horizontálna a vertikálna orientácia

Textové titulky vnútri alebo mimo posúvača

Možnosť nastaviť určitý počet súčasne viditeľných snímok

Vložené obrázky, Flash, iframe, Ajax a vložený obsah

Posuvník má tiež zabudovaný lightbox. Voliteľne v jQuery Image & Content Scroller w/ Lightbox nemôžete spustiť samotný posúvač, ale spustiť lightbox samostatne.

14. Priehľadný - Responzívny rotátor / posúvač bannerov

Väčšina posuvníkov jQuery má svoj vlastný dizajn. Môžete si ho prispôsobiť, ale niekedy chcete, aby bolo všetko vo vnútri posúvača. Vašu pozornosť predstavuje Translucent.

Posuvník má veľa predvolieb. Možno budete musieť nastaviť určité nastavenia a je to. Schopnosti:

6 rôzne štýly

4 prechodové efekty

2 prechody potiahnutím prstom

Prispôsobiteľné tlačidlá a štítky

Rovnako ako ostatné, aj tento posuvník je dotykový, citlivý a hardvérovo akcelerovaný. Translucent je posuvník s minimálnym dizajnom, ktorý kladie do popredia samotný obsah.

15. FSS - Posuvný webový doplnok na celú obrazovku

Chcete vytvoriť stránku na celú obrazovku so snímkami? Potom potrebujete FSS.

Vlastne s pomocou daný jQuery slider je veľmi jednoduché vytvoriť stránku s posúvačom na celú obrazovku. Schopnosti:

podpora AJAX

Posuvník

Podpora technológie priameho prepojenia

2 rôzne prechodové efekty

Za pozornosť stojí aj podpora klávesnice a 11-stranový sprievodca. Skutočným dojmom je však hmotnosť FSS, iba 5Kb.

16. Zozo Accordion - Citlivý posúvač dotykovej obrazovky

Ďalší príklad posúvača jQuery zameraného na štýl, ktorý robí svoju prácu dobre. Zozo Accordion je nutnosťou pre každého, kto hľadá dobrý akordeónový posúvač s možnosťou meniť štýly.

Táto krása animácií CSS3 má tiež celkom širokú škálu funkcií:

Horizontálny a vertikálny akordeón

Sémantické HTML5 a SEO optimalizácia

Podpora pre dotyk, klávesnicu a WAI-ARIA

Viac ako 10 vzhľadov a 6 rozložení

A oveľa viac

Zozo akordeón bezplatná podpora a neustále aktualizácie, ako aj všetky funkcie, ktoré chcete vidieť v akordeóne jQuery.

17.JQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin je skôr podobný jednoduchá animácia, nie na posúvači. Namiesto zobrazenia jednej snímky po druhej táto inštancia postupne vyplní obrazovku snímkami, až kým v oblasti nezostane žiadne miesto, a potom prejdete na ďalšiu snímku.

Animácia CSS3 funguje v rámci Animate.css, je ľahká, má viacero vrstiev a je vhodná pre mobilné zariadenia. Viaceré funkcie:

K dispozícii je tiež možnosť navigácie drag and drop pokles. Doplnok jQuery Responsive OneByOne Slider Plugin poháňa kolotoč Twitter Bootstrap.

18. Accordionza - jQuery Plugin

Neexistuje jednoduchší posúvač jQuery ako tento. Na fungovanie potrebujete iba 3 kB posuvníka, vďaka čomu je Accordionza najľahším posuvným prvkom akordeónu.

Ak sa vám nepáčia tri možnosti štýlu, môžete si HTML a CSS upraviť sami. Schopnosti:

Navigácia pomocou klávesnice

Jednoduché prispôsobenie efektov a tlačidiel

Technika progresívneho vylepšovania – funguje bez JavaScriptu

Majte na pamäti, že Accordionza môže zobrazovať mnoho variácií zmiešaného obsahu, vďaka čomu je mimoriadne flexibilná.

19. strongySlider – citlivý viacúčelový posúvač

MightySlider je skutočne výkonný posúvač. Dá sa použiť nielen ako jednoduchý posúvač obrázkov, ale aj ako jednosmerný posúvač na celú obrazovku s navigáciou v položkách ponuky. S ním môžete vytvoriť skvelý jednostránkový web.

Pod kapotou nájdete veľa možností:

Podpora klávesnice, myši a dotyku

Hardvérovo zrýchlené prechody CSS3

Vyčistite platné značky a optimalizáciu SEO

Neobmedzené množstvo snímok, vrstiev titulkov a efektov

API je veľmi výkonné a priateľské pre vývojárov, čo sa otvára rôznymi spôsobmi jeho použitie. MightySlider je vynikajúci progresívny posúvač jQuery s čistým a dobre komentovaným kódom.

20. Parallax Slider – Responzívny doplnok jQuery

Parallax Slider funguje ako jQuery Responsive OneByOne Slider Plugin a umožňuje vám animovať každú vrstvu samostatne v rámci tej istej snímky. Môžete animovať všetky snímky alebo dokonca len jednu pridaním animácie paralaxy.

Dodáva sa so 4 posúvačmi odlišné typy, všetko s paralaxovým efektom. Rovnako ako ostatné posúvače jQuery má:

Plná prispôsobiteľnosť

Dotyková podpora

Plne citlivé, neobmedzené vrstvy

Automatické prehrávanie, slučka, nastavenie výšky a šírky a časovač

Animované vrstvy nie sú len text alebo obrázky. Môžete tiež pridať videá YouTube, Vimeo a HTML5. Parallax Slider - ďalší dobrý príklad ako môžete simulovať efekty Flash ešte lepšie ako samotný Flash, ktorý je tiež podporovaný na všetkých zariadeniach.

Záver

Je zaujímavé sledovať, ako jQuery slidery vyrástli z niečoho, čo jednoducho nahrádza jeden obrázok druhým, na obrovskú sadu kreatívnych nástrojov. Teraz existujú 3D posuvníky, posuvníky paralaxy, posuvníky na celú stranu, responzívne posuvníky a tie, ktoré je možné zobraziť na stolných počítačoch aj smartfónoch.

Ak sa vám nepáči niektorý z posuvníkov v tomto zozname, vždy si môžete prejsť návodom na kód jQuery na Envato a vyvinúť niečo úplne nové a jedinečné.

Alebo si pozrite ďalšie posúvače na trhu Envato, z ktorých si môžete vybrať. Aký je váš obľúbený posuvník jQuery a prečo?