Html – fono vaizdo slankiklis naudojant slidų slankiklį – Stack Overflow rusų kalba. Adaptyvių fotoaparato slankmačių pasirinkimas – nemokamas JQuery slankiklis

Laikas nestovi vietoje ir su juo progresuoja. Tai paveikė ir internetą. Jau dabar matosi, kaip keičiasi internetinių svetainių išvaizda, ypač populiarus adaptyvus dizainas. Ir šiuo atžvilgiu atsirado nemažai naujų prisitaikantys jquery slankikliai, galerijos, karuselės ar panašūs įskiepiai.
1. Atsakingas horizontalių įrašų slankiklis

Prisitaikanti horizontali karuselė su išsamias instrukcijas apie montavimą. Jis pagamintas paprastu stiliumi, tačiau galite jį formuoti taip, kad tiktų sau.

2. Glide.js slankiklis

Šis slankiklis tinka bet kuriai svetainei. Jis naudoja atvirojo kodo Glide.js. Slankiklio spalvas galima lengvai pakeisti.

3. Pakreipta turinio skaidrių demonstracija

Interaktyvaus turinio slankiklis. Šio slankiklio akcentas yra 3D vaizdų efektas, taip pat įvairios atsitiktinės išvaizdos animacijos.

4. Slankiklis naudojant HTML5 drobę

Labai gražus ir įspūdingas slankiklis su interaktyviomis dalelėmis. Jis buvo sukurtas naudojant HTML5 drobę,

5. Vaizdo keitimo slankiklis

Slankiklis su keitimo efektu (Sklandus perėjimas iš vieno objekto į kitą). Šiame pavyzdyje slankiklis puikiai tinka žiniatinklio kūrėjo arba žiniatinklio studijos portfeliui portfelio pavidalu.

6. Apvalus slankiklis

Apskritimo formos slankiklis su vaizdo apvertimo efektu.

7. Slankiklis su neryškiu fonu

Prisitaikantis slankiklis su perjungimu ir fono suliejimu.

8. Atsakingas mados slankiklis

Paprasta, lengva ir prisitaikantis slankiklis svetainei.

9. Slicebox – jQuery 3D vaizdo slankiklis(ATNAUJINTA)

Atnaujinta Slicebox slankiklio versija su pataisymais ir naujomis funkcijomis.

10. Nemokamas animuotas reaguojantis vaizdo tinklelis

JQuery papildinys, skirtas sukurti lanksčią vaizdų tinklelį, kuris perjungs kadrus naudojant skirtingą animaciją ir laiką. Tai gali gerai atrodyti kaip svetainės fonas ar dekoratyvinis elementas, nes galime pasirinktinai rodyti naujus vaizdus ir jų perėjimus. Papildinys yra kelių versijų.

11.Flex slankiklis

Universalus nemokamas papildinys jūsų svetainei. Šis papildinys yra kelių slankiklio ir karuselės parinkčių.

12. Nuotraukų rėmelis

Fotorama yra universalus papildinys. Jame yra daug nustatymų, viskas veikia greitai ir lengvai, skaidres galite peržiūrėti visame ekrane. Slankiklis gali būti naudojamas tiek fiksuoto dydžio, tiek prisitaikantis, su miniatiūromis arba be jų, su apskritu slinkimu arba be jo ir daug daugiau.

P.S.Kelis kartus įdiegiau slankiklį ir manau, kad tai vienas geriausių

13. Nemokama ir pritaikoma 3D slankiklio galerija su miniatiūromis.

Eksperimentinės galerijos slankiklis 3DPanelio išdėstymas su tinkleliu ir įdomiais animacijos efektais.

14. Css3 slankiklis

Adaptyvusis slankiklis sukurtas naudojant css3 su sklandžia turinio išvaizda ir lengva animacija.

15. WOW slankiklis

WOW slankiklis yra vaizdo slankiklis su nuostabiais vaizdo efektais.

17. Elastingas

Elastingas slankiklis su visišku reagavimu ir skaidrių miniatiūromis.

18. Plyšys

Tai per visą ekraną reaguojantis slankiklis, kuriame naudojama css3 animacija. Slankiklis pagamintas dviem versijomis. Animacija padaryta gana neįprastai ir gražiai.

19. Adaptyvi nuotraukų galerija plius

Paprastas nemokamas galerijos slankiklis su vaizdo įkėlimu.

20. Responsive Slider for WordPress

Prisitaikantis nemokamas WP slankiklis.

21. Paralakso turinio slankiklis

Slankiklis su paralakso efektu ir kiekvieno elemento valdymu naudojant CSS 3.

22. Slankiklis su muzikos nuoroda

Slankiklis naudojant JPlayer atvirojo kodo kodą. Šis slankiklis primena pristatymą su muzika.

23. Slankiklis su jmpress.js

Reaguojantis slankiklis yra pagrįstas jmpress.js, todėl galėsite pridėti įdomių 3D efektų į skaidres.

24. Greito užvedimo skaidrių demonstravimas

Skaidrių demonstravimas su greitu skaidrių perjungimu. Užveskite slydimo jungiklį.

25. Vaizdinis akordeonas su CSS3

Vaizdo akordeonas naudojant css3.

26. Lietimui optimizuotas galerijos papildinys

Tai jautri galerija, optimizuota jutikliniams įrenginiams.

27. 3D galerija

3D sienų galerija- sukurtas Safari naršyklė, kur bus matomas 3D efektas. Jei pažvelgsite į jį kitoje naršyklėje, funkcionalumas bus geras, tačiau 3D efektas nebus matomas.

28. Slankiklis su puslapiais

Atsakingas slankiklis su puslapių puslapiais naudojant JQuery UI slankiklį. Idėja yra naudoti paprastą navigacijos koncepciją. Galima atsukti visus vaizdus arba perjungti skaidrę po skaidrės.

29. Vaizdo montažas su jQuery

Automatiškai sutvarkykite vaizdus pagal ekrano plotį. Labai naudingas dalykas kuriant portfelio svetainę.

30. 3D galerija

Paprastas 3D apskritas slankiklis, naudojant css3 ir jQuery.

31. Viso ekrano režimas su 3D efektu naudojant css3 ir jQuery

Slankiklis su galimybe peržiūrėti viso ekrano vaizdus su gražiu perėjimu.

Šį slankiklį lengva įdiegti, o jei sugalvosite, galėsite lengvai jį sukonfigūruoti ir pasiekti norimą rezultatą. Kad šis slankiklis veiktų, jums reikia tik kelių elementų, kuriuos dabar apsvarstysime eilės tvarka.

HTML žymėjimas

Čia viskas labai paprasta, tereikia pačioje pradžioje iškart po žymos pridėti UL sąrašą kūno.

Sąraše yra tik trys eilutės li, tai yra, slankiklis skirtas 3 vaizdams, jei reikia daugiau, pirmiausia reikia pridėti reikiamą eilučių skaičių. Eikime toliau.

CSS stiliai

Tai turbūt pati svarbiausia darbo dalis, nes mūsų slankiklio veikimas priklauso nuo CSS. Atidarykite savo svetainės stiliaus failą ir pridėkite prie jo šį kodą.

Body_slides(sąrašo stilius:nėra; paraštė:0; užpildymas:0; z-indeksas:-2; fonas:#000;) .body_slides, .body_slides:after( padėtis: fiksuota; plotis:100%; aukštis:100% ; top:0px; left:0px;) .body_slides:after ( turinys: ""; fonas: skaidrus url(images/pattern.png) pakartokite viršuje kairėje;).body_slides li( plotis:100%; aukštis:100%; pozicija: absoliutus: 0 fono kartojimas: 18s linijinis begalinis 0s - ms-animation: anim_slides 18s begalinis 0s; linijinis begalinis 0s; 1.jpg) ) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2. jpg) ) body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) ) @-webkit -keyframes anim_slides ( 0% (nepermatomumas:0;) 6% (nepermatomumas:1;) 24% (nepermatomumas:1;) 30% (nepermatomumas:0;) 100% (nepermatomumas:0;) ) @-moz-keyframes anim_slides ( 0 % (neskaidrumas: 0;) 6 % (neskaidrumas: 1;) 24 % (nepermatomumas: 1;) 30 % (nepermatomumas: 0;) 100 % (neskaidrumas: 0;) )

Jei suprantate CSS, jums nebus sunku suprasti, kas už ką atsakingas. Aš jums pasakysiu minimumą, nes nėra prasmės mokyti CSS.

Mūsų sąrašas su skaidrėmis turi klasę body_slides. Jai suteikiami stiliai išvaizda ir bendruosius nustatymus.

Toliau turime pseudo elementą - : po, kuris apibrėžia papildomą sluoksnį, o raštas taškų pavidalu yra uždėtas ant fono. Tai atliekama naudojant vaizdą, iki kurio nurodytas kelias images/pattern.png. Jei pasirinkote kitą kelią, nurodykite jį teisingai.

.body_slides li:nth-child(1)- tai pirmoji skaidrė iš eilės ir turi fono paveikslėlį. Toliau eina n-asis vaikas(2), be paveikslėlio, jam suteikiamas dar vienas laikas ir yra lygus 6 sekundėms. Tai reiškia, kad jis pasirodys praėjus 6 sekundėms po pirmosios skaidrės. Kitas yra nth-child(3), jis pasirodys dar po šešių sekundžių, taigi jo laikas yra 12 sekundžių. Jei reikia pridėti 4-ą skaidrę, tada pridėkite nth-child(4) ir jos laikas jau turėtų būti 18 sekundžių. Manau, kad tai aišku.

Toliau reikia nurodyti visą animacijos laiką, dabar jis nustatytas body_slides ir lygus 18 sekundžių. Jei pridėsite 4 skaidres, tai bus lygi 24 ir pan. Jei gerai moki matematiką, turėtum susitvarkyti, svarbiausia nedaryti klaidų, nes slankiklis visai neveiks. Jei norite, galite pagreitinti arba sulėtinti nustatydami norimą laiką.

keyframes anim_slides- tai skaidrės atsiradimas ir išnykimas. Iš pradžių skaidrė yra skaidri ir jai suteikiama sąlyga - neskaidrumas: 0;. Kai ateina bet kurios skaidrės eilė, ji iš pradžių atsiranda, o paskui vėl pradeda tapti skaidri ir visiškai išnyksta, o vietoje jos atsiranda nauja. Jei norite pakeisti atsiradimo ar išnykimo greitį, pakeiskite procentą – tai procentas nuo viso laiko.

Likę nustatymai pagal norą ir poreikį – bendras fonas, dabar juodas, kelias į paveikslėlius, padėtis, sluoksnių lygis ir t.t. Šio slankiklio pranašumas yra tas, kad jis yra paprastas ir nenaudoja scenarijų ir ištisų bibliotekų, jei jis buvo sukurtas naudojant - jQuery. Labai tikiuosi, kad jei norėjote pakeisti fono paveikslėlius, šis CSS slankiklis jums padės.

Tai viskas, ačiū už dėmesį. 🙂

Jei į savo svetainę reikia įtraukti aukštos kokybės jQuery vaizdo slankiklį, šiame straipsnyje rasite reikalingų įskiepių aprašymą. Nors „JQuery“ labai palengvino darbą su „JavaScript“, mums vis tiek reikia įskiepių, kad paspartintume interneto kūrimo procesą.

Galime pakeisti kai kuriuos iš šių įskiepių ir sukurti naujus slankiklius, kurie labiau tinka mūsų svetainės tikslams.

Jei norite naudoti kitus slankiklius, tiesiog pridėkite pavadinimus, vaizdus ir pasirinkite skaidrių perėjimo efektus, kurie pateikiami kartu su slankikliu. Visi šie papildiniai yra su išsamia dokumentacija, todėl pridėti naujų efektų ar funkcijų nėra sudėtinga. Jei esate patyręs JQuery programuotojas, netgi galite pakeisti įvykiais pagrįstus paleidiklius.

Naujausios tendencijos, pvz., reaguojantis dizainas, yra labai svarbios žiniatinklio projektams, nesvarbu, ar diegiate papildinį, ar scenarijų. Dėl visų šių elementų kiekvienas iš šių įskiepių yra labai lankstus. Į šį sąrašą įtraukta viskas, kas pasirodė 2014 m.

„jQuery“ vaizdo slankikliai

Jssor reaguojantis slankiklis

Neseniai susidūriau su šiuo galingu JQuery slankikliu ir iš pirmų lūpų pamačiau, kad jis puikiai atlieka savo darbą. Jame yra neribotos galimybės, kurias galima išplėsti naudojant atvirojo kodo slankiklį:

• prisitaikantis dizainas;
• Daugiau nei 15 tinkinimo parinkčių;
• Daugiau nei 15 vaizdo keitimo efektų;
• Vaizdų galerija, karuselė, viso ekrano dydžio palaikymas;
• Vertikalus banerio rotatorius, skaidrių sąrašas;
• Vaizdo įrašų palaikymas.

Demonstracija | Atsisiųsti

PgwSlider - reaguojantis slankiklis, pagrįstas JQuery / Zepto

Vienintelė šio papildinio užduotis – rodyti vaizdų skaidres. Jis yra labai kompaktiškas, nes JQuery failai yra tik 2,5 KB dydžio, todėl jį galima įkelti labai greitai:

• Adaptyvus išdėstymas;
• SEO optimizavimas;
• Įvairių naršyklių palaikymas;
• Paprasti vaizdo perėjimai;
• Archyvo dydis yra tik 2,5 KB.

Demonstracija | Atsisiųsti

Jquery vertikalių naujienų slankiklis

Lankstus ir naudingas JQuery slankiklis, skirtas naujienų ištekliams su publikacijų sąrašu kairėje ir vaizdu dešinėje:

• prisitaikantis dizainas;
• Vertikalus stulpelis naujienoms perjungti;
• Išplėstos antraštės.

Demonstracija | Atsisiųsti

Wallop Slider

Šis slankiklis neturi jQuery, bet norėčiau jį pristatyti, nes jis yra labai kompaktiškas ir gali žymiai sutrumpinti puslapio įkėlimo laiką. Praneškite man, jei jums tai patinka:

• Adaptyvus išdėstymas;
• Paprastas dizainas;
• Įvairios skaidrės keitimo parinktys;
• Minimalus JavaScript kodas;
• Dydis tik 3KB.

Demonstracija | Atsisiųsti

Plokščio stiliaus Polaroid galerija

Dokumentų išsklaidyta ant stalo stiliaus galerija su lanksčiu išdėstymu ir gražiu dizainu turėtų būti įdomi daugeliui iš jūsų. Labiau tinka planšetiniams kompiuteriams ir dideliems ekranams:

• Prisitaikantis slankiklis;
• Plokščias dizainas;
• Atsitiktinis skaidrės keitimas;
• Visiška prieiga prie šaltinio kodo.

Demonstracija | Atsisiųsti

A-slankiklis

Demonstracija | Atsisiųsti

HiSlider – HTML5, jQuery ir WordPress vaizdo slankiklis

„HiSlider“ pristatė naują nemokamą „jQuery“ slankiklio papildinį, su kuriuo galite sukurti įvairias vaizdų galerijas su fantastiškais perėjimais:

• Prisitaikantis slankiklis;
• Nereikalauja programavimo žinių;
• Keletas nuostabių šablonų ir skinų;
• Gražūs perėjimo efektai;
• Įvairių platformų palaikymas;
• Suderinamas su WordPress, Joomla, Drupal;
• Galimybė rodyti turinį skirtingų tipų: vaizdai, YouTube vaizdo įrašas ir Vimeo vaizdo įrašai;
• Lankstus nustatymas;
• Naudingos papildomos funkcijos;
• Neribotas rodomo turinio kiekis.

Demo |Atsisiųsti

Oho slankiklis

WOW Slider yra reaguojanti jQuery- Vaizdo slankiklis su nuostabiais vaizdiniais efektais ( domino, pasukti, sulieti, apversti ir mirksėti, išskristi, žaliuzės) ir profesionalūs šablonai.

WOW Slider yra su diegimo vedliu, kuris leidžia sukurti fantastiškus slankiklius per kelias sekundes, nesuprantant kodo ar redaguojant vaizdų. Taip pat galima atsisiųsti „Joomla“ ir „WordPress“ įskiepių versijas:

• Visiškai reaguoja;
• Palaiko visas naršykles ir visų tipų įrenginius;
• Jutiklinių įrenginių palaikymas;
• Lengvas įdiegimas WordPress;
• Konfigūracijos lankstumas;
• SEO optimizuotas.

Demo |Atsisiųsti

Nivo Slider – nemokamas jQuery papildinys

Nivo Slider visame pasaulyje žinomas kaip gražiausias ir paprasčiausias naudoti vaizdo slankiklis. „Nivo Slider“ papildinys yra nemokamas ir išleistas pagal MIT licenciją:

• Reikalinga JQuery 1.7 ir naujesnė versija;
• Gražūs perėjimo efektai;
• Paprastas ir lankstus konfigūravimas;
• Kompaktiškas ir prisitaikantis;
• Atviras šaltinis;
• Galingas ir paprastas;
• Keli skirtingi šablonai;
• Automatinis vaizdo apkarpymas.

Demo |Atsisiųsti

Paprastas jQuery slankiklis su technine dokumentacija

Idėją įkvėpė Apple slankikliai, kuriuose gali išskristi keli smulkūs elementai su skirtingais animacijos efektais. Kūrėjai bandė įgyvendinti šią koncepciją atsižvelgdami į minimalūs reikalavimai sukurti paprastą internetinės parduotuvės dizainą, kuriame „skraidantys“ elementai atspindi skirtingas kategorijas:

• Adaptyvus išdėstymas;
• Minimalistinis dizainas;
• Įvairūs iškritimo ir skaidrių keitimo efektai.

Demo |Atsisiųsti

Viso dydžio jQuery vaizdo slankiklis

Labai paprastas slankiklis, kuris užima 100% puslapio pločio ir prisitaiko prie ekrano dydžių mobiliuosius įrenginius. Jis veikia su CSS perėjimais, o vaizdai yra „sukrauti“ kartu su inkarais. Inkarą galima pakeisti arba pašalinti, jei nenorite pridėti nuorodos prie vaizdo.

Įdiegtas slankiklis išsiplečia iki 100% ekrano pločio. Jis taip pat gali automatiškai sumažinti skaidrių vaizdų dydį:

• Adaptyvusis JQuery slankiklis;
• Pilnas dydis;
• Minimalistinis dizainas.

Demo |Atsisiųsti

Elastinis turinio slankiklis + pamoka

Elastic Content Slider automatiškai reguliuoja plotį ir aukštį pagal pirminio elemento matmenis. Tai paprastas jQuery slankiklis. Jį sudaro skaidrių sritis viršuje ir naršymo skirtukų juosta apačioje. Slankiklis reguliuoja savo plotį ir aukštį pagal pagrindinio konteinerio matmenis.

Žiūrint mažuose įstrižainės ekranuose, naršymo skirtukai virsta mažomis piktogramomis:

• prisitaikantis dizainas;
• Slinkimas pelės paspaudimu.

Demo |Atsisiųsti

Nemokamas 3D Stack Slider

Eksperimentinis slankiklis, slenkantis 3D vaizdus. Du krūvos primena popieriaus šūsnis, iš kurių slenkant vaizdai rodomi slankiklio centre:

• prisitaikantis dizainas;
• Flip – perėjimas;
• 3D efektai.

Demo |Atsisiųsti

Viso ekrano plyšio slankiklis, pagrįstas JQuery ir CSS3 + mokymo programa

Ši pamoka parodys, kaip sukurti slankiklį su pasukimu: idėja yra „iškirpti“ ir parodyti dabartinę skaidrę, kai atidarote kitą arba ankstesnį vaizdą. Naudodami JQuery ir CSS animaciją, galime sukurti unikalius perėjimo efektus:

• prisitaikantis dizainas;
• Padalintas perėjimas;
• Viso ekrano slankiklis.

Demo |Atsisiųsti

Unislider – labai mažas jQuery slankiklis

Jokių nereikalingų varpelių ir švilpukų, mažesnio nei 3KB dydžio. Naudokite bet kokį HTML kodą skaidrėms, išplėskite jį naudodami CSS. Viskas, kas susiję su „Unslider“, yra „GitHub“:

• Įvairių naršyklių palaikymas;
• Klaviatūros palaikymas;
• Aukščio reguliavimas;
• prisitaikantis dizainas;
• Lietimo įvesties palaikymas.

Demonstracija | Atsisiųsti

Minimaliai reaguojančios skaidrės

Paprastas ir kompaktiškas papildinys ( dydis yra tik 1 KB), kuris sukuria reaguojantį slankiklį, naudodamas sudėtinio rodinio elementus. ResponsiveSLides.js veikia su daugybe naršyklių, įskaitant visas IE versijas nuo IE6 ir naujesnės versijos:

• Visiškai reaguoja;
• Dydis 1 KB;
• CSS3 perėjimai su galimybe paleisti per JavaScript;
• Paprastas žymėjimas naudojant sąrašus su ženkleliais;
• Galimybė pritaikyti perėjimo efektus ir vienos skaidrės žiūrėjimo trukmę;
• Palaiko galimybę kurti kelias skaidrių demonstracijas;
• Automatinis ir rankinis slinkimas.

Demo |Atsisiųsti

Kamera – nemokamas jQuery slankiklis

Kamera yra įskiepis su daugybe perėjimo efektų ir reaguojančiu išdėstymu. Lengva nustatyti, palaikoma mobiliųjų įrenginių:

• Visiškai reaguojantis dizainas;
• Parašai;
• Galimybė pridėti vaizdo įrašus;
• 33 skirtingų spalvų piktogramos.

Demo |Atsisiųsti

SlidesJS, reaguojantis jQuery papildinys

SlidesJS yra reaguojantis įskiepis, skirtas JQuery (1.7.1 ir naujesnės versijos), palaikantis jutiklinius įrenginius ir CSS3 perėjimus. Eksperimentuokite su juo, išbandykite keletą paruoštų pavyzdžių, kurie padės išsiaiškinti, kaip prie projekto pridėti SlidesJS:

• prisitaikantis dizainas;
• CSS3 perėjimai;
• Jutiklinių įrenginių palaikymas;
• Lengva nustatyti.

Demonstracija | Atsisiųsti

BX Jquery slankiklis

Tai nemokamas reaguojantis jQuery slankiklis:

• Visiškai reaguoja – prisitaiko prie bet kokio įrenginio;
• Horizontalus, vertikalus slydimo keitimas;
• Skaidrėse gali būti vaizdų, vaizdo įrašų arba HTML turinio;
• Išplėstas jutiklinių įrenginių palaikymas;
• CSS perėjimų naudojimas skaidrių animacijai ( aparatūros pagreitis);
• API atgaliniai skambučiai ir visiškai vieši metodai;
• mažas failo dydis;
• Lengva įgyvendinti.

Demo |Atsisiųsti

FlexSlider 2

Geriausiai reaguojantis slankiklis. Nauja versija buvo modifikuotas siekiant padidinti greitį ir kompaktiškumą.

Demonstracija | Atsisiųsti

Galleria – „JavaScript“ pagrindu sukurta reaguojanti nuotraukų galerija

Galleria naudojama milijonuose svetainių vaizdų galerijoms kurti aukštos kokybės. Teigiamų atsiliepimų apie jos darbą skaičius tiesiog nepatenka į diagramas:

• Visiškai nemokama;
• viso ekrano žiūrėjimo režimas;
• 100% prisitaikantis;
• Programavimo patirtis nebūtina;
• „iPhone“, „iPad“ ir kitų jutiklinių įrenginių palaikymas;
• Flickr, Vimeo, YouTube ir daugiau;
• Kelios temos.

Demonstracija | Atsisiųsti

Blueberry – paprastas reaguojantis jQuery vaizdo slankiklis

Pristatau jums „jQuery“ vaizdo slankiklį, sukurtą specialiai reaguojančiam interneto dizainui. „Blueberry“ yra eksperimentinis atvirojo kodo vaizdo slankiklio papildinys šaltinio kodas, kuris buvo parašytas specialiai darbui su reaguojančiais šablonais.

Kai naudojami atskirai, CSS3 ir jQuery suteikia platų galimybių spektrą. Bet jei naudojami kartu... Tada jie gali padaryti efektus tikrai įspūdingus. Kartais iškyla problema, kaip geriau ir kūrybiškiau vienoje vietoje išdėstyti kelis vaizdus ar nuotraukas bendra tema. Kaip parinktį galite sukurti slankiklį (ypač todėl, kad jų yra labai daug). Tačiau šioje pamokoje mes sukursime interaktyvią 3D galeriją naudodami CSS3 ir jQuery. Norėdami greitai tai išsiaiškinti ir pritaikyti slankiklį savo svetainėje, rekomenduoju atsisiųsti demonstracinę versiją (ji taip pat yra visose naujienose) ir tiesiog tai padaryti pagal analogiją pavyzdyje.

Realų pavyzdį galite pamatyti čia:

Atsisiųsti

HTML dalis – įdomus jQuery slankiklis

Konteineris su klase pagrindinis bus naudojami rodyti fone. Tada bloko viduje su identifikatoriumi immersive_slider galite pridėti tiek skaidrių, kiek jums reikia. Mygtukai, skirti judėti skaidrėmis, gali būti pašalinti, jei jums jų nereikia:

jQuery dalis

Kaip galbūt pastebėjote žiūrėdami slankiklio pavyzdį, yra įvairių . Visi šių perėjimų nustatymai pateikti aukščiau esančioje funkcijoje. Pažvelkime į šiuos nustatymus:

• animacija— reikšmė, kuri nustato, kaip skaidrės keisis. Priima reikšmes „fade“, „slide“ arba „bounce“. O norint vertikaliai pakeisti skaidres, reikia įvesti „slideUp“ arba „bounceUp“.
• skaidrių parinkiklis— parinkiklis blokams su skaidrėmis pasirinkti.
• konteineris— ši savybė apibrėžia pagrindinį konteinerį, kurio fonas pasikeis.
• cssBlur Tai bandomoji funkcija. Jei nenorite nustatyti suliejimo, nenustatykite šios savybės.
• puslapiais— įjungia navigaciją.
• automatinis paleidimas— automatinė skaidrių demonstravimo pradžia.