postavljanjem minimalnog z-indeksa potrebnog za vidljivost:

Klizač (položaj: relativan; z-indeks: 0; )

To je zapravo sve. Sve što preostaje je postaviti naše elemente pomoću sljedećeg CSS koda i možete biti sretni:

Klizač (položaj: relativno; z-indeks:0;) .unos klizača (prikaz: ništa;) .oznaka klizača (dno: 10px; prikaz: inline-block; z-indeks: 2; širina: 26px; visina: 27px; pozadina: #f4f4f5; obrub: 1px čvrsti #e6e6e6; boja donjeg ruba: #bfbfbf; radijus obruba: 4px; sjena okvira: umetnuti 0 1px 0 #ffffff, 0 1px 2px #000000; poravnanje teksta: središte; pokazivač: pokazivač; font: 14px/27px arial, tahoma; boja: #333; ) .slider .selector_list ( pozicija: apsolutna; dno: 15px; desno: 15px; z-index: 11; ) .klizač .item ( pozicija: relativno; širina:100%; ) .klizač .item ~ .item ( pozicija: apsolutna; vrh: 0px; lijevo: 0px; )

Ovo je vrsta prilagodljivog klizača bez Javascripta koji koristi CSS3 kakav biste trebali dobiti.

Trenutno je klizač - vrtuljak - funkcija koju je jednostavno potrebno imati na poslovnoj web stranici, portfolio web stranici ili bilo kojem drugom resursu. Zajedno s klizačima slika preko cijelog zaslona, ​​vodoravni klizači vrtuljaka dobro se uklapaju u bilo koji web dizajn.

Ponekad bi klizač trebao zauzeti jednu trećinu stranice stranice. Ovdje se koristi klizač vrtuljka s efektima prijelaza i responzivnim izgledima. Web-mjesta za e-trgovinu koriste klizač vrtuljka za prikaz više fotografija u pojedinačnim postovima ili stranicama. Kod klizača se može slobodno koristiti i mijenjati prema vašim potrebama.

Korištenje JQuery zajedno s HTML5 I CSS3, svoje stranice možete učiniti zanimljivijima pružajući im jedinstvene efekte i privlačeći pozornost posjetitelja na određeno područje web stranice.

Slick – moderan dodatak klizača vrtuljka

Gladak je slobodno distribuiran jquery dodatak čiji programeri tvrde da će njihovo rješenje zadovoljiti sve vaše zahtjeve slajdera. Responzivni klizač– vrtuljak može raditi u " pločice"za mobilne uređaje i, u " povuci i ispusti"za desktop verziju.

Sadrži efekt prijelaza " prigušenje", zanimljiva prilika" središnji način rada", lijeno učitavanje slika s automatskim pomicanjem. Ažurirana funkcionalnost uključuje dodavanje slajdova i filtar slajdova. Sve kako bismo osigurali da konfigurirate dodatak prema svojim zahtjevima.

Owl Carousel 2.0 – jQuery – dodatak za korištenje na uređajima osjetljivim na dodir

Ovaj dodatak ima velik skup funkcija, pogodan i za početnike i za iskusne programere. Ovo je ažurirana verzija klizača vrtuljka. Isto se zvao i njegov prethodnik.

Klizač ima neke ugrađene dodatke za poboljšanje ukupne funkcionalnosti. Animacija, reprodukcija videa, automatska reprodukcija klizača, lijeno učitavanje, automatsko podešavanje visine - glavne karakteristike.

Podrška za značajke povuci i ispusti uključeno za više prikladna upotreba dodatak na mobilnim uređajima.
Dodatak je savršen za prikaz velikih slika čak i na malim ekranima mobilnih uređaja.

Prilično mali, ali funkcionalno bogat jquery dodatak koji vam omogućuje postavljanje klizača na stranicu - vrtuljak, koji ima malu jezgru i ne troši puno resursa stranice. Dodatak se može koristiti za prikaz okomitih i vodoravnih klizača, s animacijom i stvaranje skupova slika iz galerije.

AnoSlide – Ultra kompaktni responzivni jQuery klizač

Ultra kompaktan jQuery klizač– vrtuljak, čija je funkcionalnost mnogo veća od one običnog klizača. To uključuje pretpregled jedne slike, vrtuljak s više slika i klizač na temelju naslova.

Owl Carousel – Jquery slider – carousel

– klizač s osloncem ekrani osjetljivi na dodir i tehnologije povuci i ispusti, lako se integrira u HTML- šifra. Dodatak je jedan od najboljih klizača koji vam omogućuju stvaranje prekrasnih karusela bez posebno pripremljenih oznaka.

3D galerija – vrtuljak

Koristi 3D– prijelazi na temelju CSS– stilovi i malo Javascript kodirati.

Veličanstveni 3D vrtuljak. Čini se da je ovo još uvijek beta verzija, jer sam otkrio nekoliko problema s njom upravo sada. Ako ste zainteresirani za testiranje i izradu vlastitih slajdera, ovaj će vam vrtuljak biti od velike pomoći.

Vrtuljak pomoću bootstrapa

Responzivni klizač – vrtuljak koji koristi tehnologiju baš za vašu novu web stranicu.

Rotirajući klizač pokretne kutije temeljen na Bootstrap okviru

Najpopularniji na portfelju i poslovnim web stranicama. Ova vrsta klizača - vrtuljak - često se nalazi na web stranicama bilo koje vrste.

Ovaj maleni klizač spreman je za rad na uređajima s bilo kojom rezolucijom zaslona. Klizač može raditi u kružnom i vrtuljkom načinu rada. Mali krug predstavljen kao alternativa drugim klizačima ove vrste. Dostupna je ugrađena podrška operativni sustavi iOS I Android.

U kružnom načinu, klizač izgleda prilično zanimljivo. Izvrsna podrška metodi povuci i ispusti i sustav za automatsko pomicanje slajdova.

Moćni, prilagodljivi klizač s vrtuljkom savršen je za modernu web stranicu. Radi ispravno na bilo kojem uređaju. Ima vodoravni i okomiti način rada. Njegova je veličina smanjena na samo 1 KB. Ultra kompaktni dodatak također ima izvrsne glatke prijelaze.

Vau – klizač – vrtuljak

Sadrži više od 50 efekata koji vam mogu pomoći da stvorite originalni klizač za svoju web stranicu.

Promijenite veličinu prozora preglednika da vidite kako se klizač prilagođava. Bxslider dolazi s više od 50 opcija prilagodbe i prikazuje svoje značajke s različitim efektima prijelaza.

jCarousel - jQuery dodatak koji će vam pomoći organizirati gledanje vaših slika. Možete jednostavno izraditi prilagođene karusele slika iz baze prikazane u primjeru. Klizač je prilagodljiv i optimiziran za rad na mobilnim platformama.

Scrollbox – jQuery dodatak

Pomicanje kompaktni dodatak za izradu klizača - karusela ili tekstualnog tickera. Ključne značajke uključuju efekte okomitog i vodoravnog pomicanja s pauzom pri prelasku miša.

Jednostavan klizač s vrtuljkom. Ako trebate brzi dodatak, ovaj je 100% prikladan. Dolazi samo s osnovnim značajkama potrebnim za rad klizača.

Flexisel: odgovarajući klizni dodatak JQuery Carousel

Kreatori su bili inspirirani staromodnim dodatkom, izradivši njegovu kopiju s ciljem osiguravanja ispravnog rada klizača na mobilnim i tablet uređajima.

Responzivni izgled, kada se izvodi na mobilnim uređajima, razlikuje se od izgleda koji je orijentiran na veličinu prozora preglednika. savršeno prilagođen za rad na ekranima, kako niske tako i visoke rezolucije.

Elastislide – adaptivni klizač – vrtuljak

Savršeno se prilagođava veličini zaslona uređaja. Možete postaviti minimalni broj slika za prikaz u određenoj razlučivosti. Dobro funkcionira kao klizač na vrtuljku s galerijama slika, koristeći fiksni omotač uz efekt okomitog pomicanja.

Besplatno dostupan klizač iz Woothemes. S pravom se smatra jednim od najboljih prilagodljivih klizača. Dodatak sadrži nekoliko predložaka i bit će koristan i početnicima i stručnjacima.

Nevjerojatan vrtuljak

Nevjerojatan vrtuljak– uključen klizač prilagodljive slike jQuery. Podržava mnoge sustave za upravljanje sadržajem kao što su WordPress, Drupal I Joomla. Također podržava Android I iOS i desktop verzija operativnih sustava bez problema s kompatibilnošću. Ugrađeni nevjerojatni predlošci vrtuljka omogućuju vam korištenje klizača u okomitom, vodoravnom i kružnom načinu rada.

Vrijeme ne stoji i s njim napreduje. To je utjecalo i na Internet. Već možete vidjeti kako se mijenja izgled web stranica, posebno je popularan responzivni dizajn. I u tom smislu pojavilo se dosta novih prilagodljivi jquery klizači, galerije, vrtuljke ili slične dodatke.
1. Responzivni vodoravni klizač postova

Adaptivni horizontalni vrtuljak s detaljnim uputama za montažu. Izrađen je u jednostavnom stilu, ali ga možete stilizirati kako vam odgovara.

2. Klizač na Glide.js

Ovaj klizač prikladan je za bilo koje web mjesto. Koristi Glide.js sa otvoreni izvor. Boje klizača mogu se jednostavno mijenjati.

3. Nagnuti dijaprojekcija sadržaja

Responzivni klizač sadržaja. Vrhunac ovog klizača je 3D efekt slika, kao i različite animacije nasumičnog pojavljivanja.

4. Klizač pomoću HTML5 platna

Vrlo lijep i impresivan klizač s interaktivnim česticama. Napravljen je pomoću HTML5 platna,

5. Klizač za preoblikovanje slike

Klizač s efektom morfiranja (glatka transformacija iz jednog objekta u drugi). U ovom primjeru, klizač je vrlo prikladan za portfelj web programera ili web studija u obliku portfelja.

6. Kružni klizač

Klizač u obliku kruga s efektom okretanja slike.

7. Klizač s zamućenom pozadinom

Prilagodljivi klizač s prebacivanjem i zamućenjem pozadine.

8. Responzivni modni klizač

Jednostavan, lagan i responzivan klizač web stranice.

9. Slicebox - klizač jQuery 3D slike(AŽURIRANO)

Ažurirana verzija klizača Slicebox s popravcima i novim značajkama.

10. Besplatna animirana responzivna slikovna mreža

Dodatak JQuery za stvaranje fleksibilne rešetke slika koja će izmjenjivati ​​snimke pomoću različitih animacija i vremena. To može izgledati dobro kao pozadina ili ukrasni element na web stranici, jer možemo selektivno prikazati nove slike i njihove prijelaze. Dodatak dolazi u nekoliko verzija.

11. Flex klizač

Univerzalni besplatni dodatak za vašu web stranicu. Ovaj dodatak dolazi u nekoliko opcija klizača i vrtuljka.

12. Okvir za fotografije

Fotorama- Ovo univerzalni dodatak. Ima puno postavki, sve radi brzo i jednostavno, a slajdove možete gledati na cijelom ekranu. Klizač se može koristiti u fiksnoj veličini i prilagodljivo, sa ili bez minijatura, sa ili bez kružnog pomicanja i još mnogo toga.

p.s.Ugradio sam slajder nekoliko puta i mislim da je jedan od najboljih

13. Besplatna i prilagodljiva 3D klizna galerija sa sličicama.

Eksperimentalni klizač galerije 3DPanelLayout s rešetkom i zanimljivim efektima animacije.

14. Klizač na css3

Prilagodljivi klizač izrađen je pomoću css3 s glatkim izgledom sadržaja i laganom animacijom.

15. WOW klizač

WOW klizač je klizač slika s nevjerojatnim vizualni efekti.

17. Elastični

Elastični klizač s punim odzivom i sličicama slajdova.

18. Prorez

Ovo je klizač koji reagira na cijelom zaslonu i koristi css3 animaciju. Klizač se izrađuje u dvije verzije. Animacija je napravljena dosta neobično i lijepo.

19. Adaptivna fotogalerija plus

Jednostavan besplatni galerijski klizač s učitavanjem slika.

20. Responzivni klizač za WordPress

Prilagodljivi besplatni klizač za WP.

21. Klizač sadržaja paralakse

Klizač s efektom paralakse i kontrolom svakog elementa koristeći CSS 3.

22. Klizač s glazbenom vezom

Klizač koji koristi JPlayer otvoreni kod. Ovaj klizač podsjeća na prezentaciju s glazbom.

23. Klizač s jmpress.js

Responzivni klizač temelji se na jmpress.js i stoga će vam omogućiti dodavanje zanimljivih 3D efekata vašim slajdovima.

24. Dijaprojekcija brzog lebdenja

Prikaz slajdova s ​​brzim prebacivanjem slajdova. Klizni prekidač pri lebdenju.

25. Slika Harmonika sa CSS3

Harmonika slike pomoću css3.

26. Dodatak za galeriju optimiziran dodirom

Ovo je responzivna galerija koja je optimizirana za uređaje osjetljive na dodir.

27. 3D galerija

3D zidna galerija- stvoreno za preglednik Safari, gdje će 3D efekt biti vidljiv. Ako ga pogledate na drugom pregledniku, funkcionalnost će biti u redu, ali 3D efekt neće biti vidljiv.

28. Klizač s paginacijom

Responzivni klizač s označavanjem stranica pomoću JQuery UI klizača. Ideja je koristiti jednostavan koncept navigacije. Moguće je premotavati sve slike unatrag ili mijenjati slajd po slajd.

29. Montaža slike s jQueryjem

Automatski rasporedite slike ovisno o širini zaslona. Vrlo korisna stvar pri razvoju portfolio web stranice.

30. 3D galerija

Jednostavan 3D kružni klizač koji koristi css3 i jQuery.

31. Način rada preko cijelog zaslona s 3D efektom koristeći css3 i jQuery

Klizač s mogućnošću pregledavanja slika preko cijelog zaslona s prekrasnim prijelazom.

Ako na svoje web mjesto trebate dodati visokokvalitetni jQuery klizač slike, u ovom ćete članku pronaći opis potrebni dodaci. Iako je JQuery znatno olakšao rad s JavaScriptom, i dalje su nam potrebni dodaci za ubrzanje procesa web dizajna.

Možemo promijeniti neke od ovih dodataka i stvoriti nove klizače koji su puno prikladniji za potrebe naše stranice.

Za ostale klizače jednostavno dodate naslove, slike i odaberete efekte prijelaza slajdova koji dolaze s klizačem. Svi ovi dodaci popraćeni su detaljnom dokumentacijom, tako da im dodavanje novih efekata ili funkcija neće biti teško. Možete čak promijeniti okidače temeljene na događajima ako ste iskusni JQuery programer.

Najnoviji trendovi poput responzivnog dizajna vrlo su važni za web projekte, bilo da implementirate dodatak ili skriptu. Svi ovi elementi čine svaki od ovih dodataka vrlo fleksibilnim. Sve što je izašlo u 2014. je uključeno u ovu listu.

jQuery klizači slika

Jssor responzivni klizač

Nedavno sam naišao na ovaj moćni JQuery klizač i mogao sam se iz prve ruke uvjeriti da jako dobro radi svoj posao. Sadrži neograničene mogućnosti koje se mogu proširiti kroz otvoreni kod klizača:

• Adaptivni dizajn;
• Više od 15 mogućnosti prilagodbe;
• Više od 15 efekata mijenjanja slike;
• Galerija slika, vrtuljak, podrška za veličinu cijelog zaslona;
• Vertikalni rotator bannera, popis slajdova;
• Video podrška.

Demo | preuzimanje datoteka

PgwSlider - odgovarajući klizač temeljen na JQuery / Zepto

Jedini zadatak ovog dodatka je prikazivanje slajdova slika. Vrlo je kompaktan, budući da su JQuery datoteke veličine samo 2,5 KB, što mu omogućuje vrlo brzo učitavanje:

• Prilagodljiv raspored;
• SEO optimizacija;
• Podrška za različite preglednike;
• Jednostavni prijelazi slike;
• Veličina arhive je samo 2,5 KB.

Demo | preuzimanje datoteka

Jquery Vertical News Slider

Fleksibilan i koristan JQuery klizač dizajniran za izvore vijesti s popisom publikacija na lijevoj strani i slikom prikazanom na desnoj strani:

• Adaptivni dizajn;
• Okomiti stupac za prebacivanje vijesti;
• Proširena zaglavlja.

Demo | preuzimanje datoteka

Wallop klizač

Ovaj klizač ne sadrži jQuery, ali želio bih ga predstaviti jer je vrlo kompaktan i može značajno smanjiti vrijeme učitavanja stranice. Reci mi ako ti se sviđa:

• Prilagodljiv raspored;
• Jednostavan dizajn;
• Razne mogućnosti mijenjanja slajdova;
• Minimalni JavaScript kod;
• Veličina je samo 3 KB.

Demo | preuzimanje datoteka

Flat-style Polaroid galerija

Galerija u stilu dokumenata razbacanih po radnom stolu s fleksibilnim izgledom i prekrasnim dizajnom trebala bi biti zanimljiva mnogima od vas. Prikladnije za tablete i velike zaslone:

• Adaptivni klizač;
• Ravni dizajn;
• Nasumična promjena slajdova;
• Potpuni pristup izvornom kodu.

Demo | preuzimanje datoteka

A-klizač

Demo | preuzimanje datoteka

HiSlider – HTML5, jQuery i WordPress klizač za slike

HiSlider je predstavio novi besplatni jQuery klizni dodatak s kojim možete stvarati razne galerije slika s fantastičnim prijelazima:

• Adaptivni klizač;
• Ne zahtijeva znanje programiranja;
• Nekoliko nevjerojatnih predložaka i maski;
• Prekrasni efekti prijelaza;
• Podrška za različite platforme;
• Kompatibilan s WordPress, Joomla, Drupal;
• Mogućnost prikaza sadržaja različiti tipovi: slike, YouTube video i Vimeo videozapisi;
• Fleksibilno postavljanje;
• Korisne dodatne značajke;
• Neograničena količina prikazanog sadržaja.

Demo |Preuzmi

Wow klizač

WOW Slider je odgovarajući jQuery- klizač slike s nevjerojatnim vizualnim efektima ( domino, rotirati, zamutiti, okrenuti i bljeskati, izletjeti, zasjeniti) i profesionalni predlošci.

WOW Slider dolazi s čarobnjakom za instalaciju koji vam omogućuje stvaranje fantastičnih klizača u nekoliko sekundi bez potrebe za razumijevanjem koda ili uređivanjem slika. Verzije dodataka za Joomla i WordPress također su dostupne za preuzimanje:

• Potpuno osjetljiv;
• Podržava sve preglednike i sve vrste uređaja;
• podrška dodirni uređaji;
• Jednostavna instalacija na WordPress;
• Fleksibilnost u konfiguraciji;
• SEO optimizirano.

Demo |Preuzmi

Nivo Slider – besplatni jQuery dodatak

Nivo Slider poznat je u cijelom svijetu kao najljepši i najjednostavniji za korištenje slikovni klizač. Nivo Slider dodatak je besplatan i objavljen pod MIT licencom:

• Zahtijeva JQuery 1.7 i noviji;
• Prekrasni efekti prijelaza;
• Jednostavan i fleksibilan za konfiguriranje;
• Kompaktan i prilagodljiv;
• Otvoreni izvor;
• Snažan i jednostavan;
• Nekoliko različitih šablona;
• Automatsko obrezivanje slike.

Demo |Preuzmi

Jednostavan jQuery klizač s tehničkom dokumentacijom

Ideja je inspirirana Appleovim klizačima u kojima nekoliko malih elemenata može izletjeti s različitim efektima animacije. Programeri su pokušali implementirati ovaj koncept uzimajući u obzir minimalni zahtjevi za stvaranje jednostavan dizajn online trgovina u kojoj "leteći" elementi predstavljaju različite kategorije:

• Prilagodljiv raspored;
• Minimalistički dizajn;
• Razni učinci ispadanja i mijenjanja slajdova.

Demo |Preuzmi

jQuery klizač slike u punoj veličini

Vrlo jednostavan slajder koji zauzima 100% širine stranice i prilagođava se veličini zaslona mobilnih uređaja. Radi s CSS prijelazima, a slike se "slažu" zajedno sa sidrima. Sidro se može zamijeniti ili ukloniti ako ne želite priložiti poveznicu na sliku.

Kada je instaliran, klizač se proširuje na 100% širine zaslona. Također može automatski smanjiti veličinu slika slajdova:

• Adaptivni JQuery klizač;
• Puna veličina;
• Minimalistički dizajn.

Demo |Preuzmi

Elastični klizač sadržaja + vodič

Elastični klizač sadržaja automatski prilagođava širinu i visinu na temelju dimenzija nadređenog elementa. Ovo je jednostavan jQuery klizač. Sastoji se od područja slajda na vrhu i navigacijske trake s karticama na dnu. Klizač prilagođava svoju širinu i visinu prema dimenzijama nadređenog spremnika.

Kada se gledaju na zaslonima male dijagonale, navigacijske kartice pretvaraju se u male ikone:

• Adaptivni dizajn;
• Pomicanje klikom miša.

Demo |Preuzmi

Besplatni 3D stack klizač

Eksperimentalni klizač koji se pomiče kroz slike u 3D. Dva niza nalikuju hrpama papira, s kojih se, kada se pomiču, slike prikazuju u središtu klizača:

• Adaptivni dizajn;
• Flip - prijelaz;
• 3D efekti.

Demo |Preuzmi

Cijeli zaslon Slit Slider temeljen na JQueryju i CSS3 + vodič

Ovaj vodič će vam pokazati kako kreirati klizač sa zaokretom: ideja je "izrezati" i prikazati trenutni slajd dok otvarate sljedeću ili prethodnu sliku. Koristeći JQuery i CSS animaciju, možemo stvoriti jedinstvene efekte prijelaza:

• Adaptivni dizajn;
• Split prijelaz;
• Klizač za cijeli zaslon.

Demo |Preuzmi

Unislider - vrlo mali jQuery klizač

Bez nepotrebnih zvona i zviždaljki, manje od 3KB veličine. Koristite bilo koji HTML kôd za slajdove, proširite ga CSS-om. Sve vezano uz Unslider nalazi se na GitHubu:

• Podrška za razne preglednike;
• Podrška za tipkovnicu;
• Podešavanje visine;
• Adaptivni dizajn;
• Podrška za unos dodirom.

Demo | preuzimanje datoteka

Minimalni responzivni slajdovi

Jednostavan i kompaktan dodatak ( veličina je samo 1 KB), koji stvara responzivni klizač koristeći elemente unutar spremnika. ResponsiveSLides.js radi s veliki iznos preglednici, uključujući sve verzije IE od IE6 i novije:

• Potpuno osjetljiv;
• Veličina 1 KB;
• CSS3 prijelazi s mogućnošću pokretanja putem JavaScripta;
• Jednostavno označavanje korištenjem popisa s grafičkim oznakama;
• Mogućnost prilagodbe efekata prijelaza i trajanja gledanja jednog slajda;
• Podržava mogućnost stvaranja više dijaprojekcija;
• Automatsko i ručno listanje.

Demo |Preuzmi

Kamera - besplatni jQuery klizač

Kamera je dodatak s mnogo efekata prijelaza i responzivnim izgledom. Jednostavno postavljanje, podržano mobilnim uređajima:

• Potpuno responzivan dizajn;
• Potpisi;
• Mogućnost dodavanja videa;
• 33 ikone u različitim bojama.

Demo |Preuzmi

SlidesJS, odgovarajući jQuery dodatak

SlidesJS je adaptivni dodatak za JQuery (1.7.1 i noviji) s podrškom za dodirne uređaje i CSS3 prijelaze. Eksperimentirajte s njim, isprobajte nekoliko gotovih primjera koji će vam pomoći da shvatite kako dodati SlidesJS u svoj projekt:

• Adaptivni dizajn;
• CSS3 prijelazi;
• Podrška za uređaje osjetljive na dodir;
• Jednostavan za postavljanje.

Demo | preuzimanje datoteka

BX Jquery klizač

Ovo je besplatni responzivni jQuery klizač:

• Potpuno osjetljiv - prilagođava se svakom uređaju;
• Horizontalna, okomita promjena slajdova;
• Slajdovi mogu sadržavati slike, videozapise ili HTML sadržaj;
• Proširena podrška za uređaje osjetljive na dodir;
• Korištenje CSS prijelaza za animaciju slajdova ( hardversko ubrzanje);
• API povratnog poziva i potpuno javne metode;
• Mala veličina datoteke;
• Jednostavan za implementaciju.

Demo |Preuzmi

FlexSlider 2

Klizač s najboljim odzivom. Nova verzija je modificiran kako bi se povećala brzina i kompaktnost.

Demo | preuzimanje datoteka

Galleria - responzivna galerija fotografija temeljena na JavaScriptu

Galleria se koristi na milijunima stranica za stvaranje galerija slika visoka kvaliteta. Broj pozitivnih kritika o njezinu radu jednostavno je nevjerojatan:

• Potpuno besplatno;
• Način gledanja preko cijelog zaslona;
• 100% prilagodljiv;
• Nije potrebno programersko iskustvo;
• Podrška za iPhone, iPad i druge uređaje osjetljive na dodir;
• Flickr, Vimeo, YouTube i više;
• Nekoliko tema.

Demo | preuzimanje datoteka

Blueberry - jednostavan responzivni jQuery klizač slike

Predstavljam vam jQuery klizač slike napisan posebno za responzivni web dizajn. Blueberry je eksperimentalni dodatak za klizanje slika otvorenog koda izvorni kod, koji je napisan posebno za rad s odgovarajućim predlošcima.

U ovom vodiču ćemo stvoriti jednostavan adaptivna stranica s zaglavljem ukrašenim vrtuljkom u kojem slike klize s desna na lijevo. Naše rješenje ne koristi JavaScript, dijaprojekcija se temelji na CSS3 animacijama koje većina podržava moderni preglednici: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ i IE10.

Korak 1 - Pripremni

Trebat će nam 4 velike slike (u našem primjeru veličina je 1200px x 390px). Za vodoravni klizač pripremit ćemo sliku veličine 4800 x 390 piksela u Photoshopu, postaviti sve naše slike jednu za drugom vodoravno i spremiti rezultat u formatu prikladnom za web (“ slider-horizontal.jpg”).

Korak 2 - HTML

Ono što ćemo zapravo učiniti je animirati svojstvo položaja pozadine za naše zaglavlje. Samo zaglavlje ima vrlo jednostavnu oznaku:

L'ile de Batz

Cijeli kod stranice izgleda ovako:

L'ile de Batz

Korak 3: Mobilni CSS

Počet ćemo definirati stilove za mobilne uređaje. Postavimo osnovni dizajn, a zatim dodamo proširenja predloška za veće zaslone. Tekst lekcije daje samo osnovna svojstva, puni kod Možete pogledati izvore:

Tijelo (širina: 90%; min. širina: 300 px; maks. širina: 1200 px; margina: 0 auto; padding-top: 1em; boja: #504331) zaglavlje (text-align: center; position: relative; ) h1 ( veličina fonta: 2.75em; pozadina: bijela; prikaz: inline-block; padding: 0 10px; margin-bottom: .25em; ) h1:after ( sadržaj: ""; visina: 2px; prikaz: blok; pozicija: apsolutna ; lijevo: 0; desno: 0; vrh: .5em; z-index: -1; border-top: 1px solid #504331; border-bottom: 1px solid #504331; ) .links ( background: url(../ images/map.png) donji centar bez ponavljanja; padding-bottom: 177px; )

Korak 4. Stilovi za velike zaslone

Na veliki ekrani odjeljci .glavni I .zaslon treba drugačije prikazati. Odjeljak .veza imat će širinu od 300px i biti postavljen kao desni bočna ploča, i odjeljak .glavni ostat će lijevo. Također ćemo dodati dvostruku liniju za odvajanje odjeljaka. Odredit ćemo širinu zaslona veću od 1024px pomoću @media upita:

@media only screen and (min-width: 1024px) ( .content ( position: relative; ) .main ( margin-right: 320px; padding: .5em 20px .5em 0; /*dodajte dvostruku liniju */ border-right : 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; ) .links (position: absolute; right: 0; top: 0; width: 300px; text-align: right; ) )

Korak 5: Responzivne slike zaglavlja

Počnimo raditi na glavnom dijelu naše lekcije: responzivnom CSS klizaču u zaglavlju. Najprije osigurajmo prilagodljivost pozadinska slika.

Zaglavlje ( pozadina: url(../images/slider-horizontal.jpg) 0 donje ponavljanje-x; veličina pozadine: 400%; padding-dno: 32,5%; )

Korištenje dvije postotne vrijednosti (400% za imovinu veličina pozadine i 32,5% za donju marginu) pozadina zaglavlja bit će ispravno prikazana bez obzira na veličinu zaslona.

Zašto 400%? Imamo 4 slajda, tako da će prikaz biti 1/4 pozadinske slike u zaglavlju. Odnosno, veličina pozadine trebala bi biti 4 puta šira od zaglavlja.

Zašto 32,5%? Pozadinu postavljamo na dno zaglavlja. Visina pozadinske slike je 390px, širina pojedinačnog slajda je 1200px, 390/1200 = 0,325, dakle visina je 32,5% širine.

Korak 6. Animacija

Mi ćemo animirati imanje pozadina-položaj. Za prikaz drugog svojstva slike pozadina-položaj trebalo bi biti važno 33,33333% dno, treći - 66,66667% dno, a četvrti - 100% dno. Prva slika se prikazuje kada je vrijednost svojstva pozadina-položaj jednak 0 dno ili 133,33333% dno(ponavljanja postavljamo na ponovi-x).

Svaka slika ima 25% vremena "slave". Prvi se prikazuje od 0 do 25%, drugi od 25% do 50%, treći od 50% do 75%, a posljednji od 75% do 100%. Postavljamo prijelaze tako da slika počne kliziti malo ranije (koristeći vrijednost od 5%) prije nego što istekne 25% njezinog vremena renderiranja. Ovako to izgleda @ključni okviri:

@keyframes h_slide ( 0% ( položaj pozadine: 0% dno; ) 20% ( položaj pozadine: 0% dno; ) 25% ( položaj pozadine: 33,33333% dno; ) 45% ( položaj pozadine: 33,33333% dno ; ) 50% (pozadina-položaj: 66,66667% dno; ) 70% (pozadina-položaj: 66,66667% dno; ) 75% (pozadina-položaj: 100% dno; ) 95% (pozadina-položaj: 100% dno; ) 100% (pozadina-pozicija: 133,33% dno; ))

Imajte na umu da trebate dodati prefikse preglednika: @-webkit-keyframes (za Chrome, Safari, iOS Safari, Android) i @-moz-keyframes (za Firefox 15).

Ispod je kompletan kod zaglavlja. Naša animacija "h_slide" ponavlja se svake 24 sekunde (6 sekundi za svaki slajd) u beskonačnoj petlji. Vremenska funkcija je važna ease-out, tako da se svaki slajd usporava na kraju prijelaza.

Zaglavlje ( poravnanje teksta: središte; položaj: relativno; pozadina: url(../images/slider-horizontal.jpg) 0 donji ponavljanje-x; veličina pozadine: 400%; padding-dno: 32,5%; -webkit- animacija: h_slide 24s ease-out beskonačno; -moz-animacija: h_slide 24s ease-out beskonačno; animacija: h_slide 24s ease-out beskonačno; )