Owl Carousel - jQuery dodatak sa podrškom za dodir, koja vam omogućava da kreirate responzivni (prilagodljivi) klizač (vrtuljak). Veoma je udoban, jednostavan i adaptivni dodatak za kreiranje klizača, vrtuljki itd. U ovom članku pokušat ću vam objasniti i pokazati kako to funkcionira.
Instaliranje dodatka Owl Carousel Prvo moramo preuzeti arhivu sa dodatkom
U nastavku ću pokazati primjer instaliranja dodatka u DataLife Engine predložak.
Nakon što smo preuzeli arhivu, otvorite je i distribuirajte datoteke na sljedeći način: File owl.carousel.css I owl.transitions.cssstaviti u fasciklustil tako ili css. File owl.carousel.jsstavi u js folder
Sada moramo da povežemo ove fajlove da bi radili u našem šablonu. Otvaranje datoteke main.tpl a prije linije enter sledeći redovi:
folder css promenite u onu u kojoj se nalazite css stilovi! Zatim na samom dnu prije crte
unesite ovaj red: Pa to je sve! Završili smo sa instalacijom.
Sada treba da ubacimo i konfigurišemo sam klizač. Pokazat ću na primjeru topnews one prikazati popularne vijesti putem našeg vrtuljka sova.
Stranica dokumentacije opisuje sve opcije, demonstracije i kako koristiti naš dodatak Owl Carousel. Slijedite vezu i odaberite bilo koji klizač koji vam se sviđa. Za naše topnews Odabrao sam prvu s imenom slike. Na kartici javascript kopirajte ove redove: $(document).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, stavke: 4, itemsDesktop: , itemsDesktopSmall: )); )); i zalijepite ih u datoteku main.tpl prije linije
Zatim na kartici CSS kopirajte redove: #owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; širina: 100%; visina: auto; ) i uključi ih u bilo koji css datoteku ili u datoteku main.tpl prije linije
ali posle linije
! Sada ćemo analizirati naš HTML kod i povezati se na topnews. U fajlu main.tpl umetnite oznaku na pravo mjesto (topnews) koji zauzvrat daje listu popularnih vijesti, izgled koji se može konfigurisati u datoteci topenews.tpl, više o tome u nastavku .
Naš kod oznake bi trebao izgledati ovako:
(topnews)
Pa, sada samo treba da podesimo same vesti. Otvaranje datoteke topens.tpl i na samom početku ulazimo:
zatvorite atribut na samom kraju
Ako koristite jedan od mojih Bootstrap predložaka, tada možete koristiti sljedeće redove u datoteci kao opciju topnews.tpl:
(title limit="55")
(ograničenje teksta="100")
Citati
Vijesti će biti prikazane u ovom obrascu
Ovaj dodatak se može koristiti gotovo bilo gdje, baš kao i korištenje oznake (prilagođena kategorija) Oni također mogu zamijeniti standardnu DLE galeriju, o tome ću objaviti poseban članak. Uživajte u svom zdravlju ;)
Pozdrav admin. skinutiPažnja: Dostignuto je ograničenje preuzimanja. Dodji sutra =)
Trenutno je klizač vrtuljke funkcija koju je jednostavno potrebno imati na poslovnoj web stranici, web stranici portfelja ili bilo kojem drugom resursu. Zajedno sa klizačima za slike na cijelom ekranu, horizontalni klizači vrtuljka dobro se uklapaju u svaki web dizajn.
Ponekad klizač treba da zauzme jednu trećinu stranice stranice. Ovdje se klizač vrtuljka koristi sa efektima prijelaza i sa prilagodljivim izgledima. Web lokacije za e-trgovinu koriste klizač vrtuljke za prikazivanje više fotografija u zasebnim objavama ili stranicama. Šifra klizača je besplatna za korištenje i mijenjanje prema vašim potrebama.
Koristeći jQuery u kombinaciji sa HTML5 i CSS3, možete učiniti svoje stranice zanimljivijim uz jedinstvene efekte i skrenuti pažnju posjetitelja na određeno područje stranice.
Slick - moderan dodatak za klizač vrtuljke
Slick je besplatni jQuery dodatak čiji programeri tvrde da će njihovo rješenje zadovoljiti sve vaše zahtjeve za klizačem. Responsive klizač - vrtuljak može raditi u "tile" modu za mobilne uređaje, i u "drag and drop" modu za desktop verziju.
Sadrži efekat bledećeg prelaza, zanimljivu funkciju "režim u centru", lijeno učitavanje slika sa automatskim pomeranjem. Ažurirana funkcionalnost uključuje dodavanje slajdova i filtera slajdova. Sve za vas da prilagodite plugin prema vašim zahtjevima.
Demo način rada | Skinuti
Owl Carousel 2.0 - jQuery dodatak za dodirne uređaje
Ovaj dodatak ima veliki skup funkcija, pogodan i za početnike i za iskusne programere. Ovo ažurirana verzija klizač - vrtuljak. Njegov prethodnik je imao isto ime.
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 su glavne karakteristike Owl Carousel 2.0.
Podrška za povlačenje i ispusti uključeno za praktičniju upotrebu dodatka na mobilnih uređaja. Dodatak je savršen za prikazivanje velikih slika čak i na malim ekranima mobilnih uređaja.
Primjeri | Skinuti
jQuery Silver Track dodatak
Prilično mali, ali bogat jquery dodatak koji vam omogućava da postavite klizač vrtuljke na stranicu, koji ima malu jezgru i ne troši puno resursa stranice. Dodatak se može koristiti za prikaz vertikalnih i horizontalnih klizača, sa animacijom i kreiranje skupova slika iz galerije.
Primjeri | Skinuti
AnoSlide - Ultra kompaktan jQuery klizač sa brzim odzivom
Ultra kompaktan jQuery klizač- vrtuljak, čija je funkcionalnost mnogo veća od one kod konvencionalnog klizača. To uključuje pregled jedna slika, prikazivanje više slika u vrtuljku i klizaču na osnovu naslova.
Primjeri | Skinuti
Sova vrtuljak - jquery klizač - vrtuljak
Sova vrtuljak - klizač sa podrškom ekrani osetljivi na dodir I drag tehnologija i drop , lako se ugrađuju u HTML kod. Dodatak je jedan od najboljih klizača koji vam omogućavaju da kreirate prekrasne vrtuljke bez ikakvih posebno pripremljenih oznaka.
Primjeri | Skinuti
3D galerija - vrtuljak
Koristi 3D prijelaze bazirane na CSS stilovima i nekom Javascript kodu.
Primjeri | Skinuti
3D vrtuljak koristeći TweenMax.js i jQuery
Predivan 3D vrtuljak. Izgleda da je još uvijek beta verzija, jer sam upravo sada naišao na par problema s njom. Ako ste zainteresirani za testiranje i kreiranje vlastitih klizača, ovaj vrtuljak će vam biti od velike pomoći.
Primjeri | Skinuti
Carousel koristeći bootstrap
Responzivni klizač vrtuljka koji koristi bootstrap tehnologiju baš za vašu novu web stranicu.
Primjeri | Skinuti
Klizač baziran na Bootstrap-u - vrtuljak Moving Box
Najtraženiji na portfolio i poslovnim web stranicama. Sličan tip klizača - vrtuljka često se nalazi na stranicama bilo koje vrste.
Primjeri | Skinuti
Tiny Circleslider
Ovaj mali klizač je spreman za rad na uređajima sa bilo kojom rezolucijom ekrana. Klizač može raditi i u kružnom iu vrteškom načinu rada. Mali krug je predstavljen kao alternativa drugim klizačima ovog tipa. Ima ugrađenu podršku operativni sistemi iOS i Android.
U kružnom načinu rada, klizač izgleda prilično zanimljivo. Podrška za metodu drag and drop i automatski sistem pomicanja slajdova su dobro implementirani.
Primjeri | Skinuti
Klizač sadržaja Thumbelina
Snažan, prilagodljiv klizač tipa vrtuljak savršen je za moderne stranice. Radi ispravno na bilo kojem uređaju. Ima horizontalni i vertikalni način rada. Njegova veličina je minimizirana na samo 1 KB. Ultra kompaktni plug-in ima odlične glatke prijelaze.
Primjeri | Skinuti
wow klizač vrtuljak
Sadrži preko 50 efekata koji vam mogu pomoći da kreirate originalni klizač za vašu web stranicu.
Primjeri | Skinuti
Responzivni jQuery klizač sadržaja bxSlider
Promenite veličinu prozora pretraživača da vidite kako se klizač prilagođava. Bxslider dolazi sa preko 50 opcija prilagođavanja i prikazuje svoje karakteristike s različitim efektima prijelaza.
Primjeri | Skinuti
jCarousel
jCarousel je jQuery dodatak koji će vam pomoći u organizaciji prikaza vaših slika. Moći ćete lako kreirati prilagođene vrtuljke slika iz okvira prikazanog u primjeru. Klizač je prilagodljiv i optimiziran za mobilne platforme.
Primjeri | Skinuti
ScrollBox - jQuery dodatak
Scrollbox je kompaktni dodatak za kreiranje klizača - vrtuljka ili tekstualne linije. Ključne karakteristike uključuju efekat vertikalnog i horizontalnog pomeranja sa pauzom pri lebdenju mišem.
Primjeri | Skinuti
dbpasCarousel
Jednostavan klizač vrtuljka. Ako vam je potreban brzi dodatak, ovaj je 100% prikladan. Dolazi sa samo osnovnim karakteristikama potrebnim da bi klizač radio.
Kreatori Flexisela su dobili inspiraciju iz old-school dodatka jCarousel, napravivši njegovu kopiju, fokusirajući se na ispravan rad klizača na mobilnim i tablet uređajima.
Flexiselov responzivni izgled, kada se radi na mobilnim uređajima, razlikuje se od rasporeda orijentisanog prema veličini prozora pretraživača. Flexisel je savršeno prilagođen za rad na ekranima, niske i visoke rezolucije.
Primjeri | Skinuti
Elastislide - Responsive Carousel Slider
Elastislide se savršeno prilagođava veličini ekrana uređaja. Možete postaviti minimalni broj slika za prikaz u određenoj rezoluciji. Dobro radi kao klizač vrtuljka s galerijama slika koristeći fiksni omotač zajedno s efektom vertikalnog pomicanja.
Primjer | Skinuti
Flex klizač 2
Besplatni klizač iz Woothemesa. S pravom se smatra jednim od najboljih responzivnih klizača. Dodatak sadrži nekoliko predložaka i bit će koristan i za početnike i za stručnjake.
Primjer | Skinuti
Amazing Carousel
Nevjerovatan vrtuljak - adaptivni klizač jQuery slike. Podržava mnoge sisteme za upravljanje sadržajem kao što su WordPress, Drupal i Joomla. Takođe podržava Android i IOS i desktop verzije operativnih sistema bez ikakvih problema sa kompatibilnošću. Ugrađeni neverovatni šabloni vrteške omogućavaju vam da koristite klizač u vertikalnim, horizontalnim i kružnim režimima.
Primjeri | Skinuti
/* Ovdje počinje naš vrtuljak. Carousel-wrapper je relativno pozicioniran, .carousel-item je apsolutan. . */ .carousel-wrapper( position:relative; /* Apsolutno pozicionirani okviri dobijaju svoju visinu i širinu od nadređenog. Napravili smo ih transparentnim prema zadanim postavkama, a zatim će izblijedjeti kada kliknete na .arrow-prev i.arrow-next veze. * / .carousel-item( position:apsolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0;tranzicija:all0.5sease-in-out; /* Napomena padding na lijevo i 50px na desno? Na ovaj način možemo pozicionirati naše veze! Svaki će biti širok 50px. Također, koristim prazne veze sa pozadinski uzorak tako da veze izgledaju kao strelice. Provjerite jeste li se promijenili URL-ovi linkova sa originalnim URL-om tako da vaše veze nisu samo prozirni pravokutnici. */ .arrow( position:apsolute; top:0; display:block; width:50px; visina:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Vratimo našu lijevu strelicu. */ &.arrow-prev( left:0; ) /* I drugu udesno Pošto koristim istu sliku za strelicu, rotiram je za 180 stepeni */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Zaista mi se sviđa kako izgledaju slajdovi vrteške tamna pozadina, a ako blok .carousel-item ima klasu "light", promijenit ćemo njegov tekst u bijeli i koristiti bijele strelice umjesto sivih. Provjerite ponovo da li je putanja do slike sa strelicom ispravna */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Napišite medijski upit za promjenu veličine strelica na uređajima sa manjom veličinom ekrana.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50% ; ) ) ) /* Postavljanje ciljeva veza za prikaz: nema; Tako se oslobađamo stalnog skakanja pretraživača na sam vrh vrtuljka svakim klikom na strelice. Ovo svojstvo se primjenjuje na bilo koji element čiji ID počinje s "target-item". */ ( display:none; ) /* Iznad smo sve naše slajdove vrteške napravili providnim, što znači da kada se vrteška učita, umjesto toga ćemo dobiti veliku praznu kutiju. Promijenimo vrijednost transparentnosti za prvi slajd na 1 za prikaz. Također smo postavili z-indeks na 2, pozicionirajući ga iznad ostatka slajdova. */ .item-1( z-index:2; opacity:1; ) /* Ali ne želimo da prvi slajd uvijek ima neprozirnost: 1; u suprotnom, moraćemo da se probijemo kroz ovaj tobogan dok se ostali rotiraju. */ *:target~.item-1( opacity:0; ) /* ..ali ako je #target-item-1 u fokusu i želimo da prikažemo prvi slajd, izaberite ga sa ikonom ~ i postavite neprozirnost nazad na 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Ako su drugi ciljni-item-# u fokusu, odaberite ih pomoću ~ selektora, izblijedite ih , i postavite ih na vrh sa z-indeksom: 3. Ovdje možete dodati dodatne raspone sa ID-om ciljne stavke ako imate više od tri. Može dodati 10 stavki odjednom.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )
Da, tema je poprilično zeznuta. Ali ipak, često je teško pronaći ono što vam zaista treba. Svi nude vrlo sofisticirane skripte, sa puno dodatnih funkcija. I obično su to već komprimirani dodaci.
Tako da ću ponuditi svoje Alternativna opcija Vrlo jednostavan jQuery vrtuljak.
Može se koristiti kao vrtuljak sa slikama, vrtuljak s vijestima ili bilo koji drugi vrtuljak sa sadržajem =)
Jedina mala zvona i zviždaljke koje sam sebi dozvolio bila je senka na bloku vrteške.
UPD: 07.06.2014
To će izgledati otprilike ovako: DEMO Download
Struktura će izgledati ovako:
TJ jednostavan prilagodljivi vrtuljak
Hajde da opišemo stilove:
Vrteška (maksimalna širina: 1080px; /* širina cijelog bloka */ margina: 50px auto; širina:100%; ) sadržaj izvan glavne oblasti */ position:relative; ) .carousel-items (širina: 10000px; / * postavite veću širinu za skup stavki */ pozicija: relativna; /* pozicionirajte kutiju u odnosu na područje glavne vrteške */ ) .carousel -block ( float: lijevo; /* poravnajte sve elemente vrteške */ širina: 250px; /* postavi širinu svakog elementa */ padding: 10px 10px 10px 0px; /* napravi padding tako da se elementi ne spajaju */ ) .carousel -block img( display:block; ) /***** ********** DUGME ***********/ .carousel-button-left a, .carousel-button-right a( širina: 25px; visina: 36px; pozicija: relativna ; vrh: 80px; kursor: pokazivač; text-decoration:none; ) .carousel-button-left a( float: lijevo; pozadina: url(../images/carousel- left.png); ) .carousel-button- desno a( float: desno; pozadina: url(../images/carousel-right.png); ) /*************** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) ;)
I na kraju, kako bi to trebalo raditi:
//Rukovanje desnom strelicom kliknite na $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(.carousel"); right_carusel(carusel ); vrati false; )); //Upravljanje lijevom strelicom kliknite $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(.carousel"); left_carusel(carusel ) ; vrati false; )); funkcija left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(.carousel-items")); $(carusel).find(".carousel-items").css(("left":"-" +block_width+"px")); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items") ).animate((lijevo: "0px"), 200); ) funkcija right_carusel(carusel)( var block_width = $(carusel).find(.carousel-block").outerWidth(); $(carusel).find ("".carousel-items").animate((lijevo: "-"+ block_width +"px"), 200, function()( $(carusel).find(".carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(.carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0 ) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() ( //Dekomentirajte red ispod za omogućavanje automatskog pomicanja vrtuljka auto_right(".carousel:first"); )) // Auto funkcija dinamičkog pomicanja auto_right(carusel)( setInterval(function()( if (!$(carusel).is(".hover")) right_carusel(carusel); ), 3000) ) // Zadržao se iznad vrtuljka $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // Uklonio kursor sa vrtuljak $(document).on("mouseleave", ".carousel", function()($(this).removeClass("hover")))
U skladu s tim, sjenilo se može ukloniti. A da biste ga koristili, samo trebate zamijeniti veličinu glavnog bloka i ugniježđenih blokova "skrolovanja" u css. Takođe je vrlo lako napraviti petlju ovog procesa tako da se automatski skroluje (u ovaj slučaj, samo dekomentirajte poziv funkcije auto_right). Odnosno, iz ove nepretenciozne galerije možete napraviti sve što vam je potrebno u okviru zadatka!
Također treba napomenuti da je ovaj primjer prilagodljiv, odnosno da se veličina vrtuljka prilagođava veličini ekrana i da će se ispravno prikazati kako na ekranu računara ili laptopa, tako i na ekranima tableta i pametnih telefona.
1. jQuery vrtuljak "clickCarousel"
Blokiraj sa pomicanjem najava vijesti. Strelice lijevo/desno se koriste za skrolovanje kroz blokove. U arhivi se nalazi vrtuljak u dva stila: svijetli i tamni.
1. jQuery vrtuljak, dodatak carouFredSel
Uredan i svjež jQuery karusel slika.
4. jQuery dodatak: Elastislide Carousel
5. Dodatak "TinyCarousel"
Sjajni klizači sadržaja u obliku vrteške sa slikama koristeći jQuery. Demo stranica opisuje kako povezati ovaj vrtuljak sa svojom web lokacijom.
Dodatak "Slider Kit", lagani vrtuljak sa Različiti putevi skrolujte.
7. javascript karusel
8. jQuery dodatak "Grid Navigation Effects"
Originalna navigacija između sličica slika. Da vidite efekat na desnoj strani demo stranice, kliknite na dugme Gore i Dole. Ovo jQuery rešenje takođe obezbeđuje efekat lebdenja na sličici i pomeranje pomoću točkića miša.
9. Lagani vrtuljak
10. Easy Paginate blok vrtuljak
jQuery dodatak "Easy Paginate". Svaki pravougaoni blok je obična stavka li liste, a ako ima više od tri stavke, onda da biste ih vidjeli sve trebate koristiti navigaciju nalik klizaču (pomoću strelica naprijed i nazad i pomoću navigacijskih tipki na dnu).
11. Vertikalni rotator "Vertical Ticker"
jQuery vertikalni rotator: automatsko pomicanje sadržaja na stranici. Tasteri za navigaciju su obezbeđeni, kao i mogućnost zaustavljanja i ponovnog pokretanja rotacije. Kada pomerite kursor miša, kretanje se zaustavlja. Na nivou HTML markupa, okviri koji se mogu pomicati su predstavljeni regularnim stavkama li liste.
12. javascript css područje za pomicanje
javascript "TinyScroller" rješenje za kreiranje područja koje se može pomicati smješteno u DIV kontejneru.
13. Dodatak za jQuery Smooth Div Scroll
Dodatak za implementaciju horizontalnog pomicanja sadržaja u određenom području. Kada pomerite kursor miša preko leve ili desne ivice oblasti, počinje pomeranje.
Navigacija između slajdova sa sadržajem može se vršiti pomoću strelica ili klikom na sličicu. Ispod se nalazi dugme "Prikaži" koje vam omogućava da sakrijete/pokažete sličice ili Puni opis slajd.
15. Rotator sadržaja "Circular Content Carousel"
17. Scroller
Blok sa skrolerom koji se pojavljuje kada pređete mišem preko kursora. Možete se kretati kroz sadržaj koristeći i traku za pomicanje i kotačić miša.
Rješenje slično jQueryju inspirirano je sličnim efektom na Apple stranici. Programeri ove korporacije uvijek su pronalazili zanimljiva rješenja koja su inspirisala webmastere iz cijelog svijeta. Da biste demonstrirali dodatak, odaberite jednu od kategorija sa liste.
19. Sjajan klizač
Klizač se generiše automatski. Podaci sa nazivom proizvoda, opisom, linkom i adresom slike preuzeti su iz datoteke slider.db.txt. Korišćene tehnologije: CSS, PHP, jQuery.
20. Blokirajte rotaciju koristeći jQuery
Da vidite efekat rotacije bloka, kliknite na jedan od malih pravougaonika na demo stranici
Dodatak za pomicanje sadržaja, na primjer, može se koristiti za prikazivanje najnovijih vijesti ili za prikazivanje Twitter letaka na web stranici.
Ovaj dodatak pretvara stavke liste (ul li) u jQuery elementi vrtuljci.
26. javascript vrtuljak "ImageFlow"
Slike se lako pomeraju pomoću točkića miša.
27. Pomicanje sadržaja
Kompaktni blok s najavom najnovijih materijala na stranici ili vijestima. Lijeva kolona prikazuje paginiranu listu kratkih najava najnovijih vijesti. Kada odaberete jedan od njih, desna kolona prikazuje više od Detaljan opis i link za čitanje punog teksta publikacije. Implementirano sa jQuery.
Slike sa linkovima se pomeraju, kada pređete preko miša, pomeranje se zaustavlja i pojavljuje se navigaciona traka. Kada pređete mišem preko slike, njeno ime se također prikazuje između kontrolnih tipki. Odlično izgleda na stranici
