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 dodatak JQuery klizač, s kojim možete kreirati 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-slika klizač s nevjerojatnim vizualni efekti (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 izradu jednostavnog dizajna online trgovine u kojem "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 klizač koji zauzima 100% širine stranice i prilagođava se veličini zaslona Mobilni uredaji. 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 koristeći CSS. 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 adaptivni 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 responzivni 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.
Kada se koriste odvojeno, CSS3 i jQuery pružaju širok raspon mogućnosti. Ali ako se koriste zajedno... Tada mogu učiniti efekte doista impresivnima. Ponekad se javlja problem kako bolje i kreativnije posložiti nekoliko slika ili fotografija zajedničke tematike na jednom mjestu. Kao opciju, možete stvoriti klizač (pogotovo jer ih ima ogroman broj). Ali u ovom vodiču ćemo stvoriti interaktivnu 3D galeriju koristeći CSS3 i jQuery. Da biste to brzo shvatili i primijenili klizač na svoju web stranicu, preporučujem da preuzmete demo verziju (dostupna je i u cjelovitim vijestima) i jednostavno to učinite prema analogiji u primjeru.
Pravi primjer možete vidjeti ovdje:
preuzimanje datoteka
HTML dio - Zanimljiv jQuery klizač
Spremnik s klasom glavni koristit će se za prikaz pozadina. A onda unutar bloka s identifikatorom immersive_slider možete dodati onoliko slajdova koliko vam je potrebno. Gumbi za kretanje kroz slajdove mogu se ukloniti ako vam nisu potrebni:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class = "main" >
...
<div id = "immersive_slider" >
<< |
jQuery dio
| 1 2 3 4 5 6 7 8 | $("#immersive_slider") .immersive_slider (( animacija: "fade" , slideSelector: ".slide" , kontejner: ".main" , cssBlur: false, pagination: true, autoStart: 5000 ) ) ; |
Kao što ste možda primijetili gledajući primjer klizača, postoje različiti . Sve postavke za ove prijelaze nalaze se u gornjoj funkciji. Pogledajmo ove postavke:
- animacija— vrijednost koja određuje kako će se slajdovi mijenjati. Prihvaća vrijednosti "fade", "slide" ili "bounce". A da biste izvršili okomitu promjenu slajdova, morate unijeti "slideUp" ili "bounceUp".
- slideSelector— birač za odabir blokova sa slajdovima.
- spremnik— ovo svojstvo definira glavni spremnik čija će se pozadina promijeniti.
- cssBlur Ovo je probna značajka. Ako ne želite postaviti zamućenje, nemojte postavljati ovo svojstvo.
- paginacija— aktivira navigaciju.
- autoStart— automatsko pokretanje dijaprojekcije.
Ovaj klizač je jednostavan za instalaciju i ako ga shvatite, možete ga jednostavno konfigurirati i postići željeni rezultat. Da bi ovaj klizač radio, potrebno vam je samo nekoliko elemenata, koje ćemo sada razmotriti redom.
HTML označavanje
Ovdje je sve vrlo jednostavno, samo trebate dodati UL popis na samom početku odmah nakon oznake tijelo.
Na popisu su samo tri retka li, odnosno klizač je dizajniran za 3 slike, ako vam je potrebno više, tada je prvi korak dodavanje potrebnog broja redaka. Idemo dalje.
CSS stilovi
Ovo je vjerojatno najvažniji dio posla, jer kako će naš klizač raditi ovisi o CSS-u. Otvorite stilsku datoteku svoje web-lokacije i dodajte joj sljedeći kod.
Body_slides( list-style:none; margin:0; padding:0; z-index:-2; background:#000;) .body_slides, .body_slides:after( position: fixed; width:100%; height:100% ; top:0px; left:0px;) .body_slides:after ( content: ""; background: transparent url(images/pattern.png) repeat top left;).body_slides li( width:100%; height:100%; položaj:apsolutno; vrh:0; lijevo:0; veličina pozadine:naslovnica; ponavljanje pozadine:ništa; neprozirnost:0; -webkit-animacija: anim_slides 18s linearno beskonačno 0s; -moz-animacija: anim_slides 18s linearno beskonačno 0s; -o-animacija: anim_slides 18s linearno beskonačno 0s; -ms-animation: anim_slides 18s linearno beskonačno 0s; animacija: anim_slides 18s linearno beskonačno 0s; ) .body_slides li:nth-child(1)( background-image: url(images/ 1.jpg) ) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) ) . body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) ) @-webkit-keyframes anim_slides ( 0% (neprozirnost:0;) 6% (neprozirnost:1;) 24% (neprozirnost:1;) 30% (neprozirnost:0;) 100% (neprozirnost:0;) ) @-moz-keyframes anim_slides ( 0% (neprozirnost:0;) 6% (neprozirnost:1;) 24% (neprozirnost:1;) 30% (neprozirnost:0;) 100% (neprozirnost:0;) )
Ako razumijete CSS, onda vam neće biti teško razumjeti što je za što odgovorno. Reći ću vam minimum, jer nema smisla podučavati CSS.
Naš popis sa slajdovima ima klasu body_slides. Dani su mu stilovi za izgled i opće postavke.
Zatim imamo pseudo element - :nakon, koji definira dodatni sloj, a uzorak u obliku točkica postavljen je na vrhu pozadine. To se radi pomoću slike do koje je naveden put slike/uzorak.png. Ako imate drugačiji put, molimo da ga točno navedete.
.body_slides li:nth-child(1)- ovo je prvi slajd po redu i ima pozadinsku sliku. Slijedi nth-child(2), uz sliku, zadano je još jedno vrijeme i jednako je 6 sekundi. To jest, pojavit će se 6 sekundi nakon prvog slajda. Sljedeće je nth-child(3), ono će se pojaviti za sljedećih šest sekundi, tako da ima vrijeme od 12 sekundi. Ako trebate dodati 4. slajd, dodajte nth-child(4) i već bi trebao imati vrijeme od 18 sekundi. Mislim da je ovo jasno.
Zatim trebate navesti puno vrijeme animacije, ono je sada postavljeno body_slides i iznosi 18 sekundi. Ako dodate 4 slajda, to će biti jednako 24 i tako dalje. Ako ste dobri u matematici, trebali biste se snaći, glavna stvar je da ne griješite jer klizač uopće neće raditi. Po želji možete ubrzati ili usporiti postavljanjem željenog vremena.
ključni okviri anim_slides- ovo je pojava i nestanak slajda. U početku je slajd proziran i zadan mu je uvjet - neprozirnost:0;. Kada dođe na red bilo koji od slajdova, on se prvo pojavi, a zatim ponovno postane proziran i potpuno nestane, a na njegovom se mjestu pojavi novi. Ako želite promijeniti brzinu pojavljivanja ili nestajanja, promijenite postotak - ovo je postotak ukupnog vremena.
Ostale postavke su prema želji i potrebi - opća pozadina, sada crna, put do slika, pozicioniranje, razina slojeva itd. Prednost ovog klizača je što je jednostavan i ne koristi skripte i čitave biblioteke, ako je napravljen pomoću - jQuery. Zaista se nadam da će vam ovaj CSS klizač pomoći ako želite promijeniti pozadinske slike.
To je sve, hvala na pažnji. 🙂
Recite mi, molim vas, je li moguće napraviti klizač pozadinske slike pomoću glatkog klizača?
Google ne pomaže (u dokumentaciji piše da slike moraju biti smještene u div blok. Ali što je s pozadinskim slikama?
@charset utf-8; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr,acronym,address,big,cite,code,del,dfn, em,font,img,ins,kbd,q,s,samp,small, strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td(background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: baseline;margin: 0;padding: 0;)table(border-collapse: collapse;border-spacing: 0;) address,article,aside,canvas,details,figcaption,figure,footer,header,hgroup, nav, section,summary(display: block;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; ) a, a:hover, button, button:hover, .anime ( -moz-transition:svih 200ms linearno; -ms-transition:svih 200ms linearno; -o-transition:svih 200ms linearno; -webkit- prijelaz:svih 200ms linearno; prijelaz:svih 200ms linearno; kursor: pokazivač; ) .F_COL_C-START_I-CENTER (prikaz: savijanje; savijanje-toka: kolona sadarap; justify-content: flex-start; align-items: center; ) .F_ROW_C-START_I-CENTER ( display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; ) .F_ROW_C-S-B_I-F-S ( display: flex; flex-flow : row nowrap; justify-content: space-between; align-items: flex-start; ) .F_ROW_C-START_I-STRETCH ( display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items : rastezljivo; ) tijelo (boja pozadine: #fff; boja: #413d4b; obitelj fonta: "Roboto", sans-serif; veličina fonta: 0,87vmax; visina linije: 1,37vmax; ) .wrap ( širina: 58,75vw; margina: 0 auto; pozicija: relativna; ) zaglavlje (širina: 100%; visina: 100vh; pozadinska slika: linearni gradijent(45deg, rgba(9, 5, 47, .85) 0%, rgba( 49, 29, 94, .85)), url(../img/bg_header.jpg); pozadinsko ponavljanje: nema ponavljanja; pozadinska veličina: naslovnica; pozadinska pozicija: središte; preljev: skriveno; ) #top_header ( display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 3.2vh; ) #logo svg( height: 3vw; ) #top_header nav ul ( display: savijati; flex-flow: row nowrap; ) nav li( list-style: ništa; tekst-transformacija: velika slova; boja: #fff; font-family: "Roboto Black", sans-serif; margin-left: 1.25vw; ) nav a( text-decoration: none ; težina fonta: podebljano; boja: #fff; ) a:hover ( boja: #00e0d0; ) #header_content ( margin-top: 24.4vh; ) #header_content h2( font-family: "Playfair Display", serif; boja : #fff; veličina fonta: 2vw; poravnanje teksta: središte; ) hr (obrub: nema; širina: 3. 12vw; visina: 1px; boja pozadine: #00e0d0; boja: #00e0d0; margin-top: 3,8vh; ) #header_content p ( širina: 48.6vw; boja: #fff; line-height: 3.5vh; text-align: center; margin-top: 4.17vh; ) .btn ( padding: 0.8vw 1.5vw; font-family: "Hammersmith One", sans-serif; veličina fonta: 1vw; boja: #00e0d0; transformacija teksta: velika slova; obrub: 1px čvrsti #00e0d0; boja pozadine: prozirna; radijus obruba: 2px; margina na vrhu: 7,3 vh; ) .btn:hover (boja: #fff; obrub: 1px solid #fff; ) #dot_nav( širina: 3,43vw; prikaz: savijanje; savijanje protoka: redak sadaprebacivanje; opravdanje-sadržaj: razmak između; poravnavanje- stavke: flex-start; margin-top: 18.9vh; ) .circle_nav ( width: 0.62vw; visina: 0.62vw; border: 2px solid #bab9bc; background-color: transparent; border-radius: 0.62vw; ) .circle_nav :hover (obrub: 2px puni #00e0d0; boja pozadine: #00e0d0; )
Mi smo sjajna kreativna agencija
Ovo je Photoshopova verzija Lorem Ipsuma. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris Morbi accumsan ipsum velit.
1. Izvrsna jQuery dijaprojekcija
Velika, spektakularna dijaprojekcija pomoću jQuery tehnologije.
2. jQuery dodatak “Scale Carousel”
Skalabilni prikaz slajdova pomoću jQueryja. Možete postaviti veličine dijaprojekcije koje vam najviše odgovaraju.
3. jQuery dodatak “slideJS”
Klizač slike s tekstualnim opisom.
4. Dodatak “JSliderNews”
5. CSS3 jQuery klizač
Kada zadržite pokazivač iznad navigacijskih strelica, pojavljuje se kružna sličica sljedećeg slajda.
6. Zgodan jQuery klizač "Prezentacijski ciklus".
jQuery klizač s indikatorom učitavanja slike. Omogućeno je automatsko mijenjanje slajdova.
7. jQuery dodatak “Parallax Slider”
Klizač s volumetrijskim efektom pozadine. Vrhunac ovog klizača je kretanje pozadine, koja se sastoji od nekoliko slojeva, od kojih se svaki pomiče različitom brzinom. Rezultat je imitacija volumetrijskog učinka. Izgleda jako lijepo, možete vidjeti i sami. Učinak se lakše prikazuje u preglednicima kao što su Opera, Google Chrome, IE.
8. Svježi, lagani jQuery klizač “bxSlider 3.0”
Na demo stranici u odjeljku "primjeri" možete pronaći poveznice na sve moguće upotrebe ovog dodatka.
9. jQuery klizač slike, “slideJS” dodatak
Elegantni jQuery klizač svakako može ukrasiti vaš projekt.
10. jQuery dodatak za dijaprojekciju “Easy Slides” v1.1
Jednostavan jQuery dodatak za izradu dijaprojekcija.
11. jQuery Slidy dodatak
Lagani jQuery dodatak u raznim verzijama. Omogućeno je automatsko mijenjanje slajdova.
12. jQuery CSS galerija s automatskom izmjenom slajdova
Ukoliko posjetitelj u određenom vremenu ne klikne na strelicu “Naprijed” ili “Natrag”, galerija će se automatski početi pomicati.
13. jQuery klizač “Nivo klizač”
Vrlo profesionalan, kvalitetan, lagan dodatak s valjanim kodom. Postoji mnogo različitih efekata prijelaza slajdova.
14. jQuery klizač “MobilySlider”
Svježi klizač. jQuery klizač s raznim efektima mijenjanja slike.
15. jQuery dodatak “Slider²”
Lagani klizač s automatskim izmjenjivačem slajdova.
16. Svježi javascript klizač
Klizač s automatskom promjenom slike.
Dodatak za implementaciju dijaprojekcija s automatskom izmjenom slajdova. Moguće je upravljati prikazom pomoću minijatura slika.
jQuery CSS klizač slike pomoću dodatka NivoSlider.
19. jQuery klizač “jShowOff”
Dodatak za rotaciju sadržaja. Tri mogućnosti korištenja: bez navigacije (s automatskom promjenom formata slide showa), s navigacijom u obliku gumba, s navigacijom u obliku minijatura slika.
20. Dodatak “Shutter Effect Portfolio”.
Svježi jQuery dodatak za dizajniranje portfelja fotografa. Galerija ima zanimljiv efekt izmjene slika. Fotografije slijede jedna drugu s učinkom sličnim radu zatvarača objektiva.
21. Lagani javascript CSS klizač “TinySlider 2”
Implementacija klizača slike pomoću javascripta i CSS-a.
22. Sjajan klizač “Tinycircleslider”
Moderan okrugli klizač. Prijelaz između slika provodi se povlačenjem klizača u obliku crvenog kruga po obodu. Savršeno će se uklopiti u vašu web stranicu ako u dizajnu koristite okrugle elemente.
23. Klizač slike s jQueryjem
Lagani klizač “Slider Kit”. Klizač je dostupan u različitim izvedbama: okomito i vodoravno. Implementirane su i različite vrste navigacije između slika: pomoću gumba "Naprijed" i "Natrag", pomoću kotačića miša, pomoću klika mišem na slajd.
24. Galerija minijatura “Slider Kit”
Galerija "Slider Kit". Pomicanje sličica vrši se okomito i vodoravno. Prijelaz između slika vrši se pomoću: kotačića miša, klika mišem ili prelaskom pokazivača iznad minijature.
25. jQuery klizač sadržaja “Slider Kit”
Okomiti i vodoravni klizač sadržaja pomoću jQueryja.
26. jQuery dijaprojekcija “Slider Kit”
Prikaz slajdova s automatskom izmjenom slajdova.
27. Lagani profesionalni javascript CSS3 klizač
Zgodan jQuery i CSS3 klizač stvoren 2011.
jQuery dijaprojekcija sa sličicama.
29. Jednostavna jQuery dijaprojekcija
Dijaprojekcija s navigacijskim gumbima.
30. Sjajan jQuery “Skitter” dijaprojekcija
jQuery Skitter dodatak za stvaranje zadivljujućih dijaprojekcija. Dodatak podržava 22 (!) Vrste različitih animacijskih efekata pri promjeni slika. Može raditi s dvije opcije navigacije slajdova: pomoću brojeva slajdova i pomoću minijatura. Obavezno pogledajte demo, vrlo kvalitetan nalaz. Korištene tehnologije: CSS, HTML, jQuery, PHP.
31. Slideshow “Awkward”
Funkcionalni dijaprojekcija. Slajdovi mogu biti: jednostavne slike, slike s natpisima, slike s opisima alata, video zapisi. Za navigaciju možete koristiti strelice, veze s brojevima slajdova i tipke lijevo/desno na tipkovnici. Slide show dolazi u nekoliko verzija: sa i bez sličica. Za pregled svih opcija, slijedite poveznice Demo #1 - Demo #6 koje se nalaze na vrhu demo stranice.
Vrlo originalan dizajn za klizač slike, koji podsjeća na ventilator. Animirani prijelaz slajdova. Kretanje između slika vrši se pomoću strelica. Tu je i automatski mjenjač koji se može uključiti i isključiti tipkom Play/Pause koja se nalazi na vrhu.
Animirani jQuery klizač. Pozadinske slike automatski se skaliraju kada se promijeni veličina prozora preglednika. Za svaku sliku pojavljuje se blok s opisom.
34. Klizač “Flux Slider” koristeći jQuery i CSS3
Novi jQuery klizač. Nekoliko zgodnih animiranih efekata prilikom mijenjanja slajdova.
35. jQuery dodatak “jSwitch”
Animirana jQuery galerija.
Jednostavan jQuery prikaz slajdova s automatskom izmjenom slajdova.
37. Nova verzija dodatka “SlideDeck 1.2.2”
Profesionalni klizač sadržaja. Postoje opcije s automatskom izmjenom slajdova, kao i opcija pomoću kotačića miša za pomicanje između slajdova.
38. jQuery klizač “Sudo Slider”
Lagani klizač za slike pomoću jQueryja. Postoji mnogo mogućnosti implementacije: vodoravna i okomita promjena slika, sa i bez poveznica na broj slajda, sa i bez naslova slike, različiti efekti promjene slike. Postoji funkcija automatske promjene slajdova. Veze na sve primjere implementacije mogu se pronaći na demo stranici.
39. jQuery CSS3 dijaprojekcija
Dijaprojekcija sa sličicama podržava način automatskog mijenjanja slajdova.
40. jQuery klizač “Flux Slider”
Klizač s mnogo efekata mijenjanja slike.
41. Jednostavan jQuery klizač
Elegantan klizač slika koji koristi jQuery.