Öökulli karussell - jQuery pistikprogramm puutetoega, mis võimaldab luua tundliku (adaptiivse) liuguri (karusselli). See on väga mugav, lihtne ja adaptiivne pistikprogramm liugurite, karussellide jms loomiseks. Selles artiklis püüan teile selgitada ja näidata, kuidas see töötab.
Owli karusselli pistikprogrammi installimine Kõigepealt peame arhiivi koos pistikprogrammiga alla laadima
Allpool näitan näidet plugina installimisest DataLife Engine’i malli.
Pärast arhiivi allalaadimist avage see ja levitage failid järgmiselt: Fail öökull.karussell.css Ja owl.transitions.csspanna kaustastiilis nii või css. Fail owl.carousel.jspane js kausta
Nüüd peame need failid ühendama, et need meie mallis töötaksid. Faili avamine main.tpl a enne rida sisenema järgmised read:
kausta css muutke selle vastu, milles olete css stiilid! Siis päris allosas enne joont
sisesta see rida: No see on kõik! Oleme paigaldusega valmis.
Nüüd peame liuguri ise sisestama ja konfigureerima. Näitan näitega top uudised need kuvada populaarseid uudiseid meie öökullikarusselli kaudu.
Dokumentatsioonilehel kirjeldatakse kõiki valikuid, demosid ja meie Owl Carouselli pistikprogrammi kasutamist. Järgige linki ja valige soovitud liugur. Meie jaoks top uudised Valisin kõige esimese koos nimega pilte. Kopeerige JavaScripti vahekaardil järgmised read: $(document).ready(function() ( $("#owl-demo").owlCarousel(( automaatesitus: 3000, üksused: 4, üksusedTöölaud: , esemedTöölaudVäike: )); )); ja kleepige need faili main.tpl enne rida
Seejärel kopeerige CSS-i vahekaardil read: #owl-demo .item( margin: 3px; ) #owl-demo .item img( kuva: plokk; laius: 100%; kõrgus: auto; ) ja lisage need mis tahes css faili või faili main.tpl enne rida
aga pärast rida
! Nüüd sõelume oma HTML-koodi ja loome ühenduse top uudised. Failis main.tpl sisestage silt õigesse kohta (populaarsed uudised) mis omakorda annab välja populaarsete uudiste loendi, välimus mida saab failis konfigureerida topenews.tpl, sellest lähemalt allpool .
Meie sildi kood peaks välja nägema järgmine:
(populaarsed uudised)
Noh, nüüd peame lihtsalt uudised ise üles seadma. Faili avamine topnews.tpl ja kohe alguses sisestame:
sulge atribuut päris lõpus
Kui kasutate mõnda minu Bootstrapi malli, saate valikuna kasutada faili järgmisi ridu topnews.tpl:
(title limit = "55")
(tekstipiirang = "100")
Lugema
Sellel kujul kuvatakse uudiseid
Seda pistikprogrammi saab kasutada peaaegu kõikjal, nagu ka sildi kasutamist (kohandatud kategooria) Need võivad asendada ka standardset DLE galeriid, selle kohta avaldan eraldi artikli. Nautige oma tervist ;)
Lugupidamisega admin. lae allaTähelepanu: allalaadimise limiit on täis. Tule homme =)
Praegu on karusselli liugur funktsioon, mis on lihtsalt vajalik ettevõtte veebisaidil, portfelli veebisaidil või mõnel muul ressursil. Lisaks täisekraani pildiliuguritele sobivad horisontaalsed karusselli liugurid hästi igasse veebikujundusse.
Mõnikord peab liugur hõivama kolmandiku saidi lehelt. Siin kasutatakse karusselli liugurit üleminekuefektide ja tundlike paigutustega. E-kaubanduse saidid kasutavad karusselli liugurit, et näidata mitut fotot eraldi postitustes või lehtedel. Liuguri koodi saab tasuta kasutada ja vastavalt oma vajadustele muuta.
Kasutades jQueryt koos HTML5 ja CSS3-ga, saate muuta oma lehed unikaalsete efektidega huvitavamaks ja juhtida külastajate tähelepanu saidi konkreetsele alale.
Slick on tasuta jQuery pistikprogramm, mille arendajad väidavad, et nende lahendus rahuldab kõik teie liuguri nõuded. Reageeriv liugur – karussell võib töötada mobiilseadmete puhul "tile" režiimis ja töölaua versiooni puhul "lohistamise" režiimis.
See sisaldab tuhmumisefekti, huvitavat funktsiooni "režiim keskel", piltide laiska laadimist koos automaatse kerimisega. Uuendatud funktsioonid hõlmavad slaidide ja slaidifiltri lisamist. Kõik, et saaksite pistikprogrammi vastavalt oma vajadustele kohandada.
Sellel pistikprogrammil on suur hulk funktsioone, mis sobivad nii algajatele kui ka kogenud arendajatele. See uuendatud versioon liugur - karussell. Tema eelkäijal oli sama nimi.
Liuguril on mõned sisseehitatud pistikprogrammid üldise funktsionaalsuse parandamiseks. Animatsioon, video taasesitus, liuguri automaatesitus, laisk laadimine, automaatne reguleerimine kõrgused on Owl Carousel 2.0 peamised omadused.
Lohistamise tugi ja kukutage kaasas pistikprogrammi mugavamaks kasutamiseks mobiilseadmed. Pistikprogramm sobib suurepäraselt suurte piltide kuvamiseks isegi mobiilseadmete väikestel ekraanidel.
Näited | Lae alla
jQuery Silver Tracki pistikprogramm
Üsna väike, kuid rikkalik jquery plugin, mis võimaldab paigutada lehele karusselli liugurit, mis on väikese tuumaga ja ei kuluta palju saidiressursse. Pistikprogrammi saab kasutada vertikaalsete ja horisontaalsete liugurite kuvamiseks koos animatsiooniga ja galeriist pildikomplektide loomiseks.
Näited | Lae alla
AnoSlide – ülikompaktne tundlik jQuery liugur
Ultra kompaktne jQuery liugur- karussell, mille funktsionaalsus on palju enamat kui tavalisel liuguril. See sisaldab eelvaadeüks pilt, mitme pildi kuvamine pealkirjade alusel karussellis ja liuguris.
Näited | Lae alla
Öökulli karussell – jquery liugur – karussell
Öökulli karussell - toega liugur puutetundlikud ekraanid Ja lohistamistehnoloogiad ja drop , hõlpsasti HTML-koodi manustatuna. Pistikprogramm on üks parimaid liugureid, mis võimaldab luua kauneid karusselle ilma spetsiaalselt ettevalmistatud märgistuseta.
Näited | Lae alla
3D galerii – karussell
Kasutab 3D-üleminekuid, mis põhinevad CSS-stiilidel ja mõnel Javascripti koodil.
Näited | Lae alla
3D-karussell, kasutades TweenMax.js ja jQuery
Imeilus 3D karussell. Tundub, et tegu on siiski beetaversiooniga, sest avastasin just praegu sellega paar probleemi. Kui olete huvitatud oma liugurite testimisest ja loomisest, on see karussell suureks abiks.
Näited | Lae alla
Bootstrapi kasutav karussell
Automaatselt reageeriv karusselli liugur, mis kasutab alglaadimistehnoloogiat, mis sobib just teie uue veebisaidi jaoks.
Näited | Lae alla
Bootstrapil põhinev liugur – liikuva kasti karussell
Enim otsitud portfelli ja ettevõtete veebisaitidel. Sarnast tüüpi liugurit - karusselli leidub sageli mis tahes tüüpi saitidel.
Näited | Lae alla
Pisike Circleslider
See väikese suurusega liugur on valmis töötama mis tahes ekraani eraldusvõimega seadmetes. Liugur võib töötada nii ringikujulises kui ka karussellrežiimis. Väike ring on esitatud alternatiivina teistele seda tüüpi liuguritele. Sellel on sisseehitatud tugi operatsioonisüsteemid IOS ja Android.
Ringikujulises režiimis tundub liugur üsna huvitav. Pukseerimismeetodi tugi ja automaatne slaidi kerimissüsteem on hästi rakendatud.
Näited | Lae alla
Pöidla sisu liugur
Võimas, kohanemisvõimeline karussell-tüüpi liugur sobib suurepäraselt kaasaegsele saidile. Töötab õigesti igas seadmes. Sellel on horisontaalne ja vertikaalne režiim. Selle suurus on minimeeritud vaid 1 KB-ni. Ülikompaktsel pistikprogrammil on suurepärased sujuvad üleminekud.
Näited | Lae alla
vau liuguri karussell
Sisaldab üle 50 efekti, mis aitavad teil luua saidile originaalse liuguri.
Näited | Lae alla
Reageeriv jQuery sisu liugur bxSlider
Muutke brauseriakna suurust, et näha, kuidas liugur kohaneb. Bxslider pakub üle 50 kohandamisvaliku ja tutvustab selle funktsioone erinevate üleminekuefektidega.
Näited | Lae alla
jKarussell
jCarousel on jQuery pistikprogramm, mis aitab korraldada teie pildivaateid. Saate hõlpsasti luua kohandatud pildikarusselle näites näidatud raamistikust. Liugur on tundlik ja optimeeritud mobiiliplatvormide jaoks.
Näited | Lae alla
ScrollBox – jQuery plugin
Scrollbox on kompaktne pistikprogramm liuguri – karusselli või teksti jooksva rea loomiseks. Peamised funktsioonid hõlmavad vertikaalset ja horisontaalset kerimisefekti koos pausiga hiirekursoril.
Näited | Lae alla
dbpasKarussell
Lihtne karusselli liugur. Kui vajate kiiret pistikprogrammi, on see 100% sobiv. Kaasas ainult põhifunktsioonid, mis on vajalikud liuguri töötamiseks.
Flexiseli loojad ammutasid inspiratsiooni vanakooli pistikprogrammist jCarousel, tehes sellest koopia, keskendudes liuguri õigele tööle mobiil- ja tahvelseadmetes.
Flexiseli reageeriv paigutus erineb mobiilseadmetes töötades brauseriakna suurusele orienteeritud paigutusest. Flexisel on suurepäraselt kohandatud töötama nii madala kui ka kõrge eraldusvõimega ekraanidel.
Näited | Lae alla
Elastislide – tundlik karusselli liugur
Elastislide kohandub ideaalselt seadme ekraani suurusega. Saate määrata teatud eraldusvõimega kuvatavate piltide minimaalse arvu. Töötab hästi karusselli liugurina pildigaleriidega, kasutades fikseeritud ümbrist koos vertikaalse kerimisefektiga.
Näide | Lae alla
Paindlik liugur 2
Woothemesi tasuta tarkvara liugur. Seda peetakse õigustatult üheks parimaks reageerivaks liuguriks. Pistikprogramm sisaldab mitmeid malle ja on kasulik nii algajatele kasutajatele kui ka asjatundjatele.
Näide | Lae alla
Hämmastav karussell
Hämmastav karussell - adaptiivne liugur jQuery pildid. Toetab paljusid sisuhaldussüsteeme nagu WordPress, Drupal ja Joomla. See toetab ka Androidi ja IOS-i ning operatsioonisüsteemide töölauaversioone ilma ühilduvusprobleemideta. Sisseehitatud hämmastavad karussellimallid võimaldavad kasutada liugurit vertikaalses, horisontaalses ja ringikujulises režiimis.
Näited | Lae alla
/* Siit algab meie karussell. Karussell-ümbris on suhteliselt positsioneeritud, karussell-üks on absoluutne. . */ .carousel-wrapper( position:relative; /* Absoluutselt paigutatud kastid saavad oma kõrguse ja laiuse vanemalt. Tegime need vaikimisi läbipaistvaks ja siis tuhmuvad need sisse, kui klõpsate .arrow-prev ja.arrow-next lingid. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; polster:25px50px; läbipaistmatus:0;üleminek:all0.5sease-in-out; /* Märkus polster vasakul ja 50 pikslit paremal? Nii saame oma linke paigutada!Igaüks neist on 50 pikslit lai. Samuti kasutan tühje linke taustamuster nii et lingid näeksid välja nagu nooled. Kontrollige, kas olete muutunud Linkide URL-id algse URL-iga, nii et teie lingid ei oleks lihtsalt läbipaistvad ristkülikud. */ .arrow( position:absolute; top:0; display:block; laius:50px; kõrgus:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); taust:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Anname vasaknoole tagasi. */ &.arrow-prev( left:0; ) /* Ja teine paremale . Kuna ma kasutan noole jaoks sama pilti, siis pööran seda 180 kraadi */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Mulle väga meeldib, kuidas karusselli liumäed näevad tume taust, ja kui .carousel-item plokis on klass "light", muudame selle teksti valgeks ja kasutame hallide noolte asemel valgeid nooli. Kontrollige uuesti, kas tee noolepildini on õige */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Kirjutage meediumipäring väiksema ekraanisuurusega seadmete noolte suuruse muutmiseks.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50% ;) ) ) /* Määra kuvatavad lingi sihtmärgid: puudub; Nii saame lahti brauseri pidevast hüppamisest karusselli kõige tippu iga nooltele klõpsamisega. See omadus kehtib iga elemendi kohta, mille ID algab sõnaga "target-item". */ ( display:none; ) /* Eespool tegime kõik oma karusselli slaidid läbipaistvaks, mis tähendab, et kui karussell laadib, saame selle asemel suure tühja kasti. Muutkem esimese slaidi läbipaistvuse väärtuseks kuvamiseks 1. Seadsime ka z-indeksiks 2, asetades selle ülejäänud slaidide kohale. */ .item-1( z-index:2; opacity:1; ) /* Kuid me ei taha, et esimesel slaidil oleks alati läbipaistmatus: 1; vastasel juhul peame läbima selle liumäe, samal ajal kui teised pöörlevad. */ *:target~.item-1( opacity:0; ) /* ..aga kui #target-item-1 on fookuses ja tahame näidata esimest slaidi, siis valige see ikooniga ~ ja määrake läbipaistmatus tagasi 1 juurde:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Kui fookuses on mõni muu siht-üks-#, valige need valijaga ~, tuhmuge need sisse ja asetage need z-indeksiga peale: 3. Siin saate lisada sihtüksuse ID-ga täiendavaid ulatusi, kui teil on rohkem kui kolm. Saab lisada 10 üksust korraga.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3(z-index:3; opacity:1; ) )
Jah, teema on üsna segane. Kuid sellegipoolest on sageli raske leida seda, mida tegelikult vajate. Kõik pakuvad väga keerukaid skripte, millel on palju lisafunktsioone. Ja tavaliselt on need juba tihendatud pistikprogrammid.
Vastavalt sellele saab varju eemaldada. Ja selle kasutamiseks peate lihtsalt asendama põhiploki suuruse ja pesastatud "kerivad" plokid css-is. Samuti on väga lihtne seda protsessi tsüklit muuta nii, et see keriks automaatselt (sisse sel juhul, lihtsalt tühjendage funktsiooni kutse auto_right kommentaarid). See tähendab, et ülesande raames saate sellest tagasihoidlikust galeriist teha kõike, mida vajate!
Samuti tuleb märkida, et see näide on adaptiivne, st karusselli suurus kohandub vastavalt ekraani suurusele ja kuvatakse õigesti nii arvuti või sülearvuti ekraanil kui ka tahvelarvuti ja nutitelefoni ekraanil.
1. jQuery karussell "clickCarousel"
Blokeeri kerivate uudisteadetega. Plokkide kerimiseks kasutatakse vasakut/paremat noolt. Arhiivis on karussell kahes stiilis: hele ja tume.
1. jQuery karussell, carouFredSeli pistikprogramm
Korralik ja värske jQuery pildikarussell.
4. jQuery plugin: Elastislide'i karussell
5. Pistikprogramm "TinyCarousel"
Suurepärased sisuliugurid jQuery abil pildikarusselli kujul. Demolehel kirjeldatakse, kuidas see karussell oma saidiga siduda.
Plugin "Slider Kit", kerge karussell koos erinevaid viise kerige.
Algne navigeerimine piltide pisipiltide vahel. Demolehe paremas servas efekti vaatamiseks klõpsake nuppu Üles ja Alla. See jQuery lahendus pakub ka hõljumise efekti pisipildil ja hiirerattaga kerimisel.
9. Lihtne karussell
10. Easy Paginate plokkkarussell
jQuery pistikprogramm "Easy Paginate". Iga ristkülikukujuline plokk on tavaline li loendi üksus ja kui üksusi on rohkem kui kolm, siis nende vaatamiseks on vaja ainult liugurilaadset navigeerimist (kasutades edasi- ja tagasinooli ning allosas olevaid navigeerimisnuppe).
11. Vertikaalne rotaator "Vertical Ticker"
jQuery vertikaalne pööraja: lehe sisu automaatne kerimine. Pakutakse navigeerimisnupud, samuti võimalus pöörlemist peatada ja uuesti käivitada. Kui liigutate hiirekursorit, siis liikumine peatub. HTML-märgistuse tasemel on keritavad kastid esindatud tavaliste li-loendiüksustega.
12. javascript css keritav ala
javascript "TinyScroller" lahendus DIV-konteinerisse paigutatud keritava ala loomiseks.
13. jQuery Smooth Div Scroll Plugin
Plugin sisu horisontaalse kerimise rakendamiseks konkreetses piirkonnas. Kui liigutate hiirekursori üle ala vasaku või parema serva, algab kerimine.
Sisu sisaldavate slaidide vahel saab liikuda noolte abil või pisipildil klõpsates. All on nupp "Näita", mis võimaldab peita/näidata pisipilte või Täielik kirjeldus libisema.
15. Sisu pööraja "Ringikujuline sisukarussell"
17. Kerimisrull
Kerimisega plokk, mis ilmub kursori kohal hõljutamisel. Sisu saate kerida nii kerimisriba kui ka hiireratta abil.
jQuery-laadne lahendus sai inspiratsiooni sarnasest efektist Apple'i saidil. Selle ettevõtte arendajad on alati leidnud huvitavaid lahendusi, mis inspireerisid veebihaldureid üle kogu maailma. Pistikprogrammi demonstreerimiseks valige loendist üks kategooriatest.
19. Äge liugur
Liugur genereeritakse automaatselt. Andmed koos toote nime, kirjelduse, lingi ja pildi aadressiga on võetud failist slider.db.txt. Kasutatud tehnoloogiad: CSS, PHP, jQuery.
20. Blokeerige pööramine jQuery abil
Ploki pööramise efekti nägemiseks klõpsake demolehel ühel väikesel ristkülikul
Sisu kerimise pistikprogrammi saab kasutada näiteks viimaste uudiste kuvamiseks või saidil Twitteri flaierite kuvamiseks.
22. Dünaamiline plokk "Klientide ülevaated"
Ploki sisu automaatne pööramine. Kasutatavad tehnoloogiad: PHP, XML, CSS, jQuery.
See plugin teisendab loendi üksused (ul li) järgmiseks jQuery elemendid karussellid.
26. JavaScripti karussell "ImageFlow"
Pilte on lihtne hiirerattaga kerida.
27. Sisu kerimine
Kompaktne plokk saidi viimaste materjalide või uudiste väljakuulutamisega. Vasakpoolses veerus kuvatakse viimaste uudiste lühiteadete lehekülgede loetelu. Kui valite neist ühe, kuvatakse parempoolses veerus rohkem kui Täpsem kirjeldus ja link väljaande täisteksti lugemiseks. Rakendatud jQueryga.
Linkidega pilte keritakse, kui hõljutate kursorit üle, kerimine peatub ja kuvatakse navigeerimisriba. Kui liigutate kursorit pildi kohal, kuvatakse juhtnuppude vahel ka selle nimi. Näeb lehel suurepärane välja
