Bagoly körhinta - jQuery bővítményérintéses támogatással, lehetővé téve egy reszponzív (reszponzív) csúszka (körhinta) létrehozását. Nagyon kényelmes, egyszerű és reszponzív plugin csúszkák, körhinta stb. létrehozásához. Ebben a cikkben megpróbálom elmagyarázni és megmutatni, hogyan működik.
Az Owl Carousel beépülő modul telepítése Először is le kell töltenünk az archívumot a bővítménnyel
Az alábbiakban egy példát mutatok be egy bővítmény DataLife Engine sablonba történő telepítésére.
Miután letöltöttük az archívumot, nyissa meg, és ossza szét a fájlokat az alábbiak szerint: Fájl bagoly.körhinta.cssés owl.transitions.csstegye be a mappábastílus szóval ill css. Fájl owl.carousel.jstedd be a js mappába
Most össze kell kapcsolnunk ezeket a fájlokat, hogy működjenek a sablonunkban. A fájl megnyitása fő.tpl a sor előtt belépünk következő sorokat:
Mappa css váltson arra, amelyikben van css stílusok! Aztán a legvégén a sor előtt
beírjuk a következő sort: Szóval ennyi! Elkészültünk a telepítéssel.
Most magát a csúszkát kell beillesztenünk és konfigurálnunk. Egy példával mutatom be tophírek azok népszerű híreket jelenít meg bagolykörhintaunkon keresztül.
A dokumentációs oldal leírja az összes lehetőséget, bemutatót és a Bagoly körhinta bővítményünk használatát. Kövesse a linket, és válassza ki a kívánt csúszkát. A miénkért tophírek A legelsőt választottam névvel Képek. A JavaScript lapon másolja a következő sorokat: $ (dokumentum) .ready (függvény () ($ ("# owl-demo"). owlCarousel ((autoPlay: 3000, elemek: 4, itemsDesktop:, itemsDesktopSmall:));));és helyezze be őket a fájlba fő.tpl a sor előtt
Ezután a CSS lapon másolja ki a sorokat: # owl-demo .item (margin: 3px;) # owl-demo .item img (megjelenítés: blokk; szélesség: 100%; magasság: auto;) és bármilyen css fájl vagy fájl fő.tpl a sor előtt
de a sor után
! Most elemezzük a HTML kódunkat, és összekapcsoljuk tophírek. Fájlban fő.tpl helyezze be a címkét a megfelelő helyre (legfőbb hírek) ami viszont megjeleníti a népszerű hírek listáját, megjelenés amely a fájlban konfigurálható topenews.tpl, erről lentebb bővebben .
A címkézett kódunknak így kell kinéznie:
(legfőbb hírek)
Nos, most már nekünk kell magát a hírt beállítani. A fájl megnyitása topnews.tplés a legelején beírjuk:
a legvégén bezárjuk az attribútumot
Ha az egyik sablonomat használja a Bootstrap segítségével, akkor lehetőségként használhatja a következő sorokat a fájlban topnews.tpl:
(címhatár = "55")
(szövegkorlát = "100")
Olvas
A hírek a következőképpen jelennek meg
Ez a bővítmény szinte bárhol használható, akárcsak a címke használatával (egyéni kategória) A szokásos DLE galériát is helyettesítheti, erről külön cikket teszek közzé. Használd egészségedre ;)
Üdvözlettel, admin. LetöltésFigyelem: elérte a letöltési korlátot. Gyere holnap =)
Jelenleg egy csúszka - körhinta - funkció, amelyre csak szükség van egy vállalkozás webhelyén, egy webhelyen - egy portfólióban vagy bármely más erőforrásban. A teljes képernyős képcsúszkák mellett a vízszintes körhintacsúszkák jól illeszkednek bármilyen webdizájnba.
Néha a csúszkának el kell foglalnia a webhely oldalának egyharmadát. Itt a körhinta csúszkát átmeneti effektusokkal és reszponzív elrendezésekkel használják. Az e-kereskedelmi webhelyek egy körhinta csúszkát használnak, hogy több fotót is megjelenítsenek az egyes bejegyzésekben vagy oldalakon. A csúszka kódja szabadon használható és az Ön igényei szerint módosítható.
A jQuery HTML5 és CSS3 együttes használatával érdekesebbé teheti oldalait, egyedi effektusokkal látva el őket, és felhívhatja a látogatók figyelmét a webhely egy adott területére.
Slick – modern slider plugin – körhinta
A Slick egy ingyenes jquery bővítmény, amelynek fejlesztői azt állítják, hogy megoldásuk minden csúszkával kapcsolatos követelményt kielégít. Az érzékeny körhinta csúszka mobileszközökön csempe módban, asztali verzió esetén pedig fogd és vidd módban működhet.
Tartalmaz egy „fade” átmeneti effektust, egy érdekes funkciót „mód a közepén”, képek lusta betöltése automatikus görgetéssel. A frissített funkciók közé tartozik a diák és a diaszűrő. Mindent azért, hogy igényei szerint testreszabhassa a bővítményt.
Ennek a beépülő modulnak számos funkciója van az arzenáljában, kezdők és tapasztalt fejlesztők számára egyaránt. azt frissített verzió csúszka - körhinta. Az elődjét pontosan ugyanígy nevezték el.
A csúszka néhány beépített bővítményt tartalmaz az általános funkcionalitás javítása érdekében. Animáció, videolejátszás, csúszka automatikus lejátszása, lusta betöltés, automatikus korrekció magasságok - az Owl Carousel 2.0 főbb jellemzői.
Húzás támogatása és ejtse le mellékelve a beépülő modul kényelmesebb használatához mobil eszközök. A beépülő modul tökéletes nagy képek megjelenítésére még a mobileszközök kis képernyőjén is.
Példák | Letöltés
jQuery Silver Track Plugin
Meglehetősen kicsi, de funkcionalitásban gazdag jquery bővítmény, amely lehetővé teszi egy csúszka elhelyezését az oldalon - egy körhinta, amelynek kicsi a magja és nem fogyaszt sok webhely erőforrást. A beépülő modul használható függőleges és vízszintes csúszkák, animációk megjelenítésére és képkészletek létrehozására a galériából.
Példák | Letöltés
AnoSlide – Ultra kompakt, érzékeny jQuery csúszka
Ultra kompakt jQuery csúszka- körhinta, amelynek funkcionalitása sokkal több, mint egy normál csúszkaé. Tartalmazzák előnézet egyetlen kép, több kép megjelenítése körhinta és címalapú csúszkában.
Példák | Letöltés
Bagoly körhinta – Jquery Slider – körhinta
Bagoly körhinta - csúszka támasztékkal érintőképernyőkés drag technológiaés könnyen beágyazható HTML kódba. A beépülő modul az egyik legjobb csúszka, amely lehetővé teszi gyönyörű körhinták létrehozását speciálisan előkészített jelölések nélkül.
Példák | Letöltés
3D galéria - körhinta
3D-s átmeneteket használ CSS-stílusok és néhány Javascript kód alapján.
Példák | Letöltés
3D körhinta a TweenMax.js és a jQuery használatával
Nagyszerű 3D körhinta. Úgy tűnik, ez még mindig béta verzió, mert most fedeztem fel vele egy-két problémát. Ha érdekel a saját csúszkák tesztelése és létrehozása, ez a körhinta nagy segítségedre lesz.
Példák | Letöltés
Körhinta bootstrap használatával
Reszponzív körhinta csúszka bootstrap technológiával, pontosan az Ön új webhelyéhez.
Példák | Letöltés
A Bootstrap - Moving Box körhinta csúszka keretrendszerén alapul
A legkeresettebb portfólió- és üzleti oldalakon. Ez a típusú körhintacsúszka gyakran megtalálható bármilyen típusú webhelyen.
Példák | Letöltés
Tiny Circleslider
Ez az apró csúszka bármilyen képernyőfelbontású készüléken használható. A csúszka körkörös és körhinta módban is működhet. Az apró kör a többi hasonló típusú csúszka alternatívájaként jelenik meg. Van beépített támogatás operációs rendszer IOS és Android.
A csúszka elég érdekesen néz ki körkörös módban. A drag and drop támogatás és az automatikus csúszásgörgető rendszer kiválóan megvalósított.
Példák | Letöltés
Thumbelina tartalomcsúszka
Erőteljes, reszponzív, körhintacsúszka tökéletes egy modern webhelyhez. Minden eszközön megfelelően működik. Vízszintes és függőleges módokkal rendelkezik. A mérete mindössze 1 KB-ra van minimalizálva. Az ultra kompakt bővítmény kiváló sima átmenetekkel is rendelkezik.
Példák | Letöltés
Wow - csúszka - körhinta
Több mint 50 effektust tartalmaz, amelyek segítségével eredeti csúszkát hozhat létre webhelyéhez.
Példák | Letöltés
Reszponzív jQuery tartalomcsúszka bxSlider
Méretezze át a böngészőablakot, hogy megtudja, hogyan alkalmazkodik a csúszka. A Bxslider több mint 50 testreszabási lehetőséget kínál, és különféle átmeneti effektusokkal mutatja be funkcióit.
Példák | Letöltés
jKörhinta
A jCarousel egy jQuery beépülő modul, amely segít megszervezni a kép előnézetét. A példában látható keretrendszerből egyszerűen készíthet egyedi körhintaképeket. A csúszka érzékeny és mobilplatformokon való működésre optimalizálva.
Példák | Letöltés
Scrollbox – jQuery bővítmény
A Scrollbox egy kompakt bővítmény csúszka - körhinta vagy szöveggörgető vonal létrehozásához. A legfontosabb funkciók közé tartozik a függőleges és vízszintes görgetés az egérrel történő szüneteltetéssel.
Példák | Letöltés
dbpasCarousel
Egyszerű csúszka - körhinta. Ha gyors beépülő modult szeretne, ez 100%-ban jó. Csak a csúszka működéséhez szükséges alapvető funkciókat tartalmazza.
Példák | Letöltés
Flexisel: Reszponzív JQuery Slider beépülő modul – körhinta
A Flexisel készítői a régi jCarousel beépülő modulból merítettek ihletet, és egy másolatot készítettek belőle, amely a csúszka helyes működésére összpontosított mobil- és táblagépeken.
A Flexisel reszponzív elrendezése mobileszközökön végzett munka során eltér a böngészőablak méretéhez igazított elrendezéstől. A Flexisel tökéletesen alkalmazkodik az alacsony és nagy felbontású képernyőkön való munkához.
Példák | Letöltés
Elastislide - érzékeny csúszka - körhinta
Az Elastislide tökéletesen alkalmazkodik a készülék képernyőméretéhez. Beállíthatja, hogy egy adott felbontásban hány képek jelenjenek meg minimálisan. Jól működik a képgaléria körhinta csúszkájaként, rögzített burkolóanyaggal és függőleges görgetőeffektussal együtt.
Példa | Letöltés
FlexSlider 2
Szabadon terjeszthető csúszka a Woothemes-től. Az egyik legjobban reagáló csúszkának tartják. A bővítmény számos sablont tartalmaz, és mind a kezdő felhasználók, mind a szakértők számára hasznos lesz.
Példa | Letöltés
Csodálatos körhinta
Csodálatos körhinta - reszponzív csúszka képeket a jQuery segítségével. Számos webhelykezelő rendszert támogat, mint például a WordPress, a Drupal és a Joomla. Támogatja az Android és IOS operációs rendszereket, valamint az operációs rendszerek asztali verzióit is, kompatibilitási probléma nélkül. A beépített csodálatos körhintasablonok lehetővé teszik a csúszka függőleges, vízszintes és körkörös módban történő használatát.
Példák | Letöltés
/ * Innen indul a körhinta. A .carousel-wrapper blokk viszonylag, a .carousel-elem abszolút pozicionált. ... * / .carousel-wrapper (pozíció: relatív; / * Az abszolút pozicionált dobozok magasságukat és szélességüket a szülőtől kapják. Alapértelmezésben átlátszóvá tettük őket, majd a linkekre kattintva elhalványulnak .arrow-prev és.arrow- következő. * / .carousel-itetem (pozíció: abszolút; felül: 0; alul: 0; bal: 0; jobbra: 0; kitöltés: 25px50px; átlátszatlanság: 0; átmenet: minden 0,5-be-kifelé; / * Megjegyzés a bal és jobb oldali kitöltés 50 képponttal? Így tudjuk elhelyezni a linkjeinket! Mindegyik 50 képpont széles lesz. Ezen kívül üres linkeket használok háttér minta oly módon, hogy a hivatkozások nyilaknak tűnjenek. Ellenőrizze, hogy változott-e Link URL az eredeti URL-lel, hogy a linkek ne csak átlátszó téglalapok legyenek. * / .arrow (pozíció: abszolút; felül: 0; kijelző: blokk; szélesség: 50 képpont; magasság: 100%; -webkit-tap-highlight-color: rgba (0,0,0,0); háttér: url ( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; / * Vigyük vissza a nyilat balra. * / & .arrow-prev (balra: 0;) / * És a második jobbra. Mivel ugyanazt a képet használom a nyílhoz, 180 fokkal elforgatom. * / & .arrow-next (jobbra: 0; -webkit-transform: forgatás (180 fok); transzformáció: forgatás (180 fok);) ) / * Nagyon szeretem a körhinta csúszdáit sötét háttérés ha a .carousel-item blokk "light" osztályú, akkor a szövegét fehérre változtatjuk, és a szürkék helyett fehér nyilakat használunk. Ellenőrizze újra, hogy a nyíl képének elérési útja helyes-e * / & .light (szín: fehér; .arrow (háttér: url ("/ carousel-arrow-light.png") 50% 50% / 20pxno-repeat;)) / * Írjon médialekérdezést a nyilak átméretezéséhez kisebb eszközökön * / @media (max. szélesség: 480px) (.nyíl, &. Light.arrow (háttérméret: 10px; háttérpozíció: 10px50% ;))) / * Állítsa be a megjelenítendő hivatkozások célját: nincs; Így megszabadulunk attól, hogy a böngésző minden egyes nyilakkattintással a körhinta legtetejére ugráljon. Ez a tulajdonság minden olyan tételre érvényes, amelynek azonosítója „target-item”-vel kezdődik. * / (megjelenítés: nincs;) / * Fent minden körhinta csúszdáját átlátszóvá tettük, ami azt jelenti, hogy a körhinta betöltésekor egy nagy üres mezőt kapunk helyette. Módosítsa az első dia átlátszósági értékét 1-re a megjelenítéshez. Állítsa a z-indexet is 2-re, és helyezze a többi diák fölé. * / .item-1 (z-index: 2; átlátszatlanság: 1;) / * De nem akarjuk, hogy az első dia mindig átlátszatlan legyen: 1; különben át kell haladnunk ezen a csúszdán, miközben a többiek forognak. * / *: target ~ .item-1 (átlátszatlanság: 0;) / * .. de ha a # target-item-1 fókuszban van és az első diát szeretnénk megjeleníteni, akkor jelöljük ki a ~ ikonnal és állítsuk be az átlátszatlanságot vissza 1-re :-) * / # target-item-1: target ~ .item-1 (átlátszatlanság: 1;) / * Ha más target-item- # vannak fókuszban, jelölje ki őket a ~ választó segítségével, simán mutassa meg , és a z-index segítségével helyezze el őket a tetejére: 3. Ha háromnál több van, itt adhat hozzá további spanokat a célelem azonosítójával. 10 elemet adhat hozzá egyszerre .. * / # target-item-2: target ~ .item-2, # target-item-3: target ~ .item-3 (z-index: 3; opacitás: 1;))
Igen, a téma elég elcsépelt. Ennek ellenére gyakran nehéz megtalálni azt, amire igazán szüksége van. Mindegyik rendkívül kifinomult szkripteket kínál sok szükségtelen funkcióval. És általában ezek már tömörített bővítmények.
Szóval felajánlom az enyémet Alternatív lehetőség egy nagyon egyszerű jQuery körhinta.
Használható képek körhintaként, hírek vagy bármilyen más tartalom körhintaként =)
Az egyetlen kis csengő és síp, amit megengedtem magamnak, az árnyék volt a körhintatömbnél.
UPD: 2014.07.06
Valahogy így fog kinézni: DEMO Letöltés
A szerkezet a következő formában lesz:
TJ egyszerű adaptív karusszel
Ismertesse a stílusokat:
Körhinta (max. szélesség: 1080 képpont; / * a teljes blokk szélessége * / margó: 50 képpont automatikus; szélesség: 100%;). Körhinta burkolólap (margó: 10 képpont 30 képpont; / * nyilak kitöltése * / túlcsordulás: rejtett; / * tartalom elrejtése a fő területen kívül * / pozíció: relatív;). körhinta-elemek (szélesség: 10000 képpont; / * nagyobb szélességet állítson be az elemkészlethez * / pozíció: relatív; / * a dobozt a fő körhintahoz képest helyezze el terület * /). carousel -blokk (lebegtetés: balra; / * az összes körhinta elemet sorba rendezi * / szélesség: 250 képpont; / * az egyes elemek szélességének beállítása * / kitöltés: 10px 10px 10px 0px; / * hézagok készítése hogy az elemek ne egyesüljenek * /) .carousel -block img (megjelenítés: blokk;) / *********** GOMBOK *********** / .carousel-button -bal a, .carousel-button-right a (szélesség: 25px; magasság: 36px; pozíció: relatív; felső: 80px; kurzor: mutató; szövegdekoráció: nincs;) .carousel-button-bal a (lebegés: bal ; háttér: url (../ images / carousel- left.png);) .carousel-button-right a (float: jobb; háttér: url (../ images / carousel-right.png); ) / *********** SHADOW ************ / .shadow (box-shadow: 0px 0px 10px rgba (0, 0, 0, 0,6);)
Ennek megfelelően az árnyék eltávolítható. A használathoz pedig csak a fő blokk és a beágyazott "görgető" blokkok méretét kell lecserélni a css-ben. Ezenkívül nagyon könnyű hurkolni ezt a folyamatot, hogy automatikusan görgessen (be ebben az esetben, csak törölje az auto_right függvény hívását). Vagyis ebből az egyszerű galériából mindent elkészíthetsz, ami a feladat keretein belül kell!
Azt is meg kell jegyezni, hogy ha az adott példa adaptív, vagyis a körhinta mérete a képernyő méretéhez igazodik, és helyesen jelenik meg mind a számítógép vagy laptop képernyőjén, mind a képernyőn. a táblagépek és okostelefonok képernyőjén.
1.jQuery clickCarousel
Egy blokk görgető hírközlésekkel. A bal/jobb nyilak segítségével görgetheti a blokkokat. Az archívum kétféle stílusú körhintat tartalmaz: világos és sötét.
1.jQuery körhinta bővítmény "carouFredSel"
Egy szép friss jQuery képkörhinta.
4. jQuery Plugin: Elastislide Carousel
5. "TinyCarousel" beépülő modul
Nagyszerű tartalomcsúszkák képkörhinta formájában a jQuery használatával. A bemutató oldal leírja, hogyan csatolhatja ezt a körhintat webhelyéhez.
Slider Kit plugin, könnyű körhinta különböző utak görgetés.
7.javascript körhinta
8. jQuery bővítmény "Rács navigációs effektusok"
Eredeti navigáció a képek miniatűrjei között. Ha meg szeretné tekinteni a hatást a bemutató oldal jobb oldalán, kattintson a Fel és Le gombokra. Ez a jQuery-megoldás hatással van a miniatűrök mozgatására és az egérgörgő görgetésére is.
9. Könnyű körhinta
10. Carousel az Easy Paginate blokkokból
jQuery plugin "Easy Paginate". Minden téglalap alakú blokk egy szabályos listaelemet jelent li, és ha háromnál több elem van, akkor ezek megtekintéséhez csak egy csúszkaszerű navigációra van szükség (az "előre", "hátra" nyilak és a navigációs gombok segítségével az alsó).
11. Függőleges forgató "Függőleges ticker"
JQuery függőleges forgató: a tartalom automatikus görgetése az oldalon. Navigációs gombok is rendelkezésre állnak, valamint lehetőség van a forgás leállítására és újraindítására. Ha az egér fölé viszi az egeret, a mozgás leáll. A HTML jelölés szintjén a görgető blokkokat szokásos li listaelemek képviselik.
12.javascript css görgethető terület
javascript "TinyScroller" megoldás egy DIV-tárolóba csomagolt görgethető terület létrehozásához.
13. jQuery plugin "Smooth Div Scroll"
Beépülő modul a tartalom vízszintes görgetésének megvalósításához egy adott területen. Amikor az egérmutatót a terület bal vagy jobb széle fölé viszi, elindul a görgetés.
A tartalomdiák között a nyilak segítségével vagy egy miniatűrre kattintva navigálhat. Alul van egy "Megjelenítés" gomb, amivel elrejtheti/megjelenítheti a miniatűröket ill Teljes leírás csúszik.
15. Tartalomforgató „Circular Content Carousel”
17. Görgető
Egy blokk egy görgetővel, amely az egérmutatón jelenik meg. A tartalmat a görgetősáv vagy az egérgörgő segítségével görgetheti.
Ezt a jQuery megoldást egy hasonló hatás ihlette az Apple webhelyén. Ennek a vállalatnak a fejlesztői mindig találtak olyan érdekes megoldásokat, amelyek a világ minden tájáról inspirálták a webmestereket. A bővítmény bemutatásához válasszon bármelyik kategóriából a listából.
19. Félelmetes csúszka
A csúszka automatikusan generálódik. Az adatok a terméknévvel, leírással, hivatkozással és képcímmel a slider.db.txt fájlból származnak. Felhasznált technológiák: CSS, PHP, jQuery.
20. Blokkok forgatása jQuery segítségével
A blokkforgatás hatásának megtekintéséhez kattintson az egyik kis téglalapra a bemutató oldalon
Egy tartalomgörgető beépülő modul például a legfrissebb hírek megjelenítésére vagy Twitter-szórólapok megjelenítésére használható egy webhelyen.
Ez a bővítmény konvertálja a listaelemeket (ul li) a következőre jQuery elemek körhinta.
26. javascript ImageFlow körhinta
A képek könnyen görgethetők az egér görgőjével.
27. Tartalom görgetése
Kompakt blokk az oldalon található legfrissebb anyagok vagy hírek bejelentésével. A bal oldali oszlop a legfrissebb hírekről szóló rövid közlemények oldalszámozású listáját jeleníti meg. Ha kiválaszt egyet közülük, több mint Részletes leírásés egy hivatkozás a kiadvány teljes szövegének elolvasásához. jQuery-vel implementálva.
A hivatkozásokat tartalmazó képek görgetésre kerülnek, ha az egeret rámutatjuk, a görgetés leáll, és megjelenik a navigációs sáv. Ha az egeret a kép fölé viszi, annak neve is megjelenik a vezérlőgombok között. Nagyon jól néz ki az oldalon
