Vienkāršs jquery karuselis. Kā izveidot karuseli, izmantojot tikai HTML un CSS
Pūces karuselis- spraudnis jQuery, kuram ir pieskāriens, kas ļauj izveidot atsaucīgu (atsaucīgu) slīdni (karuseli). Tas ir ļoti lietotājam draudzīgs, vienkāršs un atsaucīgs spraudnis slīdņu, karuseļu utt. Šajā rakstā es mēģināšu izskaidrot un parādīt, kā tas darbojas.
Pūces karuseļa spraudņa instalēšana Pirmkārt, mums ir jālejupielādē arhīvs ar spraudni
Kad arhīvs ir lejupielādēts, atveriet to un sadaliet failus šādi: Fails pūce.karuselis.css un pūce.pārejas.cssielikt mapēstils tā vai css. Fails pūce.karuselis.jsielikt mapē js
Tagad mums šie faili ir jāpievieno, lai tie darbotos mūsu veidnē. Faila atvēršana main.tpl a pirms rindas mēs ieejam šādas rindas:
Mape css nomainiet to, kurā esat css stili! Tad pašā apakšā pirms līnijas
mēs ievadām šādu rindu: Tieši tā! Mēs esam pabeiguši instalēšanu.
Tagad mums jāievieto un jākonfigurē pats slīdnis. Es parādīšu ar piemēru topnews tie caur mūsu pūces karuseli parādīs populāras ziņas.
Dokumentācijas lapā ir aprakstītas visas iespējas, demonstrācijas un to, kā izmantot mūsu Owl Carousel spraudni. Noklikšķiniet uz saites un atlasiet jebkuru slīdni, kas jums patīk. Mūsējiem topnews Es izvēlējos pašu pirmo ar nosaukumu Attēli. Cilnē javascript nokopējiet šīs rindas: $ (document) .ready (function () ($ ("# owl-demo"). owlCarousel ((autoPlay: 3000, items: 4, itemsDesktop :, itemsDesktopSmall :));)); un ievietojiet tos failā main.tpl pirms rindas
Pēc tam cilnē CSS kopējiet rindas: # Owl-demo .item (margin: 3px;) # Owl-demo .item img (display: block; width: 100%; height: auto;) un iekļaujiet tos jebkurā css fails vai fails main.tpl pirms rindas
bet pēc rindas
! Tagad mēs parsēsim mūsu HTML kodu un savienosim to ar topnews. Failā main.tpl ievietojiet tagu īstajā vietā (jaunākās) kas savukārt parāda populāru ziņu sarakstu, izskats ko var konfigurēt failā topenews.tpl, vairāk par šo zemāk .
Mūsu atzīmētajam kodam vajadzētu izskatīties šādi:
(jaunākās)
Nu, tagad mums paliek konfigurēt pašas ziņas. Faila atvēršana topnews.tpl un pašā sākumā mēs ieejam:
pašās beigās atribūtu aizveram
Ja jūs izmantojat kādu no manām veidnēm ar Bootstrap, kā opciju failā varat izmantot šādas rindiņas topnews.tpl:
(nosaukuma ierobežojums = "55")
(teksta ierobežojums = "100")
Lasīt
Jaunumi tiks parādīti šādi
Šo spraudni var izmantot gandrīz visur, kā arī izmantot tagu (pielāgota kategorija) Tas var aizstāt arī standarta DLE galeriju, es par to publicēšu atsevišķu rakstu. Izmantojiet to veselībai;)
Ar cieņu, admin. lejupielādētUzmanību: lejupielādes limits ir sasniegts. Nāc rīt =)
1. jQuery clickCarousel
Bloķējiet, ritinot ziņu paziņojumus. Kreisās / labās bultiņas tiek izmantotas, lai ritinātu blokus. Arhīvs satur divu veidu karuseli: gaišs un tumšs.
1. jQuery karuseļa spraudnis "carouFredSel"
Veikls, svaigs jQuery attēlu karuselis.
4. Spraudnis jQuery: Elastislide Carousel
5. Spraudnis "TinyCarousel"
Lieliski satura slīdņi attēlu karuseļa veidā, izmantojot jQuery. Demonstrācijas lapā ir aprakstīts, kā šo karuseļu pievienot savai vietnei.
Spraudnis Slider Kit, viegls karuselis ar Dažādi ceļi ritinot.
7.javascript karuselis
8. jQuery spraudnis "Režģa navigācijas efekti"
Oriģinālā navigācija starp attēlu sīktēliem. Lai apskatītu efektu demonstrācijas lapas labajā pusē, noklikšķiniet uz pogas Augšup un lejup. Šis jQuery risinājums nodrošina arī efektu uz sīktēlu virzīšanas un peles ritināšanas ritināšanu.
9. Viegls karuselis
10. Karuselis no blokiem Easy Paginate
jQuery spraudnis "Easy Paginate". Katrs taisnstūrveida bloks apzīmē parastu saraksta elementu li, un, ja ir vairāk nekā trīs vienumi, tad, lai tos visus apskatītu, jums jāizmanto slīdnim līdzīga navigācija (izmantojot bultiņas "uz priekšu", "atpakaļ" un izmantojot navigācijas pogas apakšā).
11. Vertikālais rotators "Vertical Ticker"
JQuery vertikālais rotators: automātiska satura ritināšana lapā. Tiek nodrošinātas navigācijas pogas, kā arī iespēja apturēt rotāciju un sākt to no jauna. Virzot kursoru virs peles, kustība apstājas. HTML iezīmēšanas līmenī ritināšanas blokus attēlo regulāri li saraksta vienumi.
12.javascript css ritināms apgabals
javascript "TinyScroller" risinājums, lai izveidotu ritināmu apgabalu, kas ietīts DIV konteinerā.
13. jQuery spraudnis "Smooth Div Scroll"
Spraudnis, lai ieviestu horizontālu satura ritināšanu noteiktā apgabalā. Pārvietojot peles kursoru virs apgabala kreisās vai labās malas, sākas ritināšana.
Pārvietoties starp satura slaidiem var, izmantojot bultiņas vai noklikšķinot uz sīktēla. Apakšā ir poga "Rādīt", kas ļauj paslēpt / parādīt sīktēlus vai Pilns apraksts slidkalniņš.
15. Apļveida satura karuseļa satura rotators
17. Ritinātājs
Bloks ar ritināšanu, kas parādās uz kursora. Jūs varat ritināt saturu, izmantojot ritināšanas joslu vai peles ritenīti.
Šo jQuery risinājumu iedvesmoja līdzīgs efekts Apple vietnē. Šīs korporācijas izstrādātāji vienmēr ir atraduši interesantus risinājumus, kas iedvesmoja tīmekļa pārziņus no visas pasaules. Lai demonstrētu spraudni, sarakstā atlasiet jebkuru kategoriju.
19. Lielisks slīdnis
Slīdnis tiek ģenerēts automātiski. Dati ar produkta nosaukumu, aprakstu, saiti un attēla adresi tiek ņemti no faila slider.db.txt. Izmantotās tehnoloģijas: CSS, PHP, jQuery.
20. Bloku pagriešana, izmantojot jQuery
Lai redzētu bloka pagriešanas efektu, demonstrācijas lapā noklikšķiniet uz viena no mazajiem taisnstūriem
Piemēram, satura ritināšanas spraudni var izmantot, lai parādītu jaunākās ziņas vai parādītu čivināt skrejlapas vietnē.
Šis spraudnis konvertē saraksta vienumus (ul li) uz jQuery elementi karuselis.
26. javascript ImageFlow karuselis
Attēlus var viegli ritināt, izmantojot peles riteni.
27. Ritināšanas saturs
Kompakts bloks ar paziņojumu par jaunākajiem materiāliem vietnē vai jaunumiem. Kreisajā kolonnā tiek parādīts lapots īsāko jaunāko paziņojumu saraksts. Atlasot vienu no tiem, vairāk nekā Detalizēts apraksts un saiti, lai izlasītu pilnu publikācijas tekstu. Īstenots ar jQuery.
Attēli ar saitēm tiek ritināti, virzot peles kursoru, ritināšana apstājas un parādās navigācijas josla. Pārvietojot peles kursoru virs attēla, tā nosaukums tiek parādīts arī starp vadības pogām. Lappusē izskatās ļoti jauki
Ritināšanu veic gan ar ritjoslu, gan ar peles riteni.
Jā, tēma ir diezgan uzlauzta. Bet tomēr atrast to, kas jums patiešām nepieciešams, bieži vien ir grūti. Visi piedāvā ļoti sarežģītus skriptus ar daudz nevajadzīgas funkcionalitātes. Un parasti tie jau ir saspiesti spraudņi.
Tāpēc es piedāvāšu savējo Alternatīva iespējaļoti vienkāršs jQuery karuselis.
To var izmantot gan kā attēlu, gan kā ziņu vai jebkura cita satura karuseli =)
Vienīgie mazie zvani un svilpes, ko es sev atļāvos, bija ēna pie karuseļa bloka.
UPD: 07.06.2014
Tas izskatīsies apmēram šādi: DEMO Lejupielādēt
Struktūra izskatīsies šādi:
TJ vienkāršs adaptīvais karuselis
Aprakstīsim stilus:
Karuselis (maks. Platums: 1080px; / * visa bloka platums * / mala: 50px auto; platums: 100%;). Karuseļa ietinējs (mala: 10px 30px; / * bultu polsterējums * / pārplūde: paslēpta; / * paslēpt saturu ārpus galvenā laukuma * / position: suhtīgs;). karuseļa vienumi (platums: 10000px; / * iestatīt lielāku priekšmetu kopas platumu * / position: relatīvais; / * novietot lodziņu attiecībā pret galveno karuseli apgabals * /). karuseļa bloks (pludiņš: pa kreisi; / * sakārtojiet visus karuseļa elementus pēc kārtas * / platums: 250 pikseļi; / * iestatiet katra elementa platumu * / polsterējums: 10 pikseļi 10 pikseļi 10 pikseļi 0 pikseļi; / * izveidojiet atstarpes tā, lai elementi nesaplūstu * /). karuselis -block img (display: block;) / *********** Pogas *********** /. Carousel-button - kreisais a, .karuseļa poga pa labi a (platums: 25 pikseļi; augstums: 36 pikseļi; pozīcija: relatīvais; augšā: 80 pikseļi; kursors: rādītājs; teksta noformējums: nav;). karuseļa poga-kreisais a (pludiņš: pa kreisi ; background: url (../ images / carousel- left.png);). karuseļa poga pa labi a (pludiņš: taisnība; fons: URL (../ images / carousel-right.png); ) / *********** ĒNA *********** /. Ēna (box-shadow: 0px 0px 10px rgba (0, 0, 0, 0,6);)
Attiecīgi ēnu var noņemt. Lietošanai jums vienkārši jāmaina galvenā bloka un ligzdoto "ritināšanas" bloku lielums css. Ir arī ļoti viegli veikt šo procesu, lai tas ritinātu automātiski ( Šis gadījums, vienkārši atceļiet izsaukumu uz funkciju auto_right). Tas ir, jūs varat izgatavot visu no šīs vienkāršās galerijas, kas nepieciešama uzdevuma ietvaros!
Jāatzīmē arī tas, ka, ja dotais piemērs ir adaptīvs, tas ir, karuseļa lielums tiek pielāgots atbilstoši ekrāna izmēram un tiks pareizi parādīts gan datora vai klēpjdatora ekrānā, gan arī planšetdatoru un viedtālruņu ekrāni.
Pašlaik slīdņa - karuseļa - funkcionalitāte, kas jums vienkārši ir nepieciešama uzņēmuma vietnei, portfeļa portfelim vai jebkuram citam resursam. Kopā ar pilnekrāna attēlu slīdņiem horizontālie karuseļa slīdņi labi iederas jebkurā tīmekļa dizainā.
Dažreiz slīdnim vajadzētu aizņemt vienu trešdaļu vietnes lapas. Šeit karuseļa slīdni izmanto ar pārejas efektiem un atsaucīgiem izkārtojumiem. E-komercijas vietnes izmanto karuseļa slīdni, lai atsevišķos ierakstos vai lapās parādītu vairākus fotoattēlus. Slīdņa kodu var brīvi izmantot un mainīt atbilstoši jūsu vajadzībām.
Izmantojot jQuery kopā ar HTML5 un CSS3, jūs varat padarīt savas lapas interesantākas, nodrošinot tām unikālus efektus un pievēršot apmeklētāju uzmanību konkrētai vietnes teritorijai.
Slick - moderns slīdņa spraudnis - karuselis
Slick ir bezmaksas jquery spraudnis, kura izstrādātāji apgalvo, ka viņu risinājums apmierinās visas jūsu slīdņa prasības. Reaģējošais karuseļa slīdnis mobilajām ierīcēm var darboties flīžu režīmā, bet darbvirsmas versijā - vilkšanas un nomešanas režīmā.
Satur pārejas efektu "izbalināt", interesantu funkciju "režīms centrā", slinku attēlu ielādi ar automātisku ritināšanu. Atjauninātā funkcionalitāte ietver slaidu un slaidu filtra pievienošanu. Viss, lai spraudni varētu pielāgot atbilstoši savām prasībām.
Šī spraudņa arsenālā ir plašs funkciju klāsts, kas piemērots gan iesācējiem, gan pieredzējušiem izstrādātājiem. Tas ir atjauninātā versija slīdnis - karuselis. Viņa priekšgājējs tika nosaukts tieši tāpat.
Slīdnis satur dažus iebūvētus spraudņus, lai uzlabotu vispārējo funkcionalitāti. Animācija, video atskaņošana, slīdņa automātiska atskaņošana, slinks ielāde, automātiska korekcija augstumi - Owl Carousel 2.0 galvenās iezīmes.
Atbalsta iespējas velciet un piliens ir iekļauts, lai ērtāk izmantotu spraudni mobilās ierīces. Spraudnis ir lieliski piemērots lielu attēlu parādīšanai pat mazos mobilo ierīču ekrānos.
Piemēri | Lejupielādēt
jQuery Silver Track spraudnis
Diezgan mazs, bet bagāts ar funkcionalitāti jquery spraudnis, kas ļauj lapā ievietot slīdni - karuseli, kuram ir mazs kodols un kas neizmanto daudz vietnes resursu. Spraudni var izmantot, lai parādītu vertikālus un horizontālus slīdņus, animācijas un izveidotu attēlu komplektus no galerijas.
Piemēri | Lejupielādēt
AnoSlide - īpaši kompakts reaģējošs jQuery slīdnis
Īpaši kompakts jQuery slīdnis- karuselis, kura funkcionalitāte ir daudz lielāka nekā parastā slīdņa funkcija. Tie ietver priekšskatījums vienu attēlu, parādiet vairākus attēlus karuseļā un slīdnī, kura pamatā ir nosaukums.
Piemēri | Lejupielādēt
Pūces karuselis - Jquery slīdnis - Karuselis
Pūces karuselis - slīdnis ar skārienekrānu atbalstu un vilkšanas tehnoloģija un nomest, viegli iegult HTML kodā. Spraudnis ir viens no labākajiem slīdņiem, kas ļauj jums izveidot skaistus karuseļus bez speciāli sagatavota marķējuma.
Piemēri | Lejupielādēt
3D galerija - karuselis
Izmanto 3D pārejas, kuru pamatā ir CSS stili un daži Javascript kodi.
Piemēri | Lejupielādēt
3D karuselis, izmantojot TweenMax.js un jQuery
Lielisks 3D karuselis. Izskatās, ka šī joprojām ir beta versija, jo es ar to šobrīd atklāju pāris problēmas. Ja jūs interesē testēt un izveidot savus slīdņus, šis karuselis būs ļoti noderīgs.
Piemēri | Lejupielādēt
Karuselis, izmantojot bootstrap
Reaģējošs karuseļa slīdnis, izmantojot bootstrap tehnoloģiju, tieši piemērots jūsu jaunajai vietnei.
Piemēri | Lejupielādēt
Pamatojoties uz Bootstrap - Moving Box karuseļa slīdņa ietvaru
Visvairāk pieprasīts portfeļa un biznesa vietnēs. Šāda veida karuseļa slīdnis bieži tiek atrasts jebkura veida vietnē.
Piemēri | Lejupielādēt
Tiny Riņceļotājs
Šis mazais slīdnis ir gatavs darbam ar ierīcēm ar jebkuru ekrāna izšķirtspēju. Slīdnis var darboties gan apļveida, gan karuseļa režīmos. Tiny aplis tiek parādīts kā alternatīva citiem līdzīgiem slīdņiem. Ir iebūvēts atbalsts operētājsistēmas IOS un Android.
Apļveida režīmā slīdnis izskatās diezgan interesants. Lieliski tiek ieviests vilkšanas un nomešanas atbalsts un automātiskā slaidu ritināšanas sistēma.
Piemēri | Lejupielādēt
Thumbelina satura slīdnis
Jaudīgs, atsaucīgs, karuseļa slīdnis ir lieliski piemērots modernai vietnei. Pareizi darbojas jebkurā ierīcē. Ir horizontāli un vertikāli režīmi. Tās lielums ir samazināts līdz tikai 1 KB. Īpaši kompaktajam spraudnim ir arī lieliskas vienmērīgas pārejas.
Piemēri | Lejupielādēt
Wow - slīdnis - karuselis
Satur vairāk nekā 50 efektus, kas var palīdzēt izveidot oriģinālu slīdni savai vietnei.
Piemēri | Lejupielādēt
Reaģējošs jQuery satura slīdnis bxSlider
Mainiet pārlūkprogrammas loga izmērus, lai redzētu, kā slīdnis pielāgojas. Bxslider ir aprīkots ar vairāk nekā 50 pielāgošanas iespējām un demonstrē tā funkcijas ar dažādiem pārejas efektiem.
Piemēri Lejupielādēt
jCarousel
jCarousel ir jQuery spraudnis, kas palīdzēs jums organizēt attēla priekšskatījumu. Jūs varat viegli izveidot pielāgotus attēlu karuseļus no piemērā redzamās bāzes. Slīdnis ir atsaucīgs un optimizēts darbam uz mobilajām platformām.
Piemēri Lejupielādēt
Scrollbox - spraudnis jQuery
Scrollbox ir kompakts spraudnis, lai izveidotu slīdni - karuseļa vai teksta ritināšanas līniju. Galvenās funkcijas ietver vertikālu un horizontālu ritināšanu ar pauzi, kad peles kursors atrodas virs.
Piemēri | Lejupielādēt
dbpasCarousel
Vienkāršs slīdnis - karuselis. Ja jums nepieciešams ātrs spraudnis, tas izdarīs 100%. Nāk tikai ar pamatfunkcijām, kas nepieciešamas slīdņa darbībai.
Flexisel veidotāji iedvesmojās no vecās skolas spraudņa jCarousel, padarot tā kopiju par pareizu slīdņa darbību mobilajās un planšetdatoros.
Reaģējošais Flexisel izkārtojums, strādājot ar mobilajām ierīcēm, atšķiras no izkārtojuma, kas orientēts uz pārlūkprogrammas loga lielumu. Flexisel ir lieliski pielāgots darbam ar zemas un augstas izšķirtspējas ekrāniem.
Piemēri | Lejupielādēt
Elastislide - atsaucīgs slīdnis - karuselis
Elastislide lieliski pielāgojas ierīces ekrāna izmēram. Jūs varat iestatīt minimālo attēlojamo attēlu skaitu ar noteiktu izšķirtspēju. Labi darbojas kā attēlu galerijas karuseļa slīdnis, izmantojot fiksētu ietinēju kopā ar vertikālas ritināšanas efektu.
Piemērs | Lejupielādēt
FlexSlider 2
Brīvi pārdalāms slīdnis no Woothemes. Tas tiek uzskatīts par vienu no labākajiem atsaucīgajiem slīdņiem. Spraudnis satur vairākas veidnes un būs noderīgs gan iesācēju lietotājiem, gan ekspertiem.
Piemērs | Lejupielādēt
Pārsteidzošs karuselis
Pārsteidzošs karuselis - atsaucīgs slīdnis attēli ar jQuery. Atbalsta daudzas vietņu pārvaldības sistēmas, piemēram, WordPress, Drupal un Joomla. Atbalsta arī Android un IOS un darbvirsmas operētājsistēmas bez jebkādām saderības problēmām. Iebūvētās pārsteidzošās karuseļa veidnes ļauj izmantot slīdni vertikālā, horizontālā un apļveida režīmā.
Piemēri | Lejupielādēt
Spraudņi jQuery-karuseļi ļauj parādīt vietņu saturu pievilcīgākā veidā. Ar šādu spraudņu palīdzību jūs varat izveidot skaistas prezentācijas tieši vietnes lapās un piesaistīt apmeklētāju uzmanību.
1. Bootstrap Ambilight slīdnis
Bootstrap Ambilight slīdnis- spraudnis slīdņu / karuseļu izveidei ar apkārtējā mirdzuma efektu un Bootstrap funkcionalitāti.
2. jQuery TouchSwipe karuselis
jQuery-iespraust Karikatūra ar skārienjūtīgu skārienuļauj noteikt skārienekrāna pieskārienus un simulēt peles pogas nospiešanu.
3. ItemSlide
ItemSlide.js pārstāv jquery-Spraudnis, lai izveidotu karuseli, kas darbosies gan uz galddatoriem, gan mobilajām skārienekrānām.
Pilnībā atsaucīgs un mobilajām ierīcēm optimizēts spraudnis jquery-karuseļi. Animācijai mēs izmantojam šeit CSS3, bet ir arī atkāpšanās jQuery... Spraudnis atbalsta neierobežotu skaitu slaidu ar jebkura veida saturu. zina, kā mijiedarboties ar tastatūru, un tajā pašā laikā labi darbojas lielākajā daļā pārlūkprogrammu, ieskaitot mobilās.
6. SilverTrack
SilverTrack – jQuery-spraudnis paplašināms. Tas sastāv no neliela kodola, kuram varat izvēlēties pieslēgt ērtus spraudņus.
7. Pūces karuselis 2
Pūces karuselis 2- pilnībā atsaucīgs karuselis jQuery / Zepto ar skārienekrānu atbalstu.
8. UtilCarousel
UtilCarousel- iespraust jQuery-karuselis ar vienmērīgas pārejasīsteno ar aparatūras paātrinājumu. Tas ir pilnībā atsaucīgs. Spraudņa atbalsts skārienekrāni, un tas izmanto trīsdimensiju CSS3-Animācija ar aparatūras paātrinājumu. Tādējādi spraudnis labi izskatīsies gan galddatoros, gan mobilajās ierīcēs. Lai valdītu UtilCarousel var izdarīt, izmantojot pieskārienus, navigāciju vai peles riteni.
9. Slidens
Gluds ir adaptīvs jQuery-karuselis, kurā ir viss nepieciešamais.
10. CodingJack 3D karuselis
Šo karuseli atbalsta ieslēgtās ierīces iOS un Android un ir aprīkots ar pieskāriena vilkšanas funkcionalitāti. Izskatās lieliski planšetdatoros un viedtālruņos.
11. jQuery slaidrāde
jQuery slaidrāde ir karuselis un slīdnis ar atbalstu žestu kontrolei skārienierīcēs. Spraudņa arhīva svars ir tikai 2 kilobaiti.
12. FlimRoll
FlimRoll- miniatūra jQuery-karuselis, kas koncentrē lietotāja uzmanību uz konkrētu objektu, ievietojot to ekrāna centrā.
13. Tikslus
Tikslus ir pilnīgi atsaucīgs karuselis uz jQuery ar daudzām funkcijām un īpašībām. Spraudņa augstā pielāgojamība ļauj nenorādīt attēlu lielumu. Jāatzīmē arī atbalsts patvaļīgai animācijai, kuras pamatā ir CSS3-klases. Tikslus var izmantot ar spraudni Jquery mobilais.
14. Ritjosla
Ritjosla- vienkāršs, miniatūrs jQuery-spraudnis, kas pārvērš sarakstus par karuseļu vai ložņu līniju.
15. Sky Touch karuselis
Sky touch karuselis- iespraust jQuery-karuselis ar bagātīgu funkciju kopumu. Spraudnis ir atsaucīgs, atbalsta skārienekrānus un ir ātrs un plūstošs. Iestatījumi ļauj mainīt karuseļa izskatu, izmantojot CSS.
16.
- elastīgs jQuery-spraudnis slaidrāžu vai karuseļu veidošanai. Tam ir daudz iestatījumu, tostarp pārejas veidi, attēla izlīdzināšana un kadru ātrums.
