Adaptīvs, vai, ja jūs vēlaties, atsaucīgs web dizains tagad nav tikai cita dizainera tendence, tas jau ir noteikts standarts, lai izstrādātu vietnes, kas nodrošina tīmekļa vietņu universālumu, harmonisku vizuālo uztveri uz dažādu lietotāju ierīču ekrāniem. Vēl nesen, izstrādājot adaptīvā veidneMan bija jārisina dažādas grūtības, integrējot dažus slīdņus un attēlu galerijas, nesalaužot kopējo dizaina stilu. Tagad viss ir daudz vieglāk, tīklā ir milzīgs skaits gatavu risinājumu un tas, kas ir īpaši apmierināts, lielākā daļa no tiem ir brīvi piekļūt, ar atvērtā koda.

Ierosināto instrumentu daudzveidības dēļ es apkopoju nelielu pārskatu par vispiemērotākajiem adaptīvās jquery slīdņu notikumiem, kas parādījās pēdējā laikā un izplata bez jebkādiem ierobežojumiem, t.i. pilnīgi bez maksas.

Wow slīdni.

Adaptīvā jQuery slīdni attēli ar lielisku vizuālo efektu kopumu (pagriezieni, izlidošana, izplūšana, spirāli, žalūzijas utt. ...) un daudzus gatavus modeļus. Ar palīdzību ievietošanas vednis uzcelta wower, jūs varat viegli un viegli izveidot apdullināšanu slīdrādes dažu minūšu laikā. Izstrādātāja tīmekļa vietnei ir visas nepieciešamās dokumentācijas par spraudņa iestatīšanu un izmantošanu krievu valodā, lieliskos plug-in darbības piemērus. Pieejams arī lejupielādei atsevišķi spraudnis WordPress Un modulis Joomla. Es esmu pārliecināts, ka daudzi vēlaties šo brīnišķīgo slīdni, gan iesācējiem, gan ceļvedis webmother.

Hislider.

HTML5, jQuery slīdni un attēlu galerija, absolūti bezmaksas spraudnis personiskai lietošanai vietnēs, kurās darbojas populārās sistēmas - WordPress, Joomla, Drupal. Ar šo vienkāršo, bet gan funkcionālo instrumentu jūs varat viegli izveidot mūsu vietņu lapās, pārsteidzošās un spilgtas slaidrādes, iespaidīgas prezentācijas un jauno ziņojumu paziņojumus. Vairāki gatavie modeļi un ādas slīdni, apdullināšanas pārejas efekti (mainās) saturs, dažādu multivides satura produkcija:, video ar YouTube un Vimeo, elastīgiem pielāgotiem iestatījumiem utt.

NIVO slīdni.

Nivo Slider ir vecs, labi zināms visiem, kas atrodas tematā, viens no skaistākajiem un viegli lietojamiem attēlu slīdņiem. Jquery Nivo slīdni spraudnis var brīvi lejupielādēt un tālāk izmantot, izplatīts saskaņā ar MIT licenci. Ir arī atsevišķs spraudnis WordPress, bet diemžēl jau maksā un nomest, jo tas būs 29 $ par licenci. Tas ir labāk, lai mazliet mazliet līdz ar WP tēmu failus un piestipriniet bezmaksas jQuery versiju NIVO slīdņa spraudnis jūsu emuārā, kas ir ieguvums, kā to izdarīt pietiekami tīklā.
Attiecībā uz funkcionālo, viss ir perfektā kārtībā. Jquery v1.7 + bibliotēka tiek izmantota darbam, skaistām pārejas efektiem, vienkāršiem un ļoti elastīgiem iestatījumiem, adaptīvo izkārtojumu, automātisko attēlu apgriešanu un daudz ko citu.

Slīdņa ideju iedvesmoja izstrādātāji, kas labi pazīstami visā Apple produktu stilā, kur mainās vairāki mazi vienumi (attēli), lai noklikšķinātu uz izvēlētās kategorijas ar vienkāršu animācijas efektu. Codrops iepazīstina ar jūsu rīcībā detalizētu mācību, lai izveidotu šo slīdni, pilnīgu HTML iezīmēšanas izlīdzināšanu, CSS noteikumu kopumu un izpildāmo komplektu jQuery spraudnis, kā arī brīnišķīgs dzīves piemērs, izmantojot slīdni.

Slīdēt slīdni.

Pilna ekrāna attēla slīdnis uz jQuery un CSS3 + detalizētu mācību grāmatu par spraudņa integrāciju vietnes lapā. Ideja ir samazināt atvērto strāvas slaidu ar konkrētu saturu, pārejot uz nākamo vai iepriekšējo saturu. No izmantojot jQuery Un CSS animācijas jūs varat izveidot unikālas pārejas starp slaidiem. Slīdņa adaptīvais izkārtojums nodrošina, ka ekrānos tas būs vienlīdz labi apskatīt ekrāniem. dažādi veidi Pielāgotas ierīces.

Elastīgs satura slīdnis.

Satura slīdni, kas automātiski tiek noregulēts platumā un augstumā atkarībā no mātes konteinera lieluma, kurā tā atrodas. Diezgan vienkāršs dizains un elastīgs slīdnis jQuery iestatījumos ar navigāciju apakšā, mainot ekrāna izmēru līdz samazināšanai, navigācija tiek parādīta kā ikonas. Ļoti detalizēta dokumentācija (nodarbību radīšana) un dzīves piemēri.

3D Stack slider.

Slīdņa eksperimentālā versija, kas demonstrē attēlus ar pārejām no 3D plaknes. Attēli tiek sadalīti divos horizontālos skursteņos, izmantojot navigācijas bultiņu, tiek parādīta un pāreja katru nākamo attēlu skatīšanās valstī. Kopumā nekas īpašs, bet paša ideja un izpildes metode ir diezgan interesanta.

Ļoti vienkāršs, 100% adaptīvs un pilnekrāna jquery slīdni attēli. Slīdņa darbs ir balstīts uz CSS pārejām (īpašuma pāreja) komplektā ar jQuery Magic. Maksimālā platuma vērtība ir 100% instalēta pēc noklusējuma, šādā veidā attēla lielums tiks mainīts atkarībā no ekrāna izmēriem. Nekas īpašas animācijas efekti un prieki dizainā, viss ir vienkāršs un asinājums ar nepārtrauktu darbu.

Minimālie slaidi

Nosaukums runā par sevi, iespējams, ir viens no vieglākajiem un minimālistiskākajiem jquery slīdņiem no attēliem, kurus es satiku (spraudnis 1KB). AtbildesLides.js. -Kornet jQuery spraudnis, kas izveido slaidrādi, izmantojot elementus konteinera iekšpusē. Darbojas ar plašu pārlūkprogrammu klāstu, ieskaitot visas IE versijas - slaveno progresa bremzi no IE6 un augstākas. Papīra izmanto CSS3 pārejas komplektā ar JavaScript, uzticamību. Vienkārša iezīmēšana, izmantojot neierobežotu sarakstu, pārejas un laika intervālu, automātiskās un manuāla kontrole slaidu pārslēgšana, kā arī atbalsts vairākām slīdrām. Tas ir tik frisky "bērns".

Kamera.

Kamera - bezmaksas jquery. Spraudnis, lai organizētu slaidrādi vietņu lapās, gaismas slīdni ar daudziem pārejas efektiem, ar 100% adaptīvu izkārtojumu un ļoti vienkārši iestatījumi. Brīnišķīgi iederas jebkuru lietotāju ierīču ekrānos (PC monitori, tabletes, viedtālruņi un mobilie tālruņi). Spēja demonstrēt iebūvēto video. Automātiska slaidu maiņa un manuāla vadība, izmantojot pogas un attēlu bloku. Praktiski pilnīga attēlu galerija kompaktajā dizainā.

bXSLIDER JQuery.

Vēl viens, diezgan vienkārši adaptīvais slīdnis par jQuery. Slaidos jūs varat ievietot jebkuru saturu, video, attēlus, tekstu un citus elementus. Paplašināts atbalsts sensoriem ekrāniem. Izmantojiet CSS-animācijas pārejas. Liels skaits dažādu variāciju prezentācijā slīdrādes un kompakta attēlu galerijas. Automātiska un manuāla kontrole. Slaidu pārslēgšana, izmantojot pogas, izvēloties sīktēlus. Satura faila mazais izmērs ir ļoti vienkāršs iestatījumos un īstenošanā.

FlexSlider 2.

FlexSlider 2 - Atjaunināta versija Tāda paša nosaukuma slīdnis, uzlabojot reakcijas ātrumu, skriptu ministriju un samazinot saunšanos / pārkraušanu. Spraudnis ietver pamata slīdni, kontrolējot slaidu kontroli, izmantojot sīktēlus, iebūvētās bultiņas pa kreisi pa labi un apakšējo navigācijas rūti pogām. Spēja izvadīt video slaidos (Vimeo), elastīgus parametru iestatījumus (pārejas, dizains, laika intervāls), pilnībā adaptīva izkārtojums.

Galerija.

Labi zināms un diezgan populārs adaptīvais spraudnis jQuery, lai izveidotu augstas kvalitātes galerijas un attēlus. Slīdņa interfeiss, pateicoties tās vadības panelim, vizuāli atgādina parasto video atskaņotāju, spraudņa sastāvs ietver vairākus dažādus rotājumus. Iegulto video un attēlus ar populāri pakalpojumi: Flickr, Vimeo, YouTube un citi. Detalizēta dokumentācija Izveidojot un lietojot.

Melleņu.

Vienkārši bez frills bezmaksas jquery slīdni attēlu, kas rakstīts tieši adaptīvo web dizainu. Melleņu ir eksperimentāls jQuery atvērtā koda spraudnis. Minimālisma dizains, ne efekti, tikai nevainojami pop-up attēlus, kas aizstāj viens otru pēc noteikta laika. Viss ir ļoti vienkāršs, ielieciet, es savienoju un uz priekšu ...

jQuery Popeye 2.1.

Ļoti kompakts jquery attēla slīdnis ar gaismas logu elementiem. Sakarā ar tās elastīgajiem izmēriem, tas ir ļoti vienkārši iestrādāts jebkurā konteinerā vienā amatā formā miniatūru, kad jūs virzīt peles kursoru vai noklikšķiniet uz kura gaismas kaste ir aktivizēta ar palielinātu attēlu un kontroles elementiem. Tas ir ērti izvietot šādu slīdni sānu paneļos, lai prezentētu produktu vai ziņu paziņojumus. Lielisks risinājums vietnēm ar lielu informācijas apjomu.

Secība

Bezmaksas adaptīvais slīdnis ar paplašinātām CSS3 pārejām. Minimālisma stils, 3 dekorēšanas tēmas, katrs rāmis slaidi horizontālā virzienā, kas parādās attēla centrā, paraksta pa labi, miniatūras tiek dublēti apakšējā labajā stūrī. Produktu prezentācijas lapu bojājums skatīšanai katrā rāmī. Kontrole ietver arī pogas uz priekšu un atpakaļ. Atbalstīt visus mūsdienu pārlūkprogrammas.

Zvēliens.

Ir pilnīgi reklāmas slīdni attēlu un funkcionalitāti un uz iestatījumiem, no iestatījumiem, ir izmaiņas ātruma slaidu maiņas, savienojot manuālo režīmu (vadības pogas ir aktivizētas), nepārtraukta slaidrāde. Šis slīdnis ir tiesības būt, un viņš mani piesaista tikai ar to, ka tas ir, es neatradu neko īpaši interesantu šajā attīstībā, es varētu būt bijis meklē slikti)))

Atsaucīgs attēlu slīdnis.

Skaista tāda adaptīvā attēlu slīdni no Vladimirs Kudinovova. Labs, augstas kvalitātes apstrādāts rīks, kas nodrošināts ar vizuāliem piemēriem un sīkākas instrukcijas par izveidi, uzstādīšanu un izmantošanu. Adaptīvais dizains, Gudrs pogas un zaļās šāvēji, viss ir diezgan gudrs un mierīgi, bez spiediena.

Frakcionējums.

Bezmaksas jquery slīdni spraudnis ar parallax efektu attēliem un teksta slaidiem. Slaidu animācijai ir vairākas parādīt vērtības ar pilnu kontroli katrā laika un animācijas parametrā. Spēja animāciju uzreiz vairākiem elementiem uz slaida. Jūs varat iestatīt dažādas metodes Animācijas, izzušana slaidu vai pārejām no noteiktā virzienā. Automātiskais displejs un manuālā kontrole, izmantojot navigācijas bultiņas pop-up, kad jūs lidināties. 10 veidu animācijas ietekme slaidu izskatu un daudz ko citu veidu ...

Pārskatīšana bija diezgan plaša, bet ne pietiekami informatīva dēļ, ņemot vērā apsvērumu skaitu. Visas detaļas un detalizēti apraksti. funkcionalitāte Viens spraudnis, jūs varat uzzināt tieši izstrādātāju lapās. Vēlams cerēt, ka kāds ir atvieglojis meklēšanu visatbilstošāko rīku, lai izveidotu krāsainu attēlu slīdņus to vietņu lapās.

Vai esat kādreiz domājuši, ka būtu jauki, lai varētu strādāt ar rusificētām veidnēm? Vienkārši domājiet par minūti. Nav laika, lai strādātu ar angļu valodas veidnēm. Mēs steidzamies, lūdzu, lūdzu, tagad var atrast Templatemster Marketer. Katrs no tiem teksts tika uzrakstīts manuāli. Un, protams, visi gatavie risinājumi ir neticami viegli lietojami.

Ar visu cieņu, Andrew

Pirms kāda laika es sāku apgūt jQuery. Es domāju, ka visi zina, ka tā sauktā populārākā bibliotēka, lai izstrādātu un izveidotu skriptus (skriptus) par JavaScript. Ar to ir ļoti viegli izveidot iespaidīgus un interaktīvus vietnes elementus.

Šajā rakstā es vēlos pateikt, kā izveidot vienkāršu universālu slīdni, izmantojot jQuery. Faktiski tīkls ir ļoti liels skaits Dažādas gatavas slīdņus, kas dažkārt izskatās ļoti vilinoši, un diezgan funkcionāli, bet mēs to darīsim no nulles.

Tātad, kādas mūsu slīdņa iezīmes uz jQuery (ko es saucu hwslider), var atzīmēt?

• Viegli lietojams un dizains - es gribēju izveidot vienkāršu skriptu bez frills, tāpēc es neizmantoju animācijas CSS3, un kods izrādījās ļoti daudzpusīgs un saprotams.
• Spēja ievietot abu attēlu un jebkurā HTML koda slaidos.
• Spēja ritināt slaidus kā pasūtījuma (uz priekšu - atpakaļ) un izvēlieties katru slaidu (1,2,3,4 ...)
• Automātiski jaunās saites (iepriekšējais - nākamais, un ar slaidu numuriem). Jums tikai nepieciešams, lai ievietotu pareizo daudzumu divs, un viss pārējais tiks aprēķināt sevi. Nu, var atzīmēt, ka slaidu skaits ir neierobežots.

Skripts ir saderīgs ar visām mūsdienu pārlūkprogrammām: ti, operas, firefox, safari, hroms (jo slīdnis neizmanto CSS3).

Sāksim ar HTML atzīmi. Pareizajā vietā HTML lapā vai veidnē, kas nepieciešama, lai ievietotu.

Šeit viss ir vienkāršs, kā jūs varat redzēt, jūs varat ievietot tik daudz slaidu, izveidojot jaunu div. Jūs varat tos ievietot html kods, piemēram, attēlu vai bloku ar tekstu. Neaizmirstiet tikai savienot pašu bibliotēku uz jQuery ar visiem JS - skriptiem. Ja jūs nezināt, kā, apskatīt piemēru.

# Slider-wrap (/ * apvalka slīdnis un pogas * / Platums: 660px;) #slider (/ * apvalka slīdni * / Platums: 640px; Augstums: 360px; pārpildes: slēpta; robeža: #ee cietā 10px; pozīcija: radinieks; ) .Slide (/ * Slide * / Platums: 100%; Augstums: 100%;) .sli-saites (/ * Slaidu maiņas pogas * / Margin-top: 10px; teksta sakārtošana: centrs;) Kontroles slide (rezerve: 2px; Displejs: inline-bloks; Platums: 16px; Augstums: 16px; Pārplūdes: slēpta; teksta ievilkums: -9999PX; fons: URL (RadioBg.png) Centrālais apakšējais nav atkārtojums;) .sli -Links .Control-slide: lidināties (kursors: rādītājs; fona pozīcija: centra centrs;) .sli-saites .control-slide.Active (fona stāvoklis: centrs;) #prewbutton, #nextbutton (/ * saite " Nākamais "un" pedid "* / displejs: bloks; platums: 15px; Augstums: 100%; Amats: Absolute; Tops: 0; Pārplūdes: slēpta; teksta ievilkums: -999px; fons: URL (arrowbg.png) Left Centre Ne-atkārtojums; dūmainība: 0.8; z-index: 3; kontūra: nav svarīgi;) #prewbutton (pa kreisi: 10px;) #nextbutton (pa labi: 10px; fona : URL (arrowbg.png) labais centrs bez atkārtošanās;) #prewbutton: lidināties, #nextbutton: lidināties (necaurredzamība: 1;)

Izteiksim to sīkāk. Vispirms mēs dodam galveno ierīci ar "slīdņa-wrap" identifikatoru, vēlamo platumu. Tā kā visi pārējie bloki tiek ievietoti tajā, tad augstumu nevar uzdot, tas būs atkarīgs no tā, kas būs iekšā. Tad mums ir jānosaka tvertnes lielums, kurā būs slaidi. Tas ir - #slider. Ļaujiet mums jautāt viņam platumu un augstumu, kā arī, piemēram, robežu 10 pikseļos. Šeit ir platums - 640px ir mazāks par vecāka platumu, jo mēs pievienojam robežu ar platumu 10px pa labi un pa kreisi. Pašu slaidu platums (.slide) ir atkarīgs arī no šīs divceļa platuma.

Un pēdējais: mums ir nepieciešams iestatīt pozīciju: relatīvo slaidu konteineram kā slaidi iekšpusē - ar absolūtu pozicionēšanu. Par slaidiem paši CSS, tikai platums un augstums ir iestatīti. Atlikušās īpašības ir iestatītas jau jQuery skriptu.

Selector.sli-saites ir bloks, kurā pārejas poga vajadzīgā slaidu būs. Šīs pogas ir vienkārši sugas elementi numurskas tiek ievietoti vajadzīgajā daudzumā automātiski kopā un ar viņu vecākiem.si-saites. Par pogām mēs lūdzam skaistu skatu, proti, mēs izgatavojam katru pogas kvadrātu, saskaņot tos visus centrā, kā arī, pateicoties pārplūdei: slēpts un teksta ievilkums: -9999PX, mēs noņemam tekstu, atstājot tikai fona ikonas arī mainās, kad jūs virzāties uz šo kursora elementu. Lai ērtības, es izmantoti sprites, kas samazināja attēlu skaitu.

Tālāk ir sastādīts aktīvā poga. Vienkārši nomainiet fona pozīciju. Tad retransform saites, lai dotos uz pierādījumiem un iepriekšējiem slaidiem. Jūs varat dot viņiem jebkuru dizainu, kā arī pogas. Šīs saites tiek ievietotas automātiski # sarakstā. Bet ka viņi var redzēt, es viņiem jautāju absolūtu pozicionēšanu un augšējo slāni (Z index: 3), lai tie parādās virs slaidiem. Es domāju, ar CSS viss ir skaidrs šeit un vienkārši: jūs varat mainīt gandrīz visas īpašības, lai padarītu slīdni, kā jums nepieciešams.

Tagad pieņemsim sev skriptu:

Var hwslidesped \u003d 700; var hwtimeout \u003d 3000; Var hwneedlinks \u003d taisnība; $ (Dokuments) .ready (funkcija (E) ($ (". Slide"). CSS ("pozīcija": "absolūti", "Top": "0", "pa kreisi": "0")). Slēpt () (".slide"). EQ (slidenums) .Fadeout (hwslidesped); ja (bultiņa \u003d\u003d "Next") (ja (slidenum \u003d\u003d (slidecount-1)) (slidenum \u003d 0;) cits (slidenum ++) ) Cits, ja (bultiņa \u003d\u003d "pregre") (ja (slidenum \u003d\u003d 0) (slidenum \u003d slidecount-1;) cits (sliderum- \u003d 1)) cits (slidenums \u003d bultiņa;) $ (". Slide"). Eq (slidenum) .fadein (hwslidesped, rotators); $ (" ");), ja (hwneedlinks) (Var $ legtion \u003d $ (") .prependto ("# slīdni"); $ ("# Nextbutton"). Noklikšķiniet (funkcija () (ANIMSLIDE ("Nākamais");)) $ ("#Prewbutton"). Noklikšķiniet (funkcija () (animslide ("Prew");))) VAR $ adderspan \u003d ""; $ (". Slide"). Katrs (funkcija (indekss) ($ adderspan + \u003d) " "+ indekss +""; }); $("

Pirmkārt, iestatījumi tiek saglabāti mainīgajos lielumos: hwslidespeed - slaidu strāvas ātrums, hwtimeout - laiks pēc automātiskās slaidrādes, hwneedlinks - kontrolē "Next" un "iepriekšējās" saites - ja šī mainīgā vērtība ir taisnība, šīs saites Tiks parādīts, un, ja tas ir nepatiess, tie nebūs (piemēram, uz galvenā lapa Mans emuārs).

Tālāk mēs iestatām nepieciešamo CSS īpašības Slaidiem, izmantojot metodi. CSS (). Bloki ar slaidiem mēs uzspiež viens otru, izmantojot absolūto pozicionēšanu, tad paslēpt tos all.hide (), un pēc tam parādiet tikai pirmo. Slidenum mainīgais ir aktīvās slaida skaits, tas ir, skaitītājs.

Mūsu jQuery slīdņa galvenā loģika ir animslīda funkcija. Tā pieņem vienu parametru. Ja mēs piešķiram "nākamo" vai "pregre" līniju, tad nosacītie operatori darbosies, un parādīsies šāds vai iepriekšējs slaids. Ja mēs samazinājām kā skaitļa vērtību, šis numurs kļūs par aktīvu slaidu, un tas tiks parādīts.

Tātad šī funkcija slēpj pašreizējo div, aprēķina jauno un parāda to.

Lūdzu, ņemiet vērā, ka metode .Fadein (), kas padara redzamo aktīvo slaidu, ir noteikts ar otro argumentu. Šī ir tā sauktā atzvanīšanas funkcija. Tas tiek veikts, kad parādās slaids pilnībā. Iebildums Šis gadījums Tas tiek darīts, lai nodrošinātu automātiskas ritināšanas slaidus. Rotatora funkcija definēts zemāk izraisa animslīda funkciju atkal, lai dotos uz nākamo slaidu caur laika intervālu jums ir nepieciešams: mēs saņemsim slēgšanu, nodrošinot pastāvīgu ritināšanu.

Viss darbojas labi, bet mums ir nepieciešams, lai apturētu izpildi automatizācijas, ja lietotājs sniedz kursoru uz slīdni vai nospiež pogas. Lai to izdarītu, ir izveidots mainīgs pauze. Ja tā vērtība ir pozitīva - patiesa, tad automātiska pārslēgšana nebūs. Izmantojot metodi.Hover (), mēs norādām: skaidru taimeri, ja tas darbojas - Cleartimeout (Slidetime) un instalēt Pause \u003d True. Un pēc kursora noņemšanas izslēdziet pauzi un palaidiet rotatora slēgšanu ().

Turklāt mums ir jāizveido jauni priekšmeti uz lapas un jānovieto pareizajā vietā. Izmantojot katru () ciklu katram slaidu (div-a ar class.slide), izveidojiet span elementu, kurā numurs ir slaidu numurs. Šis numurs tiek izmantots animācijas funkcijā, lai dotos uz slaidu ar šo numuru. Wrap viss div ar pareizajām klasēm, un galu galā mēs saņemsim šādu iezīmēšanu:

Šķiet, kāpēc mēs izveidojam atzīmi skripta iekšpusē, nevis HTML kodā?. Fakts ir tāds, ka, piemēram, ja skripti ir izslēgti - tas neredzēs elementus, kas nedarbosies, un tas to neuztraucēs neskaidrības. Turklāt kods ir vienkāršots, kas nav slikts SEO.

Rezultātā slīdņa iezīmēšana izskatīs kaut ko līdzīgu (kā slaidu, es izmantoju attēlu un iestatiet 5 gabalus):

< >

0 1 2 3

Zemāk jūs varat redzēt, kā mūsu jQuery slīdni darbojas Demo lapā un lejupielādēt visus nepieciešamos avotus.

Visbeidzot, pāris brīžus par šī slīdņa integrāciju ar Drupal. Šo kodu var pievienot veidnes failam, piemēram, lapā.tpl.php un pievienojiet skriptu uz individuālo JS failu uz tēmu. Jquery Drupal ir iespējots pēc noklusējuma, bet darbojas saderības režīmā (). Ir divas izmaiņas. Vai wrap viss JS kods:

(Funkcija ($) (// visu jūsu kodu ...)) (jQuery);

vai nomainiet $ simbolus visā jquery skriptu. Kā šis:

JQuery (dokuments). Latvijā (slide) ); var sliderum \u003d 0; var slidetime; slidecount \u003d jQuery ("# \u200b\u200bslīdni .slide"). Izmērs (); VAR ANMSLIDE \u003d FUNKCIJA (bultiņa) (// et.

Piemēram, pirmā metode jau ir īstenota.

Paldies par lasīšanu! Atstājiet komentārus, atgriezieties. Un arī jūs varat abonēt RSS, lai vispirms saņemtu emuāra atjauninājumus!

Pievienots:Tas nav viss. Lasīt. Tur mēs pievienosim jaunas iespējas šim skriptam.

1. Lieliskas jquery slaidrādi

Liela iespaidīga slīdrāde, izmantojot jQuery tehnoloģijas.

2. JQuery "mēroga karuselis" spraudnis

Mērogojama slaidrāde, izmantojot jQuery. Jūs varat iestatīt izmērus slīdrādes, kas jums ir vispiemērotākā.

3. JQuery Plug "Slidejs"

Attēlu slīdni ar teksta aprakstu.

4. Plugin "JSlidernews"

5. CSS3 jQuery slīdni

Kad jūs virzīt kursoru uz navigācijas bultiņām, parādās nākamās slaida apaļais sīktēls.

6. Jauki jQuery slīdni "Prezentācijas cikls"

jQuery slīdni ar attēla ielādes indikatoru. Ir automātiska slaidu izmaiņas.

7. JQuery spraudnis "Parallax slider"

Slīdnis ar tilpuma fona efektu. Šī slīdņa izcelt fona fonā, kas sastāv no vairākiem slāņiem, no kuriem katrs ir ritināts ar dažādi ātrumi. Tā rezultātā tas izrādās imitācija no surround efektu. Tas izskatās ļoti skaists, jūs varat pārliecināties par to. Šādās pārlūkprogrammās tiek parādīts vienmērīgāks efekts: Opera, Google Chrome., IE.

8. Svaigi, gaiši jQuery slīdni "BXSLIDER 3.0"

Demo lapā sadaļā "Piemēri" jūs varat atrast saites uz visiem iespējamās iespējas Izmantojiet šo spraudni.

9. JQuery Slider attēlu, spraudnis "Slidejs"

Stilīgs jquery slīdnis noteikti varēs rotā jūsu projektu.

10. JQuery spraudnis slaidrādi "Easy slaidi" v1.1

Viegli lietojams jQuery spraudnis, lai izveidotu slaidrādi.

11. spraudnis "jQuery slidini"

Viegli jQuery spraudnis dažādos dizainos. Ir automātiska slaidu izmaiņas.

12. JQuery CSS galerija ar automātisku slaidu maiņu

Ja apmeklētājs noteiktā laikā nav nospiest "uz priekšu" vai "atpakaļ" bultiņas, galerija sāks ritināt automātiski.

13. JQuery Slider "NIVO slīdni"

Ļoti profesionāla augstas kvalitātes gaismas spraudnis ar derīgs kods. Izmaiņas ir daudz dažādu slaidu efektu.

14. JQuery Slider "Mobilylider"

Svaigs slīdnis. jQuery slīdni ar dažādām attēlu izmaiņām.

15. JQuery spraudnis "Slider²"

Vienkāršs slīdnis ar automātisko slaidu maiņu.

16. Svaigs JavaScript slider

Slīdnis ar automātisku attēlu maiņu.

Spraudnis slaidrādes ieviešanai ar automātisku slaidu maiņu. Ir iespējams pārvaldīt displeju, izmantojot attēlu sīktēlus.

jQuery css. Attēla slīdni, izmantojot Nivoslider spraudni.

19. JQuery Slider "JSHOWFF"

Spraudnis, lai pagrieztu saturu. Trīs iespējas lietošanai: bez navigācijas (ar automātisku maiņu slaidrādes formātā), ar navigāciju formā pogām, ar navigāciju formā attēliem.

20. Aizvara efekts Portfolio spraudnis

Svaigi jquery spraudnis fotogrāfu portfolio. Galerija īstenoja interesantu ietekmi mainīt attēlus. Fotogrāfijas aizstāj viens otru ar līdzīgu objektīva aizvara darbu.

21. Easy JavaScript CSS slīdni "Tinyslider 2"

Attēlu slīdņa ieviešana ar izmantojot JavaScript un CSS.

22. Tinycircleslider slīdņa vējš

Stilīgs apaļš slīdnis. Pāreja starp attēliem tiek veikta, velkot ap apļa slīdni kā sarkanu apli. Lieliski iederas jūsu vietnē, ja esat dizains, izmantojiet apaļos elementus.

23. attēlu slīdnis jQuery

Easy slīdni "Slider Kit". Slīdnis ir pārstāvēts dažādos dizainos: vertikāli un horizontāli. Arī ieviesa dažāda veida navigācijas starp attēliem: izmantojot "uz priekšu" un "atpakaļ" pogas, izmantojot peles riteni, izmantojot peles klikšķi uz slaida.

24. Galerija ar miniatūrām "Slider Kit"

Galerija "Slider Kit". Ritināšanas miniatūra tiek veikta gan vertikālā, gan horizontālā virzienā. Pāreja starp attēliem tiek veikta, izmantojot: peles riteņus, peles klikšķus vai miniatūras kursoru.

25. JQuery Slider Kit Content Slider

Vertikālais un horizontālais saturs slīdnis uz jQuery.

26. JQuery Slide Show "Slider Kit"

Slaidrāde ar automātisko slaidu maiņu.

27. Easy Professional JavaScript CSS3 slīdni

Veikls slīdnis Jquery un CSS3, kas izveidots 2011. gadā.

jQuery slīdrāde ar miniatūrām.

29. Vienkārša jQuery slaidrāde

Slaidrādi ar navigācijas pogām.

30. Šokēts slīdrādes jQuery "skitter"

jQuery spraudnis "skitter", lai izveidotu apdullināšanu slīdrādi. Plugin atbalsta 22 (!) Apskatīt dažādas animācijas efektus, mainot attēlus. Tas var strādāt ar divām navigācijas iespējām slaidiem: izmantojot slaidu skaitļus un ar sīktēlu. Noteikti apskatiet demonstrāciju, ļoti augstas kvalitātes atrastu. Lietotas tehnoloģijas: CSS, HTML, jQuery, PHP.

31. Slideshow "neērts"

Funkcionālā slaidrāde. Slaidu veidā var veikt: vienkārši attēli, Attēli ar parakstiem, attēliem ar pop-up padomiem, videoklipiem. Varat izmantot bultiņas, saites uz slīdēšanas numuriem un taustiņiem pa labi / pa kreisi uz tastatūras, lai pārvietotos. Slaidrāde tiek veikta vairākās versijās: ar sīktēliem un bez tiem. Lai apskatītu visas iespējas, staigājiet pa saitēm Demo # 1 - Demo # 6, kas atrodas uz augšu uz Demo lapā.

Ļoti oriģināli dizaina slīdni attēli, kas atgādina ventilatoru. Animācijas slaidu izmaiņas. Navigācija starp attēliem tiek veikta, izmantojot bultiņas. Tā nodrošina arī automātisku nobīdi, ko var ieslēgt un izslēgt, izmantojot pogu Play / Pause, kas atrodas uz augšu.

Animācijas jquery slīdni. Fona attēli tiek automātiski mērogošanas, kad mainās pārlūkprogrammas logs. Katram attēlam ir pieejams bloks ar aprakstu.

34. "Flux slīdni" slīdni uz jQuery un CSS3

Jauns jQuery slīdnis. Mainot slaidus, vairākas atdzist animācijas efektus.

35. JQuery "JSWitch" spraudnis

Animācijas jQuery galerija.

Gaismas slaidrādi par jQuery ar automātisko slaidu pārmaiņām.

37. Jaunā versija spraudņa "SLIDECK 1.2.2"

Profesionālā satura slīdnis. Iespējas ir iespējamas ar automātisku slaidu maiņu, kā arī iespēju, izmantojot peles riteni pārejai starp slaidiem.

38. JQuery Slider "Sudo Slider"

Easy Image Slider par jQuery. Ļoti daudzas ieviešanas iespējas: horizontālā un vertikālā attēlu maiņa, ar saitēm uz slaidu numuru un bez tiem, ar attēlu parakstiem un bez dažādām attēlu izmaiņām. Ir automātiskas slaidu izmaiņas. Saites uz visu paraugu īstenošanu var atrast Demo lapā.

39. Jquery CSS3 slaidrādi

Slaidrāde ar miniatūrām atbalsta automātiskās slaidu maiņas režīmu.

40. JQuery "Flux Slider"

Slīdni ar vairākām attēlu izmaiņām.

41. Vienkāršs jquery slīdnis

Stilīgs attēlu slīdnis uz jquery.

Nepieciešams vienkāršs slīdnis ar automātisku ritināšanu. Atnest ...

Slīdņa darba apraksts.

Slaidi tiks būvēti rindā, un pēc noteikta laika tiks ritināts.

Sarkanais rāmis parāda slīdņa redzamo daļu.

Beigās slīdni, jums ir nepieciešams, lai dublētu pirmo slaidu. Ir nepieciešams, lai nodrošinātu ritināšanu no trešās slaidu uz pirmo. Jums ir arī nepieciešams pievienot pēdējo slaidu uz sākuma, lai ritinātu atpakaļgaitas virziens No pirmā slaida uz trešo. Zemāk ir darbs slīdni priekšējā virzienā.

Kad slīdnis nonāk pie beigām, tā kopija no slīdņa sākuma uzreiz ievieto pēdējā slaida vietā. Cikls tiek atkārtots vēlreiz. Tas rada bezgalīgas slīdņa ilūziju.

HTML marķējums

Lai sāktu ar, mēs izveidojam vienkāršu slīdni ar automātisku ritināšanu. Par savu darbu jums ir nepieciešami divi konteineri. Pirmais noteiks slīdņa redzamās platības lielumu, un otrais ir nepieciešams, lai tajā varētu uzņemt slīdņus. Slīdņa iezīmēšanai būs šāda forma:

> >

Stili slīdni

.slider-box (Platums: 320px; Augstums: 210px; Pārplūdes: slēpta;) .slider (pozīcija: relatīvs; Platums: 10000px; Augstums: 210px;)

Konteiners.Slider-lodziņš nosaka izmērus slīdni. Izmantojot pārplūdi: slēpts īpašums, visi elementi ir paslēptas, kas nav iekļauti elementa iekšpusē.

Konteineram. Slīdnis ir noteikts liels platums. Ir nepieciešams, lai visi slaidi iederētos tajā.

Slaidi ir saskaņoti ar pludiņu: kreiso īpašumu.

Zemāk ir shematiska slīdņu bloku atrašanās vieta.

Skripts

Slaidu kustība tiks veikta, izmantojot vienmērīgas pārmaiņas Margin-Left Properties konteiners .slider.

$ (Funkcija () (VAR platums \u003d $ (". Slider-Box"). Platums (); // Platums slīdnis. intervāls \u003d 4000; // slaidu maiņas intervāls. $ (". Slider img: pēdējais") .Clone () .prependto (".slider"); // Pēdējā slaida kopija ir novietota sākumā. $ () .eq (1) .Clone () .Appendto (".Slider"); // beigās pirmo slaidu kopiju. // konteiners. Slider maiņās atstāj uz vienu slaidu platumu. Setinternerval ("animācija ()", intervāls); // Animācija () funkcija tiek sākta, veicot slaidu maiņu. )); Funkcijas animācija () (VAR margin \u003d parseint ($ ("Slider") .CSS ("Marginleft")); // pašreizējais bloks ofsslider Platums \u003d $ (". Slider-Box") .Width () // Platums slīdnis. Slideramunt \u003d $ (". Slīdni") .bērniem () .Length; // slīdni slīdni. ja (rezerve! \u003d (- platums * (slideramunt- 1))) // Ja pašreizējais slaids nav pēdējais, (Margin \u003d margin-platums; // Maržas vērtība samazinās līdz slīdēšanas platumam. ) Cits ( // ja tiek parādīts pēdējais slaids, $ (". Slīdni") .CSS ("margin-pa kreisi", - platums); // pēc tam bloķē sākotnējo pozīciju, Margin \u003d - platums * 2; ) $ (". Slider") .Anate ((Margineft: starpība), 1000); // block.slider maiņa pa kreisi uz 1 slaidu. } ;

Tā rezultātā, tas izrādījās vienkāršs slīdnis ar bezgalīgu automātisku ritināšanu.

Vienkāršs, viegls (21kb saspiesta formā) Slider rakstīts uz tīra JavaScript, kam nav atkarības, t.i. Darbojas bez jquery.

Pārbaudīts šādās pārlūkprogrammās:

• Chrome 26.0.
• Firefox 20.0.
• Safari 5.1.7
• IE 10.
• Opera 16.0.

Ir nepilnīgs IE8 / 9 (bez seku) atbalsts.

Iespējas

• Jūs varat pievienot neierobežotu skaitu slīdņu uz lapu, pat novietojiet vienu no otras puses.
• Izmaina izmērus no atkarības no satura, bet ir iespējams aizliegt.
• Navigācijas tastatūra - Kad kursors ir uz slīdņa, jūs varat pārslēgt slīdņus ar bultiņām.
• Mobilā pieskāriena notikumu atbalsts.

Savienojums

Pirms aizvēršanas atzīmes Jums ir nepieciešams izveidot savienojumu slidr.js. vai slidr.min.js. failu.

HTML marķējums

slidr.js. Tas var darboties ar jebkuru inline, inline bloku, bloķēt vienumus, kas ir ID atribūts. Ir atļauts izmantot jebkuru pirmā līmeņa meitas elementus ar atribūtu datu slidru elementiem, piemēram:

• Ābols.
• banāns.
• kokosrieksts.

Ābols.

banāns.

kokosrieksts.

JavaScript.

Pēc savienojuma slidr.js. Globālais slidru objekts būs pieejams. Vieglākais veids, kā izveidot slidru:

Slidr.Create ("slidr-id"). Sākt ();

Zvaniet ar visu iestatījumu uzdevumu:

Slidr.Create ("Slidr-ID" (pēc: E) (E) (e) (Console.Log (":" + E.In.slidr);), pirms: funkcija (E) (Console.Log ("Out:" + E.OUT.SLIDR);), rīvmaizi: True, Controls: "CORNER", virziens: "Vertikāls", Fade: False, tastatūra: True, Overflow: True, Tēma: "# 222", Laiks: ("Cube ":" 0.5s vieglums-in "), pieskarties: True, pāreja:" kubs ")). Sākt ();

Iestatījumi

Visi pieejamie iestatījumi sliddr.js ir redzams tabulā zemāk.

Parametrs	Veids	Kluss.	Apraksts.
Pēc	funkcija.		atzvanīšanas funkcija pēc slaida maiņas
Pirms tam.	funkcija.		atzvanīšanas funkcija pirms slaida maiņas
Maizes drupačas.	bool	nepatiess	Rādīt maizes drupatas, lai kontrolētu slaidus. Patiesība vai meli.
Kontrole.	virkne	robežu.	Bultiņas atrašanās vieta, lai kontrolētu slaidus. Robeža, stūris vai neviens.
Virziens.	virkne	horizontāls	Noklusējuma virziens jauniem slaidiem. Horizontāli vai h, vertikāli vai v.
Izbalināt	bool	taisnība.	Iespējot mazumtirdzniecības efektu slaidu maiņai (izbalināt-in / out). Patiesība vai meli.
Tastatūra.	bool	nepatiess	Ieslēdziet saldumu maiņu, izmantojot tastatūru. Patiesība vai meli.
Pārplūst.	bool	nepatiess	Iespējot pārplūdi blokam ar slīdni. Patiesība vai meli.
Pauze	bool	nepatiess	Nemainiet slaidus automātiski, kad jūs pārvietojat peli (jums ir nepieciešams sākt auto ()). Patiesība vai meli.
Tēmu.	virkne	#Fff.	Kontroles elementu krāsa (maizes drupatas un bultiņas). #hexcode vai RGBA (vērtība).
Laiks	objektu.	{}	Pielāgots animācijas laiks, lai pieteiktos. ("Pāreja": "Laiks").
Pieskarties	bool	nepatiess	Pieskarieties skārienjutīgajai vadībai mobilajās ierīcēs. Patiesība vai meli.
Pāreja.	virkne	lineārs	Slaidu ietekmi. Kubs, lineārs, izbalējis vai nav.

Reverse zvanu funkcijas pēc un pirms saņemt šādus datus:

(ID: "Slidr-ID", jo: (EL: # , Slidr: "Datu slidrs", trans: "Pāreja-in", dir: "Virziens-in"), Out: (EL: # , Slidrs: "datu sliddr-out", trans: "pārejas-out", dir: "virziena-out"))

Slider.js Global API.

Globālā slidra nameSpace nodrošina šādas funkcijas:

/ ** * Pašreizējā versija * @RETURN (virkne) major.minor.patch. * / funkciju versija () (); / ** * Pieejamās pārejas efekti. * @return (masīvs) pārejas. * / Funkciju pārejas () (); / ** * Izveido un atgriež slidru. * Zvanīšana uz šo funkciju divreiz tajā pašā elementā atgriezīsies jau izveidoto slidra objektu. * @Param (virknes) elementa ID sliddr. * @Param (objekts \u003d) opt_settings iestatījumi slīdni. * / Funkcija Izveidot (ID, Opt_Settings) ();

Slīdni api

// sliddr inicializācija ar tās var s \u003d sliddr.Create iestatījumi ("sliddr-api-demo", (rīvmaizi: taisnība, pārplūde: taisnība)); // Pievienojiet horizontālus slaidus ar standarta pārejas efektu. // "viens" masīva elements gala pacēlājos sliddr // Pabīdiet bezgalīgi S.Add slaidus ("H", ["One", "divi", "trīs", "viens"); // pievienot vertikālu slaidu ar "kuba" pārejas efektu. S.Add ("V", ["Pieci", "četri", "trīs", "pieci"], "kubs"); // palaist slīdni. S.Start ();

Īss ieraksts

Var s \u003d slidr.Create ("sliddr-api-demo" (rīvmaizi: taisnība, pārplūde: taisnība)). Pievienot ("H", ["viens", "divi", "trīs", "viens"]) .add ("V", ["Pieci", "četri", "trīs", "pieci"], "kubs") .Start ();

Pilns sliddr.js API funkcijas saraksts ir norādīts zemāk.

/ ** * Sāciet slidru! * Automātiski atrod slaidus, lai radītu, ja pirms zvana sākuma nekas netika pievienots (). * @Param (virkne) opt_start `datu sliddr` id, lai sāktu. * @return (tas) * / funkcija sākums (Opt_Start) (); / ** * Pārbaudiet, vai mēs varam slīdēt. * @Param (virkne) nākamais virziens ("uz augšu", "uz leju", "pa kreisi", "labi") vai `datu sliddr` id. * @return (Boolean) * / Funkcija Cancelide (nākamais) (); / ** * Slidkalniņš! * @Param (virkne) nākamais virziens ("uz augšu", "uz leju", "pa kreisi", "labi") vai `datu sliddr` id. * @return (tas) * / funkciju slaids (nākamais) (); / ** * Pievieno slaidu komplektu. * @Param (virknes) virziens `horizontāli || H` vai `vertikāli || v`. * @Param (masīvs) ID sarakstu "Data-Slidr` ID" s, lai pievienotu sliddr. Slaidiem jābūt tiešiem bērniem no sliddr. * @Param (string \u003d) opt_transition pāreja uz pieteikties starp slaidiem vai lietošanu Noklusējums. * @Param (Boolean \u003d) Opt_overwrite, vai pārrakstīt esošās slaidu kartēšanas / pārejas, ja notiek konflikti. * @ Atgriezums (tas) * / funkcija Pievienot (virziens, IDS, Opt_Transition, Opt_overwrite) (); / ** * automātiski Advance uz nākamo slaidu pēc noteikta taimauta. Zvani sākas (), ja tas vēl nav izsaukts. * @Param (int \u003d) opt_msec skaitlis Milis starp katru slaidu pāreju. Noklusējums ir 5000 (5 sekundes). * @Param (string \u003d ) Opt_direction "Up", "Down", "pa kreisi" vai "Right". Noklusējums "Right". * @Param (string \u003d) opt_start `` datu sliddr` ID, lai sāktu (tikai darbojas, ja auto ir To sauc par Startr). * @Return (tas) * / funkcija Auto (Opt_SSEC, Opt_Direction, Opt_Start) (); / ** * Pārtraukt automātisko pāreju, ja tas ir ieslēgts. * @return (tas) * / funkcijas apstāšanās () (); / ** * Iestatiet pielāgotus animācijas laikus. * @Param (virkne | objekts) Pāreja vai nu pārejas nosaukums (I.E "CUBE") vai ("pāreja": "Laiks") objekts. * @Param (string \u003d) Opt_Timing jauno animācijas laiku (I.E "0,5s vieglumu-in"). Nav nepieciešams, ja pāreja ir objekts. * @return (tas) * / funkciju laiks (pāreja, opt_timing) (); / ** * Pārslēgt rīvmaizi. * @return (tas) * / funkciju rīvmaizi () (); / ** * Pārslēgt kontroli. * @param (string \u003d) OPT_SCHEME Pārslēgt opt_scheme Pārslēgt ieslēgšanas / izslēgšanas, ja nav klāt, citādi mainīt izkārtojumu. "Robeža", "stūris" vai "nav". * @Return (tas) * / funkciju kontrole (Opt_Scheme) ();

Ritiniet lapu slaidu izmaiņas

Šī nepatīkamā kļūda parādās dažās pārlūkprogrammās. Lai to labotu. Jums ir nepieciešams pievienot stilu ķermenim:

Ķermenis (pārplūde: slēpta;)

Dinamiskā lieluma maiņa

Slidrs pats "saprot", vai mainīt slīdņa izmēru zem attēla. Ja ir norādīts slīdņa bloks, slidiņš tos automātiski nemainīs. Ja ir norādītas ministru platuma un min augstuma īpašības, slīdnis mainīs tās lielumu saskaņā ar saturu, ņemot vērā šīs vērtības. Pretējā gadījumā lieluma definīcija tiks automātiski.

Automātiska izmēra maiņa

labi.

krāšņs.

neticams

Statiskie izmēri

labi.

krāšņs.

neticams

Kontroles elementi slidr.

Turpmāk kontroles marķēšana:

Jūs varat pielāgot jebkuru slīdņa kontroles elementu, izmantojot CSS selektorus:

Malā .slidr-control.right (platums: 50px! Svarīgs; Augstums: 50px! SVARĪGI; TOP: 50%! SVARĪGI; Margin-top: -25px! : URL ("/ statiskie / attēli / arrow_right.png") 14px 13px bez atkārtošanās melns; dūmainība: 0.4;) malā .slidr-control.right: lidināties (necaurredzamība: 1;)

"Arrow" kontrole tiek īstenota, izmantojot pseido selektoru: pēc tam, lai paslēptu to, izmantojiet šādu kodu:

// slēpt vienu bultiņu vienā kontrollera. Malā .slidr-control.right: pēc (robežu krāsa: caurspīdīga! SVARĪGI;) // slēpt visas bultiņas vienā kontrolierī. Malā .slidr-kontrole: pēc (robežas krāsa: caurspīdīga! Svarīgi;) // slēpt visas slidru bultas. Malā .slidr-kontrole: pēc (robežas krāsa: caurspīdīga!

Maizes drupatas slidrs.

Maizes drupatas ir vienkārša HTML atzīme. Katrs UL apzīmē visu virkni, un katrs li atsevišķs maizes drupinātājs:

Maizes drupatas ar CSS stilizāciju:

// Pielāgojiet pozīciju, izmēru, robežu krāsu un fona krāsu. Malā (tiesības: 50%! Svarīgi; Margin-Right: -41px! SVARĪGI;) malā .slīdr-rīvmaizi Li (platums: 15px! Svarīgi; Augstums: 15px! SVARĪGI; NEKĀDE: 3PX! SVARĪGI;) malā. Li.Normāls (robeža krāsa: balta! SVARĪGI;) malā .slīdr-rīvmaizi li.acture (fona krāsa: melns!

Licence

Šī programmatūra var brīvi izmantot saskaņā ar MIT licenci.