Pūču karuselis - jQuery spraudnis ar pieskārienu atbalstu, kas ļauj izveidot responsīvu (adaptīvu) slīdni (karuseli). Tas ir ļoti ērti, vienkārši un adaptīvs spraudnis lai izveidotu slīdņus, karuseļus utt. Šajā rakstā es mēģināšu izskaidrot un parādīt, kā tas darbojas.
Pūces karuseļa spraudņa instalēšana Vispirms mums ir jālejupielādē arhīvs ar spraudni
Tālāk es parādīšu piemēru spraudņa instalēšanai DataLife Engine veidnē.
Pēc arhīva lejupielādes atveriet to un izplatiet failus šādi: Fails pūce.karuselis.css un owl.transitions.cssielieciet mapēstils tā vai css. Fails owl.carousel.jsievieto js mapē
Tagad mums ir jāsavieno šie faili, lai tie darbotos mūsu veidnē. Faila atvēršana galvenais.tpl a pirms rindas ievadiet sekojošām rindām:
mapi css mainīt uz to, kurā atrodaties css stili! Tad pašā apakšā pirms līnijas
ievadiet šo rindu: Tieši tā! Esam pabeiguši uzstādīšanu.
Tagad mums ir jāievieto un jākonfigurē pats slīdnis. Parādīšu ar piemēru top jaunumi tie parādiet populāras ziņas, izmantojot mūsu pūču karuseli.
Dokumentācijas lapā ir aprakstītas visas opcijas, demonstrācijas un mūsu Owl Carousel spraudņa izmantošana. Sekojiet saitei un izvēlieties jebkuru slīdni, kas jums patīk. Mūsējiem top jaunumi Es izvēlējos pašu pirmo ar nosaukumu attēlus. JavaScript cilnē kopējiet šīs rindas: $(dokuments).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, items: 4, itemsDesktop: , itemsDesktopMall: )); )); un ielīmējiet tos failā galvenais.tpl pirms rindas
Pēc tam cilnē CSS kopējiet rindiņas: #owl-demo .item( margin: 3px; ) #owl-demo .item img( displejs: bloks; platums: 100%; augstums: auto; ) un iekļaujiet tos jebkurā css failu vai failu galvenais.tpl pirms rindas
bet pēc rindas
! Tagad mēs parsēsim savu HTML kodu un izveidosim savienojumu ar top jaunumi. Failā galvenais.tpl ievietojiet tagu pareizajā vietā (galvenās ziņas) kas savukārt rada populāru ziņu sarakstu, izskats ko var konfigurēt failā topenews.tpl, vairāk par to zemāk .
Mūsu taga kodam vajadzētu izskatīties šādi:
(galvenās ziņas)
Nu, tagad mums tikai jāiestata pašas ziņas. Faila atvēršana topnews.tpl un pašā sākumā mēs ievadām:
aizveriet atribūtu pašās beigās
Ja izmantojat kādu no manām Bootstrap veidnēm, kā opciju varat izmantot tālāk norādītās rindiņas failā topnews.tpl:
(title limit = "55")
(teksta ierobežojums = 100")
Lasīt
Jaunumi tiks parādīti šajā formā
Šo spraudni var izmantot gandrīz visur, tāpat kā tagu (pielāgota kategorija) Tie var aizstāt arī standarta DLE galeriju, par to es publicēšu atsevišķu rakstu. Izbaudi savu veselību ;)
Ar cieņu admin. lejupielādētUzmanību: ir sasniegts lejupielādes ierobežojums. Nāc rīt =)
Pašlaik karuseļa slīdnis ir funkcionalitāte, kas vienkārši ir nepieciešama uzņēmuma vietnē, portfeļa vietnē vai jebkurā citā resursā. Līdzās pilnekrāna attēlu slīdņiem horizontālie karuseļa slīdņi lieliski iederas jebkurā tīmekļa dizainā.
Dažreiz slīdnim ir jāaizņem viena trešdaļa vietnes lapas. Šeit karuseļa slīdnis tiek izmantots ar pārejas efektiem un ar atsaucīgiem izkārtojumiem. E-komercijas vietnēs tiek izmantots karuseļa slīdnis, lai attēlotu vairākus fotoattēlus atsevišķās ziņās vai lapās. Slīdņa kodu var bez maksas izmantot un mainīt atbilstoši jūsu vajadzībām.
Izmantojot jQuery kopā ar HTML5 un CSS3, varat padarīt savas lapas interesantākas ar unikāliem efektiem un pievērst apmeklētāju uzmanību noteiktai vietnes daļai.
Slick — moderns karuseļa slīdņa spraudnis
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. Atsaucīgs slīdnis - karuselis var darboties "flīžu" režīmā mobilajām ierīcēm, bet "velciet un nometiet" režīmā darbvirsmas versijai.
Tas satur izbalēšanas pārejas efektu, interesantu funkciju "režīms centrā", slinku attēlu ielādi ar automātisko ritināšanu. Atjauninātā funkcionalitāte ietver slaidu pievienošanu un slaidu filtru. Viss, lai jūs varētu pielāgot spraudni atbilstoši jūsu prasībām.
Šim spraudnim ir liels funkciju kopums, kas piemērots gan iesācējiem, gan pieredzējušiem izstrādātājiem. Tas ir atjaunināta versija slīdnis - karuselis. Viņa priekšgājējam bija tāds pats nosaukums.
Slīdnim ir daži iebūvēti spraudņi, lai uzlabotu vispārējo funkcionalitāti. Animācija, video atskaņošana, slīdņa automātiskā atskaņošana, slinka ielāde, automātiska regulēšana augstumi ir Owl Carousel 2.0 galvenās iezīmes.
Vilkšanas atbalsts un nomet 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ātīgs jquery spraudnis, kas ļauj lapā ievietot karuseļa slīdni, kuram ir mazs kodols un kas nepatērē daudz vietnes resursu. Spraudni var izmantot, lai parādītu vertikālos un horizontālos slīdņus, ar animāciju un izveidotu attēlu kopas no galerijas.
Piemēri | Lejupielādēt
AnoSlide — īpaši kompakts, atsaucīgs jQuery slīdnis
Īpaši kompakts jQuery slīdnis- karuselis, kura funkcionalitāte ir daudz vairāk nekā parastajam slīdnim. Tas ietver priekšskatījums viens attēls, vairāku attēlu parādīšana karuselī un slīdnī, pamatojoties uz nosaukumiem.
Piemēri | Lejupielādēt
Pūces karuselis — jquery slīdnis — karuselis
Pūču karuselis - slīdnis ar atbalstu skārienekrāni un vilkšanas tehnoloģija un nometiet , viegli iegulti HTML kodā. Spraudnis ir viens no labākajiem slīdņiem, kas ļauj izveidot skaistus karuseļus bez īpaši 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. Šķiet, ka tā joprojām ir beta versija, jo tikko ar to atklāju pāris problēmas. Ja jūs interesē izmēģināt un izveidot savus slīdņus, šis karuselis lieliski noderēs.
Piemēri | Lejupielādēt
Karuselis, izmantojot bootstrap
Adaptīvs karuseļa slīdnis, izmantojot bootstrap tehnoloģiju, kas ir tieši piemērots jūsu jaunajai vietnei.
Piemēri | Lejupielādēt
Bootstrap slīdnis — Moving Box karuselis
Visvairāk pieprasītie portfeļu un uzņēmumu vietnēs. Līdzīga veida slīdnis - karuselis bieži ir atrodams jebkura veida vietnēs.
Piemēri | Lejupielādēt
Tiny Circleslider
Šis mazā izmēra slīdnis ir gatavs darbam ierīcēs ar jebkuru ekrāna izšķirtspēju. Slīdnis var darboties gan apļveida, gan karuseļa režīmā. Mazais aplis tiek piedāvāts kā alternatīva citiem šāda veida 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. Ir labi ieviests atbalsts vilkšanas un nomešanas metodei un automātiskajai slaidu ritināšanas sistēmai.
Piemēri | Lejupielādēt
Īkšķa satura slīdnis
Jaudīgs, adaptīvs, karuseļa tipa slīdnis ir lieliski piemērots modernai vietnei. Pareizi darbojas jebkurā ierīcē. Ir horizontāli un vertikāli režīmi. Tā izmērs ir samazināts līdz tikai 1 KB. Īpaši kompaktajam spraudnim ir lieliskas vienmērīgas pārejas.
Piemēri | Lejupielādēt
wow slīdņu 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
Adaptīvs 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 opcijām un demonstrē savas funkcijas ar dažādiem pārejas efektiem.
Piemēri | Lejupielādēt
jKaruselis
jCarousel ir jQuery spraudnis, kas palīdzēs sakārtot attēlu skatus. Jūs varēsiet viegli izveidot pielāgotus attēlu karuseļus no piemērā redzamā ietvara. Slīdnis ir atsaucīgs un optimizēts mobilajām platformām.
Piemēri | Lejupielādēt
ScrollBox — jQuery spraudnis
Scrollbox ir kompakts spraudnis slīdņa - karuseļa vai teksta skriešanas līnijas izveidošanai. Galvenās funkcijas ietver vertikālas un horizontālas ritināšanas efektu ar pauzi, novietojot peles kursoru.
Piemēri | Lejupielādēt
dbpasKaruselis
Vienkāršs karuseļa slīdnis. Ja jums ir nepieciešams ātrs spraudnis, šis ir 100% piemērots. Nāk tikai pamata funkcijas, kas nepieciešamas, lai slīdnis darbotos.
Flexisel veidotāji smēlušies iedvesmu no vecās skolas spraudņa jCarousel, izveidojot tā kopiju, kas ir vērsta uz pareizu slīdņa darbību mobilajās ierīcēs un planšetdatoros.
Flexisel responsīvais izkārtojums, darbojoties mobilajās ierīcēs, atšķiras no pārlūkprogrammas loga lielumu orientētā izkārtojuma. Flexisel ir lieliski pielāgots darbam ar zemas un augstas izšķirtspējas ekrāniem.
Piemēri | Lejupielādēt
Elastislide — atsaucīgs karuseļa slīdnis
Elastislide lieliski pielāgojas ierīces ekrāna izmēram. Varat iestatīt minimālo attēlu skaitu, kas jāparāda ar noteiktu izšķirtspēju. Labi darbojas kā karuseļa slīdnis ar attēlu galerijām, izmantojot fiksētu aptinumu un vertikālas ritināšanas efektu.
Piemērs | Lejupielādēt
Flex Slider 2
Bezmaksas programmatūras slīdnis no Woothemes. Tas pamatoti tiek uzskatīts par vienu no labākajiem atsaucīgajiem slīdņiem. Spraudnis satur vairākas veidnes un noderēs gan iesācējiem, gan ekspertiem.
Piemērs | Lejupielādēt
Apbrīnojams karuselis
Pārsteidzošs karuselis - adaptīvais slīdnis jQuery attēli. Atbalsta daudzas satura pārvaldības sistēmas, piemēram, WordPress, Drupal un Joomla. Tā atbalsta arī Android un IOS, kā arī operētājsistēmu darbvirsmas versijas bez 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
/* Šeit sākas mūsu karuselis. Karuseļa iesaiņojums ir relatīvi novietots, karuseļa vienums ir absolūts. . */ .carousel-wrapper( position:relative; /* Absolūti novietoto lodziņu augstums un platums tiek iegūts no vecākvārda. Mēs tās padarījām caurspīdīgas pēc noklusējuma, un pēc tam tās izgaisīsies, noklikšķinot uz .arrow-prev un.arrow-next. saites. * / .carousel-item( pozīcija: absolūts; augšā: 0; apakšā: 0; pa kreisi: 0; pa labi: 0; polsterējums: 25 pikseļi 50 pikseļi; necaurredzamība: 0; pāreja: all0.5sease-in-out; /* Paziņojums polsterējums kreisajā pusē un 50 pikseļi labajā pusē?Tādā veidā mēs varam novietot savas saites!Katra no tām būs 50 pikseļu plata. Es izmantoju arī tukšas saites ar fona raksts lai saites izskatītos kā bultiņas. Pārbaudiet, vai esat mainījis Saites URL ar sākotnējo URL, lai jūsu saites nebūtu tikai caurspīdīgi taisnstūri. */ .arrow(pozīcija:absolūts; augšpuse:0; displejs:bloks; platums:50px; augstums:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); fons:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Atgriezīsim kreiso bultiņu. */ &.arrow-prev( left:0; ) /* Un otro pa labi . Tā kā bultiņai izmantoju to pašu attēlu, es to pagriežu par 180 grādiem */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Man ļoti patīk, kā izskatās karuseļa slaidi tumšs fons, un, ja .carousel-item blokam ir klase "gaisma", mēs mainīsim tā tekstu uz baltu un izmantosim baltas bultiņas, nevis pelēkas. Vēlreiz pārbaudiet, vai ceļš uz bultiņas attēlu ir pareizs */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Uzrakstiet multivides vaicājumu, lai mainītu bultiņu izmēru ierīcēs ar mazāku ekrāna izmēru.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50 % ; ) ) ) /* Iestatīt parādāmos saišu mērķus: nav; Tādējādi mēs atbrīvojamies no nepārtrauktas pārlūkprogrammas lēkšanas līdz karuseļa augšai ar katru klikšķi uz bultiņām. Šis rekvizīts attiecas uz jebkuru elementu, kura ID sākas ar "target-item". */ ( display:none; ) /* Iepriekš mēs padarījām visus savus karuseļa slaidus caurspīdīgus, kas nozīmē, ka, kad karuselis tiks ielādēts, tā vietā iegūsim lielu tukšu kastīti. Mainīsim pirmā slaida caurspīdīguma vērtību uz 1 displejam. Mēs arī iestatījām z indeksu uz 2, novietojot to virs pārējiem slaidiem. */ .item-1( z-index:2; opacity:1; ) /* Bet mēs nevēlamies, lai pirmajā slaidā vienmēr būtu necaurredzamība: 1; pretējā gadījumā mums būs jāiziet cauri šim slaidam, kamēr pārējie griežas. */ *:target~.item-1( necaurredzamība:0; ) /* ..bet ja #target-item-1 ir fokusā un mēs vēlamies parādīt pirmo slaidu, atlasiet to ar ~ ikonu un iestatiet necaurredzamība atpakaļ uz 1:-) */ #target-item-1:target~.item-1( necaurredzamība:1; ) /* Ja fokusā ir citi target-item-#, atlasiet tos, izmantojot ~ atlasītāju, izgaismojiet tos un novietojiet tos augšpusē ar z indeksu: 3. Šeit varat pievienot papildu diapazonus ar mērķa vienuma ID, ja jums ir vairāk nekā trīs. Var pievienot 10 vienumus vienlaikus.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; necaurredzamība:1; ) )
Jā, tēma ir diezgan sagrauta. Tomēr bieži vien ir grūti atrast to, kas jums patiešām nepieciešams. Visi piedāvā ļoti izsmalcinātus skriptus ar daudzām papildu funkcijām. Un parasti tie jau ir saspiesti spraudņi.
To var izmantot kā attēlu karuseli, ziņu karuseli vai jebkuru citu satura karuseli =)
Vienīgie mazie zvaniņi un svilpes, ko es sev atļāvu, bija ēna pie karuseļa bloka.
UPD: 06.07.2014
Tas izskatīsies apmēram šādi: DEMO Lejupielādēt
Struktūra izskatīsies šādi:
TJ vienkāršais adaptīvais karuselis
Aprakstīsim stilus:
Karuselis (maksimālais platums: 1080 pikseļi; /* visa bloka platums */ piemale: 50 pikseļi automātiski; platums: 100%; ) saturs ārpus galvenā apgabala */ pozīcija: relatīvais; ) .karuseļa vienumi ( platums: 10000 pikseļi; / * iestatiet lielāku vienumu kopas platumu */ pozīcija: relatīvā; /* novietojiet lodziņu attiecībā pret galveno karuseļa apgabalu */ ) .carousel -block ( peldēt: pa kreisi; /* sarindojiet visus karuseļa elementus */ platums: 250 pikseļi; /* iestatīt katra elementa platumu */ polsterējums: 10 pikseļi 10 pikseļi 10 pikseļi 0 pikseļi; /* izveidot polsterējumu, lai elementi nesaplūstu */ ) .carousel -block img( display:block; ) /***** ********** BUTTONS ***********/ .carousel-button-left a, .carousel-button-right a(platums: 25 pikseļi; augstums: 36 pikseļi; novietojums: relatīvs ; augšā: 80 pikseļi; kursors: rādītājs; teksta noformējums: nav; ) .carousel-button-left a( peldēšana: pa kreisi; fons: url(../images/carousel- left.png); ) .carousel-button- pa labi a( pludiņš: pa labi; fons: url(../images/carousel-right.png); ) /*************** ĒNA ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0,6) ;)
Un visbeidzot, kā tam vajadzētu darboties:
//Apstrādājot labo bultiņu, noklikšķiniet uz $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(.carousel"); right_carusel(carusel ); atgriezt nepatiesu; )); //Apstrādājot kreiso bultiņu, noklikšķiniet uz $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(.carousel"); left_carusel(carusel ) ; atgriezt nepatiesu; )); 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((left: "0px"), 200; ) funkcija right_carusel(carusel)( var block_width = $(carusel).find(.carousel-block").outerWidth(); $(carusel).find ("".carousel-items").animate((pa kreisi: "-"+ block_width +"px"), 200, function()( $(carusel).find(.carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(.carousel-items")); $(carousel-items).find(.carousel-items .carousel-block").eq(0 ) .remove(); $(carusel).find(.carousel-items").css(("left":"0px")); )); ) $(function() ( //Atceliet tālāk esošo rindiņu lai iespējotu karuseļa automātisko ritināšanu auto_right(.carousel:first"); )) // Automātiski dinamiskās ritināšanas funkcija auto_right(carusel)( setInterval(function()( if (!$(carusel).is(.hover")) right_carusel(carusel); ), 3000) ) // Kursors virzīts virs karuseļa $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // Kursors tika noņemts no karuselis $(document).on("mouseleave", ".carousel", function()($(this).removeClass("hover")))
Attiecīgi ēnu var noņemt. Un, lai to izmantotu, jums vienkārši jāaizstāj galvenā bloka izmērs un ligzdotie "ritināšanas" bloki css. Šim procesam ir arī ļoti viegli izveidot cilpu, lai tas ritinātu automātiski (in Šis gadījums, vienkārši noņemiet komentārus no funkcijas auto_right izsaukuma). Tas ir, uzdevuma ietvaros no šīs nepretenciozās galerijas vari izgatavot visu nepieciešamo!
Jāņem vērā arī tas, ka šis piemērs ir adaptīvs, tas ir, karuseļa izmērs pielāgojas ekrāna izmēram un tiks pareizi parādīts gan datora vai klēpjdatora ekrānā, gan planšetdatoru un viedtālruņu ekrānos.
1. jQuery karuselis "clickCarousel"
Bloķēt ar ritināmiem ziņu paziņojumiem. Kreisās/labās bultiņas tiek izmantotas, lai ritinātu blokus. Arhīvā ir karuselis divos stilos: gaišais un tumšais.
1. jQuery karuselis, spraudnis carouFredSel
Glīts un svaigs jQuery attēlu karuselis.
4. jQuery spraudnis: Elastislide karuselis
5. Spraudnis "TinyCarousel"
Lieliski satura slīdņi attēlu karuseļa veidā, izmantojot jQuery. Demonstrācijas lapā ir aprakstīts, kā šo karuseli piesaistīt savai vietnei.
Spraudnis "Slider Kit", viegls karuselis ar Dažādi ceļi ritiniet.
7. javascript karuselis
8. jQuery spraudnis "Režģa navigācijas efekti"
Oriģinālā navigācija starp attēlu sīktēliem. Lai skatītu efektu demonstrācijas lapas labajā pusē, noklikšķiniet uz pogas Uz augšu un Uz leju. Šis jQuery risinājums nodrošina arī pārvietošanas efektu uz sīktēlu un ritināšanu ar peles ritenīti.
9. Viegls karuselis
10. Easy Paginate bloku karuselis
jQuery spraudnis "Easy Paginate". Katrs taisnstūra bloks ir parasts li saraksta vienums, un, ja ir vairāk nekā trīs vienumi, tad, lai tos skatītu visu, kas nepieciešams, izmantojot slīdnim līdzīgu navigāciju (izmantojot uz priekšu un atpakaļ vērstās bultiņas 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. Pārvietojot peles kursoru, kustība tiek apturēta. HTML iezīmēšanas līmenī ritināmos lodziņus attēlo regulāri li saraksta vienumi.
12. javascript css ritināms apgabals
javascript "TinyScroller" risinājums, lai izveidotu ritināmu apgabalu, kas ievietots DIV konteinerā.
13. jQuery Smooth Div Scroll Plugin
Spraudnis, lai ieviestu satura horizontālo ritināšanu noteiktā apgabalā. Pārvietojot peles kursoru virs apgabala kreisās vai labās malas, sākas ritināšana.
Navigāciju starp slaidiem ar saturu var veikt, izmantojot bultiņas vai noklikšķinot uz sīktēla. Zemāk ir poga "Rādīt", kas ļauj paslēpt/rādīt sīktēlus vai Pilns apraksts slidkalniņš.
15. Satura rotators "Apļveida satura karuselis"
17.Ritinātājs
Bloks ar ritinātāju, kas tiek parādīts, virzot kursoru virs kursora. Varat ritināt saturu, izmantojot gan ritjoslu, gan peles ritenīti.
jQuery līdzīgo risinājumu iedvesmoja līdzīga ietekme Apple vietnē. Šīs korporācijas izstrādātāji vienmēr ir atraduši interesantus risinājumus, kas iedvesmojuši tīmekļa pārziņus no visas pasaules. Lai demonstrētu spraudni, sarakstā atlasiet vienu no kategorijām.
19. Satriecošs 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. Bloķēt rotāciju, 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 vietnē Twitter skrejlapas.
Šis spraudnis pārvērš saraksta vienumus (ul li) par jQuery elementi karuseļi.
26. javascript karuselis "ImageFlow"
Attēlus ir viegli ritināt ar peles ritenīti.
27. Satura ritināšana
Kompakts bloks ar paziņojumu par jaunākajiem materiāliem vietnē vai jaunumiem. Kreisajā kolonnā tiek parādīts īsu jaunāko ziņu paziņojumu saraksts ar lappusēm. Atlasot vienu no tiem, labajā kolonnā tiek parādīts vairāk nekā Detalizēts apraksts un saiti, lai lasītu pilnu publikācijas tekstu. Ieviests ar jQuery.
Attēli ar saitēm tiek ritināti, virzot kursoru virs peles, ritināšana apstājas un parādās navigācijas josla. Novietojot peles kursoru virs attēla, tā nosaukums tiek parādīts arī starp vadības pogām. Lapā izskatās lieliski
