Adaptive, ili ako želite, odgovoran web dizajn sada nije samo još jedan dizajnerski trend, ovo je već određeni standard za razvijanje web lokacija, pružajući univerzalnost web stranica, harmonične vizuelne percepcije na ekranima različitih korisnika. Nedavno, pri razvoju prilagodljivi predložakMorao sam se baviti raznim poteškoćama u integraciji određenih klizača i galerija slika, bez prekida ukupnog stila dizajna. Sada je sve mnogo lakše, u mreži je ogroman broj gotovih rješenja i ono što je posebno zadovoljno, većina njih je u slobodnom pristupu, s otvorenim izvorom.

Zbog raznolikosti predloženih alata, sastavio sam mali pregled najistaknutijih razvoja adaptivnih jQuery klizača slika koji su se pojavili u posljednjim mjesecima i distribuirali bez ikakvih ograničenja, I.E. Apsolutno besplatno.

Wow klizač.

Adaptivni jQuery klizač slika s veličanstvenim setom vizuelnih efekata (okreta, polasci, zamućenje, spirale, roletne itd. ...) i mnogo gotovih obrazaca. Uz pomoć čarobnjaka za umetanje ugrađenom u wowear, možete lako i lako stvoriti zadivljujuće prezentacije u minutima. Web stranica programera ima svu potrebnu dokumentaciju o postavljanju i korištenju dodatka na ruskom, odličnim živim primjerima utičnice. Dostupno i za preuzimanje odvojenog dodatak Wordpress I modul za Joomla. Uvjeren sam da će mnogi voljeti ovaj prekrasan klizač, i početnici i vodič Webmether.

ISLider.

HTML5, jQuery klizač i galerija slika, apsolutno besplatni dodatak za ličnu upotrebu na web lokacijama koje rade popularni sustavi - Wordpress, Joomla, Drupal. S ovim jednostavnim, ali prilično funkcionalnim instrumentom, lako možete stvoriti na stranicama naših web lokacija, nevjerovatnih i svijetlih prezentacija, spektakularnih prezentacija i najava novih poruka. Nekoliko gotovih uzoraka i kože za klizač, zapanjujući sadržaj tranzicijskih efekata (promjena), izlaz raznih multimedijskih sadržaja:, video s YouTubeom i Vimeo, fleksibilnim prilagođenim postavkama itd ...

Nivo klizač.

Nivo klizač je stara vrsta, dobro poznata svima koji su u subjektu, jedan od najljepših i jednostavnijih klizača slika. JQuery Nivo klizač Plugin besplatan je za preuzimanje i daljnje korištenje, distribuirati se pod licencom MIT-a. Tu je i zaseban dodatak za WordPress, ali nažalost već plaćen i odbacit će za to će imati 29 dolara po licenci. Bolje je napraviti malo zalogaj sa WP tematskim datotekama i pričvrstiti besplatnu jQuery verziju NIVO klizačkog dodatka na vaš blog, korist informacija kako to učiniti u mreži dovoljno.
Što se tiče funkcionalne, sve je u savršenom redu. JQuery v1.7 + biblioteka koristi se za rad, prekrasne prijelazne efekte, jednostavne i vrlo fleksibilne postavke, adaptivni izgled, automatsko obrezivanje slike i još mnogo toga.

Ideja klizača inspirisana je programerima, dobro poznatim cijelom stilu Appleovih proizvoda, gdje se nekoliko malih predmeta (slike) mijenja da bi kliknula odabranu kategoriju sa jednostavnim učinim animacije. Codrops prikazuje na raspolaganju detaljnu lekciju za kreiranje ovog klizača, potpuno usklađivanje HTML marke, skupa CSS pravila i izvršne jQuery dodatak, kao i prekrasan životni primjer korištenja klizača.

Slit klizač.

Slider s celom ekranu na jQuery i CSS3 + Detaljnom udžbeniku o integraciji dodatka na stranici stranice. Ideja je smanjiti otvoren trenutni klizač s određenim sadržajem prilikom prelaska na sljedeći ili prethodni sadržaj. Od koristeći jQuery I CSS animacije Možete stvoriti jedinstvene prelaze između slajdova. Adaptivni izgled klizača osigurava da će ekrane pregledati jednako dobro na ekranima. različite vrste Prilagođeni uređaji.

Klizač elastičnog sadržaja.

Klizač sadržaja koji se automatski podešava u širini i visini, ovisno o veličini matičnog spremnika u kojem se nalazi. Prilično jednostavan dizajn i fleksibilni klizač u jQuery postavki, s navigacijom na dnu, prilikom promjene veličine ekrana do smanjenja, navigacija se prikazuje kao ikone. Vrlo detaljna dokumentacija (kreiranje lekcije) i življenja primjera upotrebe.

3D slagač klizač

Eksperimentalna verzija klizača koji pokazuje slike sa prijelazima iz 3D ravnine. Slike su razbijene u dva horizontalna hrpa, koristeći se navigacijsku strelicu i prelazi svaku naknadnu sliku na stanje gledanja. Općenito, ništa posebno, već je sama ideja i tehnika izvršenja prilično zanimljiva.

Vrlo jednostavan, 100% adaptivni i cjelokupni jQuery klizač slika. Rad klizača zasnovan je na CSS prijelazima (tranzicija imovine) u snopu sa jQuery magijom. Vrijednost maksimalne širine je 100% instalirana prema zadanim postavkama, na taj način će se mijenjati veličina slika ovisno o veličinama ekrana. Ništa posebne efekte animacije i radosti u dizajnu, sve je jednostavno i naoštreno na neprekinuti rad.

Minimalni tobogani

Ime govori za sebe možda je jedan od najlakših i minimalističkih jQuery klizača slika koje sam upoznao (dodatak u 1kb). Odgovorilides.js. -Kornet jQuery dodatak koji stvara prezentaciju koristeći elemente unutar spremnika. Radi sa širokim spektrom preglednika, uključujući sve verzije IE - čuvene kočnice za napredak, iz IE6 i više. Rad koristi CSS3 prijelaze u snopu sa JavaScript-om, za pouzdanost. Jednostavno označavanje pomoću neuređene liste, postavljanje prijelaza i vremenskih intervala, automatski i ručna kontrola Prebacivanje dijapozitiva, kao i podrška za nekoliko prezentacija. Ovo je takva frisky "beba".

Kamera.

Kamera - besplatno jQuery. Dodatak za organizovanje prezentacije na stranicama web lokacija, lagani klizač s mnoštvom tranzicijskih efekata, sa 100% adaptivnim izgledom i vrlo jednostavne postavke. Izvrsno se uklapaju na ekrane bilo kojeg korisničkog uređaja (PC monitori, tablete, pametne telefone i mobiteli). Sposobnost demonstracije ugrađenog videa. Automatska promjena klizača i ručna kontrola pomoću tipki i bloka slika. Praktično puna galerija slika u kompaktnom dizajnu.

bxsLider jQuery.

Još jedan, prilično jednostavan adaptivni klizač na jquery. U dijapozitivima možete postaviti bilo koji sadržaj, video, slike, tekst i druge elemente. Proširena podrška za osjetilne ekrane. Koristite CSS-animacijske prijelaze. Veliki broj različitih varijacija u prezentaciji prezentacija i kompaktnih galerija slika. Automatska i ručna kontrola. Prebacivanje dijapozitiva pomoću gumba odabirom sličica. Mala veličina izvorne datoteke vrlo je jednostavna u postavkama i implementaciji.

Flexslider 2.

FlexSlider 2 - Ažurirana verzija Klizač istog imena, s poboljšanom stopom odgovora, ministarstvo skripte i minimiziranje preusmeravanja / prekrivanja. Dodatak uključuje osnovni klizač, kontrolirajući kontrolu slajdova pomoću sličica, ugrađene strelice lijevog desnog i donjeg navigacijskog okna u obliku tipki. Sposobnost izlaza u video klizačima (Vimeo), fleksibilna podešavanja parametara (tranzicije, dizajn, vremenski interval), potpuno adaptivni izgled.

Galleria.

Dobro poznata i prilično popularna prilagodljivi dodatak jQuery za stvaranje visokokvalitetnih galerija i klizača slika. Klizač sučelje, zahvaljujući svojoj kontrolnoj ploči, vizualno podsjeća na uobičajeni video uređaj, sastav dodatka uključuje nekoliko različitih ukrasa. Ugrađeni video i slike sa popularne usluge: Flickr, Vimeo, YouTube i drugi. Detaljna dokumentacija Postavljanjem i upotrebom.

Borovnica.

Jednostavno bez frizura besplatnih jQuery klizač slika, napisano posebno za adaptivni web dizajn. Borovnica je eksperimentalni jQuery Open Source Plugin. Minimalistički dizajn, nema efekata, samo glatko skočne slike zamjenjuju jedno drugo nakon određenog vremenskog perioda. Sve je vrlo jednostavno, stavljeno, povezao sam i naprijed ...

jQuery Popeye 2.1.

Vrlo kompaktan jQuery image klizač sa Lightbox elementima. Zbog svojih fleksibilnih veličina, vrlo je ugrađen u bilo koji spremnik u jedan post u obliku minijature, kada zadržite pokazivač miša ili kliknite na koji je Lightbox aktiviran s povećanim elementima. Povoljno je postavljati takav klizač u bočne ploče, za prezentaciju proizvoda ili vijesti. Odlično rješenje za web lokacije sa velikom količinom informacija.

Redoslijed

Besplatan adaptivni klizač sa proširenim CSS3 prijelazima. Minimalistički stil, 3 tema ukrasa, svaki okvir tobogan u vodoravnom smjeru koji se pojavljuju u sredini slike lijevo, potpis udesno, minijature su duplicirani u donjem desnom uglu. Prekidanje stranica prezentacije proizvoda za gledanje u svakom okviru. Kontrola takođe uključuje dugmad nazad i nazad. Podržati sve moderni preglednici.

Prevucite prstom.

Postoji potpuno promotivni klizač slika i funkcionalnosti i na postavkama, iz postavki postoji promjena brzine promjene klizača, povezivanjem ručnog načina (aktivirani su kontrolni tasteri), neprekidni prezentacija. Ovaj klizač ima pravo biti i privukao me je samo činjenicom da je to, nisam našao ništa posebno zanimljivo u ovom razvoju, možda sam loše tražio))

Odgovarajući klizač slike.

Prekrasan takav adaptivni klizač slika Vladimira Kudinovog. Dobro, visokokvalitetni obrađeni alat, opremljen vizuelnim primjerima i detaljna uputstva o kreiranju, instaliranju i korištenju. Adaptivni dizajn, Slatki gumbi i pucači zelene boje, sve je prilično slatko i mirno, bez pritiska.

FroactionLider.

Besplatni jQuery klizač dodataka s paralaksom efektom za slike i tekstualne dijapozitive. Klizni animacija ima nekoliko prikazanih vrijednosti s potpunom kontrolom u svakom trenutku i parametrima animacije. Sposobnost animacije odjednom nekoliko elemenata na slajdu. Možete postaviti razne metode Animacije, nestanak dijapozitiva ili prijelaza iz određenog smjera. Automatski prikaz i ručna kontrola pomoću navigacijskog strelica Pop-up kada lebdite. 10 vrsta animacijskih efekata pojave slajdova i još mnogo toga ...

Pregled je bio prilično opsežan, ali nije dovoljno informativnog događaja zbog velikog broja proizvoda koji se razmatraju. Svi detalji i detaljni opisi. funkcionalnost Jedan dodatak možete direktno učiti na stranicama programera. Ostaje da se nadam da je neko ublažio potragu za najpotrebnim alatom, za stvaranje šarenih klizača za slike na stranicama njihovih web lokacija.

Jeste li ikad mislili da bi bilo lijepo moći raditi s ruskim predlošcima? Samo razmisli na minut. Nema vremena za rad na radu sa predlošcima engleskog jezika. Žurimo se da vas ugodimo sa činjenicom da templateMonster sada može naći na templateMonster markeru. Tekst za svakog od njih napisan je ručno. I, naravno, sva gotova rješenja nevjerojatno su jednostavna za korištenje.

Uz svu poštovanje, Andrew

Prije nekog vremena počeo sam savladati jQuery. Mislim da svi znaju da je takozvana najpopularnija biblioteka za razvoj i stvaranje skripta (skripta) na JavaScript-u. S njom je vrlo lako stvarati spektakularne i interaktivne elemente stranice.

U ovom članku želim reći kako stvoriti jednostavan univerzalni klizač koristeći jQuery. U stvari, mreža je vrlo veliki broj Raznolikost gotovih klizača, koje ponekad izgledaju vrlo primamljivo i prilično funkcionalno, ali mi ćemo to učiniti ispočetkama.

Dakle, koje karakteristike našeg klizača na jQuery (koje sam zvao HWSLider) mogu biti zabilježene?

• Jednostavna upotreba i dizajn - Hteo sam da stvorim jednostavan skript bez greda, tako da nisam koristio animacije na CSS3, a kôd se pokazao vrlo svestranim i razumljivim.
• Mogućnost umetanja u dijapozitive obje slike i bilo koji HTML kôd.
• Mogućnost kretanja kroz slajdove kao u redoslijedu (naprijed - natrag) i odaberite svaki klizač (1,2,3,4 ...)
• Automatsko pojačavanje veza (prethodni - sljedeći i sa brojevima klizača). Trebate samo umetnuti pravu količinu divova, a sve ostalo će izračunati sebe. Pa, može se primijetiti da je broj slajdova neograničen.

Skripta je kompatibilna sa svim modernim preglednicima: tj. Opera, Firefox, Safari, Chrome (jer klizač ne koristi CSS3).

Krenimo od HTML marku. Na pravom mjestu HTML stranica ili predložak morate umetnuti.

Ovdje je sve jednostavno, kao što vidite, možete umetnuti što više slajdova stvaranjem novih div. Možete ih umetnuti unutra hTML kod, kao što je slika ili blok sa tekstom. Ne zaboravite samo povezati sam biblioteku na jQuery u svim JS - skriptama. Ako ne znate kako, pogledajte u primjeru.

# Klizač - klizač i gumbi za platnu * / širinu: 660px;) #Slider (klizač za omotač * / širina: 640px; visina: 360px; preliva; #eee solid 10px; položaj: relativna; ) .Slide (/ * Slide * / Širina: 100%; visina: 100%;).) .Sli-linkovi (/ * gumbi za promjenu klizanja * / margin-top: 10px; Tekst-Poravnavanje: Centar;). Kontrolni klizanje (margina: 2px; ekranu: širina: 16px; visina: 16px; preliv: sakriven; tekstualni uvlaka: -9999px; Pozadina: URL (radiobg.png) centar donjeg ne-ponavljanja;) .Sli -Links. Slide: HOVER (kursor: pokazivač; pozadina: centar; centar;). Slide.Control-slajd.Active (pozadina: Centar za vrh;) #prewbutton (/ * link ") Sledeći "i" PEDID "* / displej: širina: 15px; visina: 100%; Pozicija: Apsolut; Top: 0; preliv: -999px; Pozadina: URL (arrowbg.png) LIJEVI CENTAR Ne ponavljanje; neprozirnost: 0,8; z-indeks: 3; obris: nijedan! Važan;) #prewbutton (lijevo: 10px (desno: 10px; pozadina : URL (arrowbg.png) desni centar br. ") #Prewbutton: lebdeći, #nextbutton: lebde (neprozirnost: 1;)

Zapitajmo se detaljnijem. Prvo dajemo glavnu jedinicu identifikatoru "klizač-omota", željenoj širini. Budući da su svi ostali blokovi umetnuti u njega, tada se može postaviti visina, ovisit će o tome šta će biti unutra. Zatim trebamo postaviti veličinu spremnika u kojem će slajdovima biti. Ovo je - #Slider. Pitamo mu širinu i visinu, kao i, na primjer, granicu u 10 piksela. Evo širine - 640px je manje od širine roditelja, jer dodajemo granicu širinom 10px s desne strane i lijevo. Širina samih slajdova (.Slide) također ovisi o širini ovog div-a.

I zadnji: Moramo postaviti položaj: relativni za klizni spremnik kao klizače iznutra - sa apsolutnim pozicioniranjem. Za same slajdove u CSS-u postavljaju se samo širina i visina. Preostala nekretnina su postavljena već u jQuery skriptu.

Selector.Sli-linkovi je blok u kojem će biti tipka za prijelaz na potrebnu slajd. Ovi tasteri su jednostavni elementi vrste brojkoji se automatski ubacuju u potrebnu količinu, zajedno i sa svojim roditeljskim linkovima. Za dugmad pitamo se pruža prekrasan pogled, naime pravimo svako dugme kvadratnih, poravnajte ih sve u centru, kao i, zahvaljujući overflow: hidden i text-indent: -9999px, uklonimo tekst, ostavljajući samo ikone pozadinu koja se također mijenjaju kada lebdite na ovaj element kursora. Radi praktičnosti koristio sam sprites, koji su smanjili broj slika.

Slijedi se aktivno dugme. Samo promijenite pozadinsku poziciju. Zatim ponovo povucite veze da biste otišli u dokaze i prethodne slajdove. Možete im dati bilo koji dizajn, kao i dugmad. Ove veze se automatski ubacuju unutar #slidera. Ali da se mogu vidjeti, pitao sam im apsolutni pozicioniranje i gornji sloj (Z-Index: 3) tako da se prikazuju iznad dijapozitiva. Mislim da je sa CSS-om sve je jasno ovdje i jednostavno: možete promijeniti gotovo sve osobine napraviti klizač koliko vam je potrebno.

Sada razmotrimo samu skripte:

Var hwslidespeed \u003d 700; Var Hwtimeout \u003d 3000; Var hwneedlinks \u003d istinito; $ (Dokument) .ready (funkcija (E) ($ ( "Slide"). CSS (( "Position":. "Apsolutno", "Top": "0", "lijevo":. "0")) Sakrij () .eq (0) .Show (); var slidenum \u003d 0; var klizna; klizna \u003d $ ("# klizač .Slide"). Veličina (); var animlide \u003d funkcija (strelica) (klizač); $ (".Slide"). EQ (slidenum) .fadeout (hwslidespeed); ako (strelica \u003d\u003d "sljedeća") (ako (slidenum \u003d\u003d (klizač \u003d 0;) drugo (slidenum ++) ) else if (strelica \u003d\u003d "prew") (if (slidenum \u003d\u003d 0) (slidenum \u003d slidecount-1;) drugi (sliderum- \u003d 1) else) (SlideNum \u003d strelica;) $ ( ". Slide"). EQ (SlideNum) .Fadein (HwSlideSpeed, Rotator); $ ( "Control-Slide.Active.") Removeclass ( "Active");.. $ ( ". Control-Slide") EQ (SlideNUM) .addClass ( "Active ");) ako (hwneedlinks) (var $ linkarrow \u003d $ (" ") .Prependto (" # Klizač "); $ (" # nextButton ") kliknite (funkcija (.) (AnimSlide (" Next ");)) $ ( "#PrewButton") Kliknite (funkcija () (AnimSlide ( "Prew");))). Var $ adderspan \u003d ""; $ ( "Slide") Svaki (funkcija (Index..) ($ adderspan + \u003d " "+ indeks +""; }); $("

Prvo, postavke se čuvaju u varijablama: HwSlideSpeed \u200b\u200b- Slide Power Speed, Hwtimeout - Time After Automatski Slide Change, HWneedLinks - Kontrolira "Next" i "Prethodno" veze - ako je vrijednost ove varijable je Istina, ove veze će se prikazati, a ako False, u skladu s tim, neće (kao na glavna stranica Moj blog).

Dalje, postavili smo potrebne CSS svojstva Za slajdove pomoću metode. CSS (). Blokira sa dijapozitivima koje namećemo jedno drugom koristeći apsolutno pozicioniranje, a zatim ih sakrijte sve.Hide (), a zatim pokažite samo prvo. Varijabla slidenuma je broj aktivnog slajda, odnosno šaltera.

Glavna logika našeg jQuery klizača je funkcija AnimLide. Prihvaća jedan parametar. Ako na njega dajemo "sljedeće" ili "PREW", tada će usloviti operateri raditi i prikazati se sljedeći ili prethodni slajd. Ako smo pali kao vrijednost slike, tada će ovaj broj postati aktivni točak i on će se prikazati.

Dakle, ova značajka sakriva trenutni div, izračunava novo i pokazuje.

Imajte na umu da je metoda .fadein (), što čini prividni aktivni klizač, postavlja se drugim argumentom. Ovo je takozvana funkcija povratnog poziva. Izvodi se kada se pojavi slajd u potpunosti. U ovaj slučaj To se radi kako bi se omogućilo automatsko pomicanje klizanja. Funkcija rotatora definirana u nastavku uzrokuje ponovno funkciju AnimLide da biste prešli na sljedeći kliznik kroz vremenski interval koji vam je potreban: Dobili smo zatvaranje koje pruža konstantno pomicanje.

Sve funkcionira u redu, ali moramo zaustaviti izvršenje automatizacije ako korisnik donese kursor na klizač ili pritisne tipke. Da biste to učinili, stvorena je varijabilna pauza. Ako je njegova vrijednost pozitivna - istina, onda automatsko prebacivanje neće biti. Koristeći metodu. Pozovite (), navedite: Clear TIMER ako se pokreće - CleartimeOut (klizna) i instalirajte pauzu \u003d TRUE. I nakon uklanjanja kursora isključite pauzu i pokrenite zatvaranje rotatora ().

Uz to, moramo stvoriti nove stavke na stranici i smjestiti ih na pravo mjesto. Upotreba svakog () ciklusa za svaki klizanje (Div-A s klasom.Slide), kreirajte raspon element unutar kojeg je broj klizni broj. Ovaj se broj koristi u funkciji animacije, da biste prešli na tobogan s ovim brojem. Zamotajte sve u Div s pravim klasama, a na kraju ćemo dobiti takav marku:

Čini se zašto kreiramo marku unutar skripte, a ne u HTML kodu?. Činjenica je da na primjer, ako se skripte isključe - neće vidjeti elemente koji neće raditi, a to ga neće uvesti u zbrku. Osim toga, kod je pojednostavljen, što nije loše za SEO.

Kao rezultat toga, markup klizača će izgledati ovako nešto (kao tobogan, koristio sam sliku, i set 5 komada):

< >

0 1 2 3

Ispod možete vidjeti kako naš jQuery klizač radi na demo stranici, a preuzeti sve potrebne izvore.

Za kraj, nekoliko trenutaka o integraciji ovog klizača s Drupalom. Možete dodati ovaj kod u datoteku predloška, \u200b\u200bna primjer, u Page.Tpl.php, i postavite skriptu za pojedinca JS datoteke na temu. JQuery u Drupal je omogućena po defaultu, ali radi u režimu kompatibilnosti (). Postoje dvije modifikacije. Ili zamotajte cijeli JS kod:

(Funkcija ($) (// Svi vaš kod ...)) (jQuery);

ili zamijenite $ simbole u cijelom jQuery skriptu. Volim ovo:

. JQuery (dokument) .ready (Slide) CSS (( "Pozicija": "Absolute", "top": "0", "lijevo": "0")) Sakrij () .EQ (0) .show (. ); var sliderum \u003d 0; var slidetime;. slidecount \u003d jQuery ( "# Klizač .Slide") veličina (); var animslide \u003d funkcija (strelica) (// et.

U primjeru je prva metoda već implementirana.

Hvala na čitanju! Ostavite komentare, vratite se. , A također možete pretplatiti na RSS na prvu primati ažuriranja blog!

Dodano:To nije sve. Pročitajte. Tamo ćemo dodati nove mogućnosti ovoj skriptu.

1. Odličan jQuery prezentacija

Veliki spektakularni prezentacija pomoću jQuery tehnologija.

2. jQuery "Plug" Parusel "

Skalabilna prezentacija pomoću jQuery. Možete podesiti veličina za slideshow koji najviše odgovara.

3. jQuery utikač "Slidejs"

Klizač slika sa opis teksta.

4. Plugin "Jslidernews"

5. CSS3 jQuery klizač

Kada pokažete pokazivač na navigacijskom strelicom, pojavljuje se okrugla sličica sljedećeg slajda.

6. Slatki jQuery klizač "Prezentacijski ciklus"

jQuery klizač sa indikatorom za učitavanje slike. Postoji automatska promjena klizanja.

7. JQuery dodatak "Parallax klizač"

Klizač sa volumetrijskim pozadinskim efektom. Vrhunac ovog klizača u pozadini pozadine, koji se sastoji od nekoliko slojeva, od kojih se svaka pomakne sa različita brzina. Kao rezultat toga, pokazuje imitaciju surround efekta. Izgleda vrlo lijepo, možete se uvjeriti u to. U takvim preglednicima prikazan je više glatkog efekta kao: Opera, Google chrome., Tj.

8. Svježi, lagani jQuery klizač "BXSLIDER 3.0"

Na demonstraciji na demo "primjerima" možete pronaći veze na sve moguće opcije Koristite ovaj dodatak.

9. jQuery klizač slika, dodatak "slajds"

Moderan jQuery klizač će sigurno moći ukrasiti vaš projekt.

10. jQuery dodatak za prezentaciju "Easy Slides" v1.1

Jednostavan za korištenje jQuery dodatka za kreiranje prezentacije.

11. Plugin "JQuery Slidy"

Jednostavan jQuery dodatak u raznom dizajnu. Postoji automatska promjena klizanja.

12. jQuery CSS galerija sa automatskim promjenama klizača

Ako posjetitelj u određenom vremenu ne pritisne strelice "Naprijed" ili "Natrag", Galerija će se automatski početi pomicati.

13. jQuery klizač "Nivo klizač"

Vrlo profesionalan visokokvalitetni svjetlosni dodatak sa važeći kod. Postoji mnogo različitih efekata promjene dijapozitiva.

14. jQuery klizač "Mobilyslider"

Svježi klizač. jQuery klizač sa različitim efektima promjene slike.

15. jQuery dodatak "klizač²"

Jednostavan klizač sa automatskim promjenama klizanja.

16. Svježi javascript klizač

Klizač sa automatskim smjenom slike.

Dodatak za implementaciju prezentacije s automatskim promjenama klizanja. Moguće je upravljati zaslonom koristeći sličice slika.

jQuery CSS. Klizač slike koristeći Nivoslider dodatak.

19. jQuery klizač "JShowoff"

Dodatak za rotiranje sadržaja. Tri opcije za upotrebu: Bez navigacije (s automatskim pomicanjem u formatu prezentacije), s navigacijom u obliku tipki, s navigacijom u obliku slika.

20. Portfolio efekte zatvarača

Svježi jQuery dodatak za fotografski portfelj. Galerija je implementirala zanimljiv učinak promjene slika. Fotografije zamijenite jedni druge efektom sličnim radu zatvarača sočiva.

21. Easy JavaScript CSS klizač "Tinyslider 2"

Implementacija klizača slika sa korištenje JavaScripta i CSS.

22. Vjetar Tinycircleslider klizač

Moderan okrugli klizač. Prelaz između slika se vrši povlačenjem oko klizača kruga kao crvenog kruga. Odlično se uklapaju u vašu stranicu ako ste u dizajnu, koristite okrugle elemente.

23. Klizač slika na jQuery

Jednostavan klizač "Klizni komplet". Klizač je predstavljen u različitim dizajnom: vertikalno i horizontalno. Također implementirao različite vrste navigacije između slika: Korištenje tipki "Naprijed" i "Natrag" pomoću kotača miša pomoću miša kliknite na slajd.

24. Galerija sa minijaturama "Klizni komplet"

Galerija "Klizni komplet". Minijaturni za pomicanje vrši se i u vertikalnom i horizontalnom smjeru. Prelaz između slika se vrši pomoću: kotača miša, klikova miša ili minijaturni kursor.

25. jQuery klizač klizača klizača

Vertikalni i horizontalni klizač sadržaja na jQueryju.

26. jQuery prezentacija "Klizni komplet"

Prezentacija sa automatskim promjenama klizanja.

27. Jednostavan profesionalni JavaScript CSS3 klizač

Uredni klizač na jQuery i CSS3, kreiran 2011.

jQuery prezentacija minijaturama.

29. Jednostavno prezentacija jQuery

Prezentacija s navigacijskim tipkama.

30. Šokirani prezentacija JQuery "Skitter"

jQuery dodatak "Skitter" za stvaranje zapanjujuće prezentacije. Dodatak podržava 22 (!) Pogled na različite efekte animacije prilikom promjene slika. Može raditi sa dvije navigacijske opcije za slajdove: koristeći dijapozitive brojeve i sa sličicom. Obavezno pogledajte demonstraciju, vrlo kvalitetan nalaz. Rabljene tehnologije: CSS, HTML, jQuery, PHP.

31. prezentacija "nespretno"

Funkcionalni prezentacija. U obliku slajdova može izvršiti: jednostavne slike, Slike sa potpisima, slike sa skočnim savjetima, video snimci. Možete koristiti strelice, veze za klizanje brojeva i tipki s desne / lijevo na tipkovnici za navigaciju. Projekcija se vrši u nekoliko verzija: sa sličicama i bez njih. Da biste pogledali sve opcije, prošetajte linkovima Demo # 1 - DEMO # 6 Smješten na vrhu na demo stranici.

Vrlo originalno dizajnerske klizačke slike nalikuju ventilatoru. Animirana premještanja klizanja. Navigacija između slika vrši se pomoću strelica. Također pruža automatski pomak koji se može uključiti i isključiti pomoću gumba za reprodukciju / pauzu koja se nalazi na vrhu.

Animirani jQuery klizač. Pozadinske slike automatski se skaliraju kada se promjene prozora pregledača. Za svaku sliku lebdi blok sa opisom.

34. Klizač "Flux klizač" na jQuery i CSS3

Novi jQuery klizač. Nekoliko cool animiranih efekata prilikom promjene dijapozitiva.

35. jQuery "Jwitch" dodatak

Animirana jQuery galerija.

Slaba prezentacija na jQuery s automatskim promjenama klizanja.

37. Nova verzija dodatka "Slidedeck 1.2.2"

Klizač profesionalnog sadržaja. Opcije su moguće sa automatskim premještanjem, kao i opcijom pomoću kotača miša za prijelaz između slajdova.

38. jQuery klizač "sudo klizač"

Jednostavna kleveta na jquery. Vrlo mnogo opcija implementacije: vodoravna i vertikalna promjena slika, s vezama do dijapozitivnog broja i bez njih, sa potpisima slika i bez, različitih efekata promjene slike. Postoji funkcija automatske promjene klizanja. Veze za svu uzornu implementaciju mogu se naći na demo stranici.

39. jQuery CSS3 prezentacija

Prezentacija s minijaturama podržava način automatskog smjene klizanja.

40. jQuery "Flux klizač"

Klizač sa više efekata promjene slike.

41. Jednostavan jQuery klizač

Moderan klizač slike na jQueryju.

Trebate jednostavan klizač s automatskim pomičnim pomicanjem. Donesite ...

Opis rada klizača.

Klinovi će biti izgrađeni u redu, a nakon određenog vremena će se kretati.

Crveni okvir prikazuje vidljivi dio klizača.

Na kraju klizača morate duplicirati prvi slajd. Potrebno je da se pomaknete od trećeg slajda do prvog. Također morate dodati zadnju slajd na početak da biste se kretali obrnuti smjer Od prvog slajda do trećeg. Ispod je rad klizača u smjeru naprijed.

Kad klizač dođe do kraja, njegova kopija s početka klizača odmah se postavlja u mjesto zadnjeg slajda. Ciklus se zatim ponovi ponovo. To stvara iluziju beskonačnog klizača.

HTML označavanje

Za početak, napravimo jednostavan klizač sa automatskim pomičnim pomicanjem. Za njegov rad su vam potrebni dva kontejnere. Prvi će postaviti veličinu vidljivog područja klizača, a drugo je potrebno za smještaj klizača u njemu. Oznaka klizača imat će sljedeći obrazac:

> >

Stilovi klizač

.Slider-box (širina: 320px; visina: 210px; preliv: Skriveni;) .Slider (Pozicija: relativna; širina: 210px;). (float: lijevo; z-indeks: 0;)

Kontejner.Slider-box postavlja dimenzije klizača. Koristeći preliv: Skriveno svojstvo, svi elementi su skriveni koji nisu uključeni u područje unutar elementa.

Za spremnik. Klizač je postavljen velikom širinom. Neophodno je da se svi slajdovi u njemu uklope.

Klizni su usklađeni s plovkom: lijevo svojstvo.

Ispod je šema lokacija klizačkih blokova.

Scenarij

Klizni pokret će se izvesti koristeći koristeći glatka promjena Margin-lijeva svojstva Kontejner .Slider.

$ (Funkcija () (var širina \u003d $ (". Klizač"). Šivica (); // klizač širine. Interval \u003d 4000; // Razmakni premještanje intervala. $ ("Klizač img: zadnje") .clone () .prependto (".Slider"); // Kopija posljednjeg slajda postavlja se na početku. $ () .eq (1) .clone () .appendto (".Slider"); // Na kraju se postavlja kopija prvog slajda. // kontejner. Klizač se prepusti širine jednog slajda. setinterval ("Animacija ()", interval); // Funkcija animacije () je počela vršiti preklizaj. )); Funkcija animacija () (var margina \u003d parseint ($ (". Klizač") .css ("marginleft")); // trenutni blok offset.slider Širina \u003d $ (". klizač"). šivica () // klizač širine. SliderSamount \u003d $ (". Klizač") .Celdren (). Dužina; // broj slajdova u klizaču. Ako (marža! \u003d (- širina * (klizač - 1)))) // ako trenutni slajd nije zadnji, (margina \u003d širina margina; // vrijednost marže smanjuje se na širinu slajda. ) Drugo ( // ako je prikazan posljednji slajd, $ (". Klizač") .css ("margin-lijevo", - širina); // a zatim block.slider se vraća na početni položaj, margina \u003d - širina * 2; ) $ ("Klizač") .amIma ((Margilleft: Margina), 1000); // block.slider smjene lijevo na 1 klizač. } ;

Kao rezultat toga, ispostavilo se jednostavan klizač sa beskonačnim automatskim pomicanjem.

Jednostavno, lagano (21kb u komprimiranom obliku) klizač napisan na čistom JavaScriptu koji nema nikakve ovisnosti, I.E. Radi bez jquery.

Ispitano u sljedećim preglednicima:

• Chrome 26.0.
• Firefox 20.0.
• Safari 5.1.7
• IE 10.
• Opera 16.0.

Postoji nepotpuna podrška IE8 / 9 (nema efekata).

Karakteristike

• Možete dodati neograničen broj klizača na stranicu, čak i stavite jedan u drugu.
• Mijenja veličine od ovisnosti o sadržaju, ali moguće je zabraniti.
• Navigacija tipkovnicom - Kada je kursor na klizaču, možete prebaciti klizače sa strelicama.
• Podrška za mobilni dodir.

Veza

Prije zatvaranja oznake Morate se povezati sLIDR.JS. ili sLIDR.MIN.JS. Datoteka.

HTML označavanje

sLIDR.JS. Može raditi sa bilo kojim inline, inline blok, blok predmeti koji imaju atribut ID-a. Dozvoljeno je koristiti bilo koju kćernu elementu prvog nivoa sa atributom Data-Slidr, na primjer:

• apple.
• banana.
• kokos.

apple.

banana.

kokos.

JavaScript.

Nakon veze sLIDR.JS. Globalni SLIDR objekt bit će dostupan. Najlakši način za stvaranje SLIDR-a:

SLIDR.Create ("SLIDR-ID"). Početak ();

Pozovite zadatak svih postavki:

SLIDR.Create ("SLIDR-ID" (nakon: Funkcija (E) (CONSOLE.LOG ("U:" + e.in.slidr);), prije: funkcija (e) (CONSOLE.LOG ("OUT:" + E.ut.slidr);), krušne mrvice: TRUE, kontrole: "ugao", smjer: "Vertikalna", bleda: FALSE, tastatura: istina, preliva: TEME: ("CUBE ":" 0,5s lakoća "), Dodirnite: TRUE, Tranzicija:" Cube ")). Početak ();

Postavke

Sve dostupne postavke za SLIDR.JS su prikazane u donjoj tabeli.

Parametar	Vrsta	Tiho.	Opis.
Poslije	funkcija.		funkcija povratnog poziva nakon promjene klizača
Prije.	funkcija.		funkcija povratnog poziva prije promjene klizača
Mrvice hljeba.	bool	lažan	Pokažite mrvice hljeba za kontrolu slajdova. Tačno ili netačno.
Kontrole.	niz	granica.	Strelice lokacije za kontrolu slajdova. Obrub, ugao ili nijedan.
Smjer.	niz	horizontalno	Zadani smjer za nove slajdove. Horizontalna ili h, vertikalna ili v.
Izblijediti	bool	tačno.	Omogućite efekt zatamnjenja za promjenu dijapozitiva (blijed-in / out). Tačno ili netačno.
Tastatura.	bool	lažan	Uključite pomak slatkiša pomoću tastature. Tačno ili netačno.
Prelijte.	bool	lažan	Omogućite preliv za blok sa klizačem. Tačno ili netačno.
Pauza	bool	lažan	Nemojte automatski mijenjati slajdove kad pokažete miš (morate pokrenuti auto ()). Tačno ili netačno.
Tema.	niz	#Fff.	Boja klizača upravljačkih elemenata (krušne mrvice i strelice). #hexcode ili rgba (vrijednost).
Vrijeme	objekt.	{}	Primjena prilagođenih vremena animacije za primjenu. ("Tranzicija": "Timing").
Dodir	bool	lažan	Dodirnite Upravljanje dodirom na mobilnim uređajima. Tačno ili netačno.
Tranzicija.	niz	linearan	Efekat promjene dijapozitiva. Kocke, linearna, bleda ili nijedna.

Obrnute funkcije poziva nakon i prije i prije dobivanja sljedećih podataka:

(ID: "SLIDR-ID", u: (EL: # , SLIDR: "Data-klizač", trans: "" Prijelaz ", dir:" Umjera "), napolju: (el: # , SLIDR: "Slidr-out", trans: "Tranzicija", dir: "Uređaj")))

Slider.js Global API.

Globalni Slidr imena za SLIDR pruža sljedeće funkcije:

/ ** * Trenutna verzija * @return (string) major.minor.patch. * / funkcija verzija () (); / ** * Dostupni efekti tranzicije. * @return (niz) prijelaza. * / Funkcionalni prijelazi () (); / ** * stvara i vraća SLIDR. * Dvaput pozivanje ove funkcije na istom elementu vratit ćete već stvoreni SLIDR objekt. * @Param (string) ID elementa za SLIDR. * @Param (objekt \u003d) opt_settings Postavke za klizač. * / Funkcija kreira (ID, opt_settings) ();

Klizač API

// SLIDR inicijalizacija sa svojim var s \u003d SLIDR.Create Podešavanja ("SLIDR-API-demo", (krušne mrvice: TRUE, preliv: istina); // Dodajte vodoravne slajdove sa standardnim efektom tranzicije. // duplicirati element "jednog" niza na kraju lifta SLIDR // pomaknite slajdove beskonačno S.ADD ("H", ["jedan", "Dva", "One"]); // Dodajte vertikalni točak s "kocke" prijelaznim efektom. S.ADD ("V", ["Pet", "Četiri", "tri", "Pet"], "Cube"); // pokrenite klizač. S.Start ();

Kratak post

Var S \u003d SLIDR.Create ("Slidr-API-demo", (krušne mrvice: TRUE, preliv: True))). Dodaj ("H", "Trojica", "One"]) .add ("V", ["Pet", "Četiri", "Tri", "Pet"], "Cube") .Start ();

Potpuni popis funkcije SLIDR.JS API prikazan je u nastavku.

/ ** * Započnite Slidr! * Automatski pronalazi dijapozitive za stvaranje ako ništa nije dodano prije pozivanja (). * @Param (string) opt_start `podataka-klizanja-slidr` ID za početak. * @return (ovo) * / funkcija start (opt_start) (); / ** * Provjerite možemo li kliznuti. * @Param (string) sljedeći smjer ("gore", "dolje", "lijevo", "desno") ili `podatkovni lik. * @return (boolean) * / funkcija otkazati (sljedeće) (); / ** * Slide! * @Param (string) sljedeći smjer ("gore", "dolje", "lijevo", "desno") ili `podatkovni lik. * @return (ovo) * / funkcija slajd (sljedeći) (); / ** * dodaje skup slajdova. * @Param (string) smjer `horizontal || H` ili `vertikalna || v`. * @Param (array) IDS-a `DATA-SLIDR` ID" da dodaju u Slidr. Slids mora biti direktna djeca Slidr-a. * @Param (string \u003d) opt_transion; Zadano. * @Param (boolean \u003d) opt_overwrite hoće li prebrisati postojeće klizne mapiranja / prijelazi ako se dogode sukobi. * @Return (ovo) * / funkcija, IDS, opt_transion, opt_overwrite) (); / ** * automatski Pređite na sljedeći vremenski spoj nakon određenog vremena. Pozivi Start () ako se već ne zove. * @Param (int \u003d) opt_msec Broj milijuna između svake prelaze. * @Param (string \u003d ) Opt_direction "gore", "dolje", "lijevo", ili "desno". Zadano za "desno". * @Param \u003d) opt_start `` Data-Slidr` ID za početak (samo radi ako je samo ako je samo ako je samo radio Pozvan u STARTR). * @Return (ovo) * / Funkcija Auto (OPT_MSEC, opt_direction, opt_start) (); / ** * Zaustavite automatsku tranziciju ako je uključen. * @return (ovo) * / function stop () (); / ** * Postavite prilagođene internim vremenom. * @Param (string | objekt) Prijelaz bilo prijelaznog imena (I.E. "CUBE") ili A ("Tranzicija": "Timing") objekt. * @Param (string \u003d) opt_timing novog vremena animacije (I.E "0,5s lakoća"). Nije potrebno ako je tranzicija objekt. * @return (ovo) * / function Timing (tranzicija, opt_timing) (); / ** * Prebacite kruh kruha. * @return (ovo) * / funkcija krušne mrvice () (); / ** * Prebacite kontrole. * @param (string \u003d) opt_scheme toggle opt_scheme preklopiti / isključiti ako nije prisutan, inače promijenite izgled. "Granica", `Corner` ili` nijedan`. * @Return (ovo) * / funkcija kontrola (opt_scheme) ();

Pomičite stranicu tokom promjene dijapozitiva

Ova neugodna greška pojavljuje se u nekim preglednicima. Da biste je popravili. Morate dodati stil u tijelo:

Tijelo (preliv: skriveno;)

Promjena dinamičke veličine

Sam Slidr "Razumije" da li da promijeni veličinu klizača pod slike. Ako je naveden klizač, klizač, SLIDR ih neće automatski mijenjati. Ako su specificirane svojstva min-širine i min-visine, klizač će promijeniti svoju veličinu ispod sadržaja, s obzirom na te vrijednosti. U suprotnom, definicija veličine bit će automatski.

Promjena automatske veličine

dobro.

prekrasno.

nevjerovatan

Statičke veličine

dobro.

prekrasno.

nevjerovatan

Kontrolni elementi SLIDR.

Označavanje kontrola Sljedeće:

Možete prilagoditi bilo koji element klizača pomoću CSS selektora:

Na stranu .slidr-control.right (širina: 50px! VAŽNO; VAŽNO: VAŽNO; Vrh: 50%! VAŽNO; DESNO: VAŽNO: Border-polumjer: 25px; : URL ("/ Static / Images / Arrow_Right.png") 14px 13px bez ponavljanja crne boje; neprozirnost: 0,4;) na stranu: lebde (neprozirnost: 1;)

Kontrola "arrow" se implementira pomoću pseudog selektora: nakon, tako da ga sakrim, koristite sljedeći kod:

// sakriti jednu strelicu unutar jednog kontrolera. Na stranu .Slidr-control.right: nakon (granična boja: prozirna! Važna;) // Sakrij sve strelice unutar jednog kontrolera. Na stranu .Slidr-Control: nakon (granična boja: prozirna! Važna;) // sakrij sve SLIDR strelice. Na stranu .Slidr-Control: nakon (granična boja: prozirna! Važno;)

Krušne mrvice Slidr.

Kruške mrvice imaju jednostavnu HTML marku. Svaki ul označava cijeli niz, a svaki Li zaseban kruh mrvica:

Stilizacija krušnih mrvica sa CSS-om:

// Prilagodite položaj, veličinu, boju boju i boju pozadine. Na stranu (desno: 50%! Važno; Marža - desno: Važno;) Pomak .Slidr-hleb-kruh li (širina: 15px! Važno; Marža: 3px! Važno;) na stranu .Slidr-hleb Li.normal (borba boja: bijela! Važno;) na stranu .Slidr-hleb-kruh li.activeve (Boja pozadine: crna! Važno;

Licenca

Ovaj softver se može slobodno koristiti ispod MIT licence.