Vízszintes körhinta. Hogyan készítsünk körhintat csak HTML és CSS használatával. Flexisel: Reszponzív JQuery Slider Plugin - Carousel

A jQuery körhinta beépülő modulok lehetővé teszik a webhelyek tartalmának vonzóbb megjelenítését. Az ilyen beépülő modulok segítségével gyönyörű prezentációkat készíthet közvetlenül a webhelyek oldalain, és felhívhatja a látogatók figyelmét.

1. Bootstrap Ambilight Slider

A Bootstrap Ambilight Slider egy beépülő modul, amellyel csúszkákat/körhintákat hozhatunk létre környezeti fényeffektussal és Bootstrap funkcióval.

2. jQuery TouchSwipe Carousel

A jQuery TouchSwipe Carousel beépülő modul lehetővé teszi az érintések észlelését az érintőképernyőn, és szimulálja az egérgomb megnyomását.

3. ItemSlide

Az ItemSlide.js egy jquery beépülő modul olyan körhinta létrehozásához, amely asztali számítógépeken és mobil érintőképernyős eszközökön egyaránt működik.

4.

– jquery bővítmény adaptív körhinták/csúszkák létrehozásához.

5.

Teljesen reszponzív és mobilra optimalizált jquery körhinta bővítmény. Az animációhoz itt CSS3 átmeneteket használunk, de van egy tartalék opció is a jQuery-ben. A beépülő modul korlátlan számú diát támogat bármilyen típusú tartalommal. képes együttműködni a billentyűzettel, ugyanakkor jól működik a legtöbb böngészőben, beleértve a mobilokat is.

6. SilverTrack

A SilverTrack egy bővíthető jQuery beépülő modul. Egy kis magból áll, amelyhez kényelmes bővítményeket csatlakoztathat.

7. Bagolykörhinta 2

Owl Carousel 2 – teljesen reszponzív körhinta a jQuery/Zepto számára támogatással érintőképernyők.

8. UtilCarousel

UtilCarousel – jQuery körhinta bővítmény zökkenőmentes átmenetekkel hardveres gyorsítás. Teljesen adaptív. A beépülő modul támogatja az érintőképernyőket, és hardveresen gyorsított 3D CSS3 animációt használ. Ennek köszönhetően a bővítmény jól fog kinézni mind asztali PC-n, mind mobil eszközök. Az UtilCarouselt érintéssel, navigációval vagy az egérgörgővel vezérelheti.

9. Sima

A Slick egy reszponzív jQuery körhinta, amely mindent tartalmaz, amire szüksége van.

10. CodingJack 3D körhinta

Ezt a körhintat iOS és Android készülékek támogatják, és érintéses ellop funkcióval is fel van szerelve. Remekül néz ki táblagépeken és okostelefonokon.

11. jQuery diavetítés

A jQuery Slideshow egy körhinta és csúszka kézmozdulatokat támogató érintőképernyős eszközökhöz. A beépülő modul archívuma mindössze 2 kilobájtot nyom.

12. FlimRoll

A FlimRoll egy miniatűr jQuery körhinta, amely a felhasználó figyelmét összpontosítja konkrét tárgy, helyezze a képernyő közepére.

13. Tikslus

A Tikslus egy teljesen reszponzív jQuery körhinta, számos funkcióval és tulajdonsággal. A beépülő modul kiváló alkalmazkodóképessége pedig lehetővé teszi, hogy ne adjon meg képméretet. Emellett érdemes megjegyezni a CSS3 osztályokon alapuló egyedi animációk támogatását. A Tikslus a Jquery Mobile beépülő modullal használható.

14.Scrollbox

A Scrollbox egy egyszerű, miniatűr jQuery beépülő modul, amely a listákat körhintasá vagy tickerré alakítja.

15. Sky Touch Carousel

A Sky Touch Carousel egy jQuery körhinta bővítmény gazdag funkciókészlettel. A bővítmény adaptív, támogatja az érintőképernyőket, ugyanakkor gyorsan és zökkenőmentesen működik. A beállítások lehetővé teszik a változtatást kinézet körhinták CSS használatával.

16.

– rugalmas jQuery bővítmény diavetítések vagy körhinta létrehozásához. Számos beállítással rendelkezik, beleértve az átmenettípusokat, a képigazítást és a keretváltási sebességet.

Jelenleg a csúszka - körhinta - olyan funkció, amely egyszerűen szükséges egy üzleti webhelyen, portfóliówebhelyen vagy bármely más erőforráson. A teljes képernyős képcsúszkák mellett a vízszintes körhintacsúszkák jól illeszkednek minden webdizájnba.

Néha a csúszkának a webhely oldalának egyharmadát kell elfoglalnia. 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 több fénykép megjelenítéséhez az egyes bejegyzésekben vagy oldalakon. A csúszka kódja szabadon felhaszná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átja el őket, és felhívhatja a látogatók figyelmét a webhely egy meghatározott területére.

Slick – modern körhinta csúszka bővítmény

A Slick egy szabadon elérhető jquery beépülő modul, amelynek fejlesztői azt állítják, hogy megoldásuk minden csúszkával kapcsolatos követelményt kielégít. Adaptív csúszka - a körhinta mobil eszközökön „mozaik” módban, asztali verzió esetén „húzás” módban is működhet.

Tartalmaz egy „fade” átmeneti effektust, egy érdekes „központi mód” funkciót, a képek lusta betöltését automatikus görgetéssel. A frissített funkciók közé tartozik a diák és a diaszűrő. Mindezt azért, hogy a beépülő modult az igényeinek megfelelően konfigurálja.

Demo mód | Letöltés

Owl Carousel 2.0 – jQuery – érintőképernyős eszközökön használható bővítmény

Ez a bővítmény számos funkcióval rendelkezik, kezdők és tapasztalt fejlesztők számára egyaránt. Ez a körhinta csúszka frissített változata. Elődje ugyanezt a nevet viselte.

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 magasságállítás – ezek az Owl Carousel 2.0 fő funkciói.

Drag and drop támogatást tartalmaz a bővítmény kényelmesebb használatához mobileszközökön.
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 plugin Silver Track

Meglehetősen kicsi, de funkcionálisan 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 megjelenítésére, animációval é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 nagyobb, mint egy hagyományos csúszkaé. Ez magában foglalja előnézet egy kép, több kép megjelenítése körhinta és címek alapján csúszka formájában.

Példák | Letöltés

Bagoly körhinta – Jquery csúszka – körhinta

Az Owl carousel egy csúszka, amely támogatja az érintőképernyőket és a drag and drop technológiát, és könnyen integrálható a HTML-kódba. A bővítmény 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 egy kis Javascript kód alapján.

Példák | Letöltés

3D körhinta a TweenMax.js és a jQuery használatával

Csodálatos 3D körhinta. Úgy tűnik, ez még mindig béta verzió, mert most fedeztem fel egy-két problémát vele. Ha érdekli a saját csúszkák tesztelése és létrehozása, ez a körhinta nagy segítség lesz.

Példák | Letöltés

Körhinta bootstrap használatával

Reszponzív csúszka – körhinta bootstrap technológiával, csak az Ön új webhelyéhez.

Példák | Letöltés

Bootstrap keretrendszeren alapuló Moving Box körhinta csúszka

A legnépszerűbb portfólió- és üzleti webhelyeken. Ez a típusú csúszka - körhinta - gyakran megtalálható bármilyen típusú webhelyen.

Példák | Letöltés

Tiny Circleslider

Ez az apró méretű 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 az ilyen típusú csúszkák alternatívájaként jelenik meg. Az operációs rendszerekhez beépített támogatás tartozik iOS rendszerekés Android.

Körkörös módban a csúszka meglehetősen érdekesnek tűnik. Kiválóan támogatja a fogd és vidd módszert és az automatikus csúszásgörgető rendszert.

Példák | Letöltés

Thumbelina tartalomcsúszka

Az erőteljes, adaptí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 csökkentve. 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épek megtekintését. A példában látható alapból egyszerűen készíthet egyéni képkörhinta. A csúszka adaptív és mobilplatformokon való munkára optimalizált.

Példák | Letöltés

Scrollbox – jQuery bővítmény

A Scrollbox egy kompakt bővítmény csúszka létrehozásához - körhinta vagy szöveges feltérképezés. A legfontosabb jellemzők közé tartoznak a függőleges és vízszintes görgetési effektusok, amelyeken az egeret megállíthatja.

Példák | Letöltés

dbpasCarousel

Egy egyszerű körhinta csúszka. Ha gyors bővítményre van szüksége, ez 100%-ban megfelelő. Csak azokat az alapvető funkciókat tartalmazza, amelyek a csúszka működéséhez szükségesek.

Példák | Letöltés

Flexisel: reszponzív jQuery slider plugin - körhinta

A Flexisel készítőit a jCarousel régi beépülő modul ihlette, amelyből egy másolatot készítettek azzal a céllal, hogy a csúszka helyesen működjön mobil- és táblagépeken.

A Flexisel reszponzív elrendezése, ha mobileszközökön fut, eltér a böngészőablak méretű elrendezésétől. A Flexisel tökéletesen illeszkedik az alacsony és nagy felbontású képernyőkön való munkához.

Példák | Letöltés

Elastislide – adaptív csúszka – körhinta

Az Elastislide tökéletesen alkalmazkodik a készülék képernyőjének méretéhez. Kérdezhetsz minimális mennyiség meghatározott felbontásban jeleníti meg a képeket. Jól működik körhinta csúszkaként képgalériákkal, rögzített burkolóanyaggal és függőleges görgetőeffektussal.

Példa | Letöltés

FlexSlider 2

Freeware csúszka a Woothemes-től. Joggal tekinthető az egyik legjobb adaptív csúszkának. 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

Amazing Carousel – reszponzív képcsúszka a jQuery használatával. Számos tartalomkezelő rendszert támogat, mint például a WordPress, a Drupal és a Joomla. Támogatja az Android és az IOS rendszert és az asztali beállításokat is operációs rendszer kompatibilitási problémák 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

Készíts körhintat tiszta JS használatával, a semmiből és egyedül? Miért kell feltalálni a kereket, ha van? kész megoldások, slick/owl csúszkák? Ennek legalább két oka van:

• oktatási célokra
• tesztfeladatok elvégzésére

Ha állásra jelentkezik, akár egy HTML-elrendezéstervezői állásra is, nem csak egy körhinta létrehozására kell kérni, hanem azt is JS-ben valósítsa meg, harmadik féltől származó könyvtárak használata nélkül.

Körhinta példa Mit csinál a JavaScript az elemekkel?

Módosítja az elemek tulajdonságait az események bekövetkezésekor. Három pillér, amelyen a JavaScript nyugszik:

• tulajdonságait
• mód
• eseményeket

A felhasználó elindítja az onclick eseményt, amikor a gombra kattint. A programozó feladata egy kattintási esemény csatolása a kívánt elemhez, és utasításokat (függvényt) ír a böngésző számára, hogy mi történjen kattintáskor.

HTML jelölés a körhinta számára

Hozzon létre egy tárolót a képek számára, helyezze be magukat a képeket és két gombot - Előre / Vissza.

Vissza
Előre

CSS stílusok #gallery(
szélesség: 640 képpont;
margó: 20px auto;
szöveg igazítása: középre;
}

#gallery.photos img(
szélesség: 100%;
kijelző: nincs;
}

#gallery .photos img:first-child(
kijelző: blokk;
}

Gombok (
margó felső: 20 képpont;
}

Körhinta logika

Hogyan írsz még JS-kódot, ha nem érted a történések logikáját? Amikor megnyomja a gombot Előre, az aktuális kép eltűnik, és egy új jelenik meg a helyén. Mindig van egy kép a láthatósági területen, de hol van akkor a többi? A többit pedig elrejtettük, beállítottuk a kijelzőt: nincs minden képhez, csak az elsőt hagytuk meg, beállítottuk a megjelenítést: blokk, az elsőgyermekes álosztályon keresztül.

Hogyan készítsd el úgy, hogy minden alkalommal, amikor egy gombra kattintasz Előre, az első kép eltűnt, és megjelent a második, és a második helyett a harmadik. A gombra kattintva át kell váltani a megjelenítési tulajdonságot a none / block között.

JS kód Elemek kijelölése

Vegyük a gombokat Előre / Vissza szelektorral, a querySelector metódussal és a btn_prev / btn_next változókba helyezve őket.

Legyen btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");

A querySelectopAll metódussal szelektorral szerezzük be az összes képet, és helyezzük el a képek változóban is.

querySelectopAll – elemtömböt kap, vagyis az összes képet.

Let images = document.querySelectorAll("#gallery .photos img");

Egy tömbben az elemek már számozottan, nullától kezdve tárolódnak. Ezért számon tudjuk felvenni velük a kapcsolatot. De először hozzunk létre egy új változót, és helyezzük bele az első kép számát, amelyik rendelkezik a display: block tulajdonsággal.

Legyen i = 0; // az aktuális kép száma a képernyőn

Az aktuális képhez fordulunk, és stílusokban megváltoztatjuk a megjelenítési tulajdonságát.

Images[i].style.display = "nincs"; // az aktuális kép elrejtése

Most egyetlen kép sem látható a képernyőn. Hogyan jelenik meg ott a következő kép? Tudjuk, hogy a következő kép száma mindig nagyobb lesz, mint az előzőé.

I++ ; // az i változó növelése eggyel

images.length a képek száma, amelyek változhatnak, így nem kell jelezni, hogy 3 képünk van, ezt a böngésző már tudja. Az i számlálót minden alkalommal eggyel növeljük az utolsó kép megjelenéséig, majd a körhinta ismét az első képhez kényszerítjük. Ezt hurkolásnak hívják.

Felírjuk azt a feltételt, hogy ha az i számláló nagyobb lesz, mint a rendelkezésre álló képek száma, akkor az aktuális 0-s képhez tér vissza.

If(i >= images.length)(
i = 0; // az i változó 0
}

Ha fordított sorrendben görgeti a képeket, az i számlálónak eggyel kell csökkennie. Ha a változó értéke kisebb lesz nullánál, akkor az utolsó kép számát kell beleírni.

Btn_prev.onclick = function())(
images[i].style.display = "nincs";
i = i-1;
ha én< 0){
i = képek.hossz - 1;
}
images[i].style.display = "blokk";
}

Kivonunk egyet a képek teljes számából.hosszúságból, és megkapjuk a 2-es képet. Ez lesz az utolsó kép, mivel a programozásban a számítás nulláról indul.

Az elrendezéstervezői pozíció tesztjének sikeres teljesítéséhez a JS magabiztos ismerete szükséges, amely kifejezetten az elrendezéstervezőknek szól.

Az Owl Carousel egy érintés-támogatással rendelkező jQuery beépülő modul, amely lehetővé teszi egy érzékeny (adaptív) csúszka (körhinta) létrehozását.
Nagyon kényelmes, egyszerű és adaptív bővítmény csúszkák, körhinták stb. létrehozásához.
Ebben a cikkben megpróbálom elmagyarázni és megmutatni, hogyan működik.

Az Owl Carousel bővítmény telepítése
Először le kell töltenünk az archívumot a bővítménnyel

Az alábbiakban egy példát mutatok be a 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:
Az owl.carousel.css és az owl.transitions.css fájl a mappába kerül stílus szóval ill css.
Az owl.carousel.js fájl a js mappába kerül

Most össze kell kapcsolnunk ezeket a fájlokat, hogy működjenek a sablonunkban.
Nyissa meg a main.tpl fájlt, és a sor előtt írja be a következő sorokat:
Változtasd meg a css mappát arra, amiben css stílusaid vannak!
Ezután a sor előtt a legvégén beírjuk a következő sort:
Rendben, most mindennek vége! Elkészültünk a telepítéssel.

Most magát a csúszkát kell beillesztenünk és konfigurálnunk.
Megmutatom egy példával tophírek azok Népszerű híreket fogok megjeleníteni bagolykörhintaunkon keresztül.

A dokumentációs oldal ismerteti az Owl Carousel bővítmény összes opcióját, bemutatóját és használati módját.
Kövesse a linket, és válassza ki a kívánt csúszkát.
A miénkért tophírekÉn a legelsőt választottam a névvel Képek. A JavaScript lapon másolja a következő sorokat:
$(dokumentum).ready(function() ( $("#owl-demo").owlCarousel(( automatikus lejátszás: 3000, elemek: 4, tételekAsztali: , tételekAsztalKicsi: )); )); és illessze be őket a main.tpl fájlba a sor elé

Ezután a CSS lapon másoljuk a sorokat:
#owl-demo .item( margó: 3px; ) #owl-demo .item img( kijelző: blokk; szélesség: 100%; magasság: auto; ), és csatlakoztassa őket bármely css fájl vagy a main.tpl fájlban a sor előtt, de a sor után!
Most elemezzük a HTML kódunkat, és összekapcsoljuk vele tophírek. A main.tpl fájlban beillesztjük a kívánt helyre a címkét (topnews), ami viszont megjeleníti a népszerű hírek listáját, amelyek megjelenése a topnews.tpl fájlban testreszabható, erről lentebb.
Címkekódunknak így kell kinéznie:
(topnews) Nos, most már csak magát a hírt kell beállítani.
Nyissa meg a t opnews.tpl fájlt, és írja be a következőket a legelején:
a legvégén bezárjuk az attribútumot

Ha a Bootstrap egyik sablonomat használja, akkor lehetőségként használhatja a következő sorokat a topnews.tpl fájlban:
(title limit="55")

(text limit="100")

Az Olvasott hírek így jelennek meg

Ez a bővítmény szinte bárhol használható, a címke használatával is (egyéni kategória)
A szokásos DLE galériát is helyettesítheti, erről külön cikket teszek közzé. Élvezd az egészségedért ;)

Üdvözlettel, admin. letöltés Figyelem: elérte a letöltési korlátot. Gyere holnap =)

/* Itt kezdődik a körhinta. A Block.carousel-wrapper viszonylag, a wrapper.carousel-elem pedig abszolút pozícióban van. . */ .carousel-wrapper( position:relative; /* Az abszolút pozicionált dobozok magasságukat és szélességüket a szülőjüktől kapják. Alapértelmezésben átlátszóvá tettük őket, majd simán megjelennek a linkekre kattintva.arrow-prev és.arrow- next. * / .carousel-item( pozíció: abszolút a kitöltés a bal oldalon és az 50 képpont a jobb oldalon? Így tudjuk elhelyezni a linkjeinket! Mindegyik 50 képpont széles lesz. Valamint üres linkeket használok háttérkép hogy a linkek nyilaknak tűnjenek. Ellenőrizze, hogy módosította-e a hivatkozások URL-címét az eredeti URL-lel, hogy a linkek ne csak átlátszó téglalapok legyenek. */ .arrow(pozíció:abszolút; felső:0; kijelző:blokk; szélesség:50px; magasság:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); háttér:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Tegyük vissza a nyilat balra. */ &.arrow-prev( left:0; ) /* És a második a a jobb oldalon. Mivel ugyanazt a képet használom a nyílhoz, ezért 180 fokkal elforgatom. */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Nagyon szeretem, ahogy a körhinta csúszdái kinéznek sötét háttér, és ha a block.carousel-item osztálya "light", akkor a szövegét fehérre változtatjuk, és a szürkék helyett fehér nyilakat használunk. Ellenőrizze még egyszer, hogy a nyíl képének elérési útja helyes-e */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Írjunk médialekérdezést a nyilak méretének megváltoztatásához a kisebb képernyőméretű eszközökön.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background -pozíció:10px50% ; ) ) ) /* A megjelenítendő linkcélok beállítása: nincs; Így megszabadulunk attól, hogy a böngésző folyamatosan a körhinta legtetejére ugorjon, valahányszor a nyilakra kattintunk. Ez a tulajdonság minden olyan elemre érvényes, amelynek azonosítója "target-item"-vel kezdődik. */ ( display:none; ) /* Fent minden körhinta diákunkat átlátszóvá tettük, ami azt jelenti, hogy amikor a körhinta betöltődik, egy nagy üres dobozt kapunk helyette. Változtassuk meg az első dia átlátszósági értékét 1-re a megjelenítéshez. A z-indexet is 2-re állítottuk, magasabbra helyezve, mint a többi diát. */ .item-1( z-index:2; opacity:1; ) /* De nem akarjuk, hogy az első dián mindig az átlátszatlanság értéke legyen: 1; különben át kell mennünk ezen a csúszdán, miközben a többit forgatjuk. */ *:target~.item-1( opacity:0; ) /* ..de ha a #target-item-1 van fókuszban és az első diát szeretnénk megjeleníteni, akkor jelöljük ki a ~ ikon segítségével és állítsuk be a az átlátszóság ismét 1-re:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Ha más célelem-# van fókuszban, jelölje ki őket a ~ választóval, simán jelenítse meg és a z-index segítségével helyezze el őket a tetejére: 3. Ha háromnál több van belőlük, itt további tartományokat adhat hozzá a célelem azonosítójával. Egyszerre 10 darab hozzáadható.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )