Žvilgsnis į slidaus slankiklio įdiegimą po jQuery biblioteka. Šis įskiepis užima vieną aukščiausių vietų skaidrių demonstracijų kūrimo įskiepių reitinge.

Vienareikšmiškai, pelnytai užėmę šią vietą, turėtumėte susisiekti su juo ir įdėti jį į savo interneto įrašymo įrenginio lobyną. Įskiepio pagrindinį puslapį su diegimo aprašymu ir įvairiomis robotų programomis galite rasti čia - slidus Demo. Įskiepis turi ne viską – jis turi visas valdymo funkcijas savo sandėlyje, yra lengvas ir lengvai montuojamas, jo kūrimo HTML išdėstymas paprastas ir semantiškas. Švelnus papildinys pateikiamas su nauju nustatymų rinkiniu, kurį galima lengvai prijungti prie konfigūracijos failo.

Slaidaus papildinio prijungimas

Sklandaus papildinio prijungimo prie darbo projekto procesas yra labai paprastas, tereikia įsitikinti, kad nustatymai yra teisingi.

Ženklų kūrimas po slidėmis

Sklandaus papildinio HTML išdėstymas yra semantinis ir paprastas. Pakanka sukurti tinkamų klasių pavadinimų sąrašą. Darbo pradžios vartotojas oficialiame sklandaus papildinio puslapyje rodo šį HTML žymėjimą:

Mano bandymas sukurti slankiklį, pagrįstą HTML išdėstymu pagrindinio sąrašo su ženkleliais forma:

• 
• 
• 
• 

... neatnešė sėkmės – aptakus įskiepis neuždirbtas! Galbūt galite pakeisti elementus naudodami CSS stilius

1

ul

,

1

li

Ar viskas vis dar veikia blokui? Tačiau yra papildomų veiksmų, be kurių galite apsieiti ir atlikti, kaip aprašyta oficialiuose dokumentuose. Redaguojamas aptakus papildinio failas

Kitame žingsnyje mes nuskaitysime aptakaus papildinio archyvą. Galite užsidirbti pinigų įvairiais būdais. Pirmasis yra suvilioti jus iš šio puslapio Go Get It. Arba eikite į autoriaus „GitHub“ puslapį ir gaukite įskiepio archyvą – aptakų „GitHub“. Abiem atvejais archyvai su pavadinimais pašalinami

Prie HTML dokumento galima prijungti paruoštus slidaus įskiepio CSS stilius:

HTML dokumento turinys prieš uždaromą žymą

1

Įterpiame tris eilutes su js scenarijais:

Tiesą sakant, pirmose dviejose eilutėse jQuery-1.11.0 biblioteka ir jQuery Migrate 1.2.1 papildinys atsisiunčiami per CDN. Trečias įskiepis

Įtraukiame įskiepio inicijavimo scenarijų: $(document). paruošta (funkcija ()( $ (.slankiklis") . slyk (( taškai : tiesa )); ));

Podsumkovo HTML išdėstymas ir CSS lentelių bei JS scenarijų sujungimas atrodys taip:

• 
• 
• 
• 
• 

Norėčiau sužinoti apie tokį turtingą dalyką kaip „Google Chrome“ naršyklės konsolė. Kodėl yra korisna? Nes man irgi staiga pasiteisina (pirmiausia buvo su jqFancyTransitions įskiepiu - jqFancyTransitions Slider) ir padeda išsiaiškinti klaidas jungiant scenarijus prie HTML dokumento. Nepakeičiamas dalykas!

Norėdamas iliustruoti naršyklės naudojimą ir „Chrome“ konsolės funkcijas, anksčiau sukurtoje naršyklėje paleidžiu failą index.html.

Ir ką?! Atsiprašau, o čia yra slidus įskiepis - slankiklis, kūryba, skirta jums padėti? Koks jų grožis, kuris taip aiškiai pademonstruotas oficialioje projekto svetainėje – Demos?! Tai nuostabu – bet tokių nėra!

Heh, ar teisingai prisijungiau, kad prijungčiau scenarijų? Na, dar kartą peržvelgsiu dokumentaciją... Viskas teisingai, bet man netinka... Gal dar kartą perrašyti rodyklės puslapį? Tai įmanoma, bet gali būti labai daug tokių „o gal“, su įvairiais variantais.

Atidarykime „Google Chrome“ naršyklės konsolę ir eikime į skirtuką „Tinklas“:

Tai yra pagrindinė priežastis, kodėl mano puslapyje neveikia slidus įskiepis! Tiesiog „jQuery 1.11.0“ bibliotekos ir „jQuery Migrate 1.2.1“ papildinio „Chrome“ naršyklė negalėjo atsisiųsti per CDN. Kiek valandų ir nervų būčiau sugaišęs, norėdamas „moksliniu metodu“ nustatyti „gedimo“ priežastį, jei ne pačią konsolę, nežinoma.

Negaliu sulaukti minutės, kol išsiaiškinsiu, kodėl naršyklė negalėjo atsisiųsti failų per CDN. Taigi aš tiesiog atsisiųsiu failus „rankiniu būdu“ ir prijungsiu juos vietoje:

Vėl pradedu rodyklės puslapį index.html Google Chrome naršyklėje ir... apie stebuklą! Sklandus įskiepis atlieka:

Paveikslėliai slenka automatiškai, o apačioje galite matyti sklandaus scenarijaus sugeneruotą puslapių rūšiavimą, žinoma, prieš koreguojant:

taškai: tiesa, automatinis paleidimas: tiesa

... konfigūracijos faile. Be to, buvo sugeneruotos rodyklės, skirtos atsukti vaizdą „rankiniu būdu“ pirmyn ir atgal (ji nematoma baltame HTML puslapio fone). Kitus slidaus įskiepio nustatymus galite peržiūrėti oficialiame puslapyje - Nustatymai.

PASTABA: labai rekomenduoju inicijavimo scenarijų įdėti į išorinį JS failą.

Šio straipsnio nerašiau dėl vienos paprastos priežasties – dėl užpakalio tikslumo ir jo kūrimo sklandumo.

Slaidaus papildinio redagavimas

Dabar šiek tiek pasimečiau dešinėje – sukūręs puslapio elementų inspektorių (pavyzdžiui, Firebug), iš mūsų puslapio DOM medžio „ištraukiau“ mums reikalingų elementų klasių pavadinimus ir galiu juos lengvai redaguoti. CSS taisyklės:

korpusas (fono spalva: pašviesinti (#ccc, 5%); .slider (plotis: 300px; paraštė: 10px automatinis; užpildymas: 5px; fono spalva: #ccc; kraštinė: 3px solid #000; @include borde (3px) ); .slick-dots(apačioje: -30px; ) ) )

Kuriu HTML dokumento turiniui

Pridėsiu paminkštinimus, kordoną suapvalintais kraštais ir fono užpildą; Centruosiu jį šone ir šiek tiek nuleisiu. Ir taip pat šiek tiek į kalną

1	.taškeliai

su puslapiais.

Rezultatas nuostabus:

Visnovok

Papildinys slick me buvo tikrai sėkmingas. Tai lengva įdiegti ir prijungti, generuoti elementus rodant skaidrių demonstraciją ir turėti daugybę skirtingų nustatymų. Norėdami rasti įvairių naujos išvaizdos tinkinimo parinkčių, galite ir turėsite eiti į programos puslapį – Demonstracinės versijos. Ir prisitaikyti prie reikalingų konkrečių protų, kaip reikia.

Atsisveikink su kodavimu!

Sveiki, noriu papasakoti apie svetainės slankiklį, kuris pasirodė esąs lengvas, universalus ir lengvai montuojamas. Čia galite įgyvendinti viską, kas susiję su slankikliais ir karuselėmis. Kaip teigia papildinio kūrėjas, „paskutinė karuselė, kurios jums kada nors prireiks“, kuri gali būti interpretuojama kaip viena universali karuselė, tinkanti bet kokiai jūsų idėjai. Ir tai tiesa. Joje yra daug, nuo pagrindinio slankiklio iki prisitaikančios karuselės su skaidrėmis iki kelių eilučių.

Papildiniu gali saugiai naudotis tiek pradedantieji, tiek pažengę žiniatinklio skaitytojai. Tai labai stiprus konkurentas viskam, ką žinome. Iš dėžutės galime išsinešti net ir gausiai atliekantį įrankį.

Norėdami įdiegti slankiklį/karuselę savo svetainėje, tereikia atlikti 3 paprastus veiksmus.

Sklandaus slankiklio diegimasPrograma Nr. 1 (slankiklis)

1. Krok – scenarijaus ir papildinio stilių sujungimas.

html puslapiai.

$(dokumentas).ready(function())( $(".jūsų klasė").slick(); ));

Turite prisijungti tarp savo html puslapio žymų, o ne po kodo, kurį įterpėte darbui Nr. 1

Šiame pavyzdyje parodėme, kaip įdiegti slidų slankiklį, pavyzdžiui, karuselę su viena pagrindine skaidre.

Žemiau galite stebėtis aukščiau aprašytųjų priekiniu užpakaliu.

Užpakalis Nr. 2 (karuselė)

Norėdami sumontuoti karuselę, turite atlikti visus tuos pačius veiksmus, kaip ir ankstesniame aprašyme, išskyrus tai, kad punktas Nr. 2 ir punktas Nr. 3 yra šiek tiek keičiamas.

2. Croc – paties slankiklio HTML kodo įterpimas.

Jei norite rodyti patį slankiklį, šį kodą reikia įterpti tarp žymų.

3. Croc – slankiklio inicijavimas.

$(document).ready(function())( $(.your-class").slick(( begalinis: true, slidesToShow: 3, slidesToScroll: 3 )); ));

Ir šioje programoje kaip karuselę (su 3 pagrindinėmis skaidrėmis) pakeitėme slankųjį slankiklį ir kai kuriuos papildinio parametrus.

Šios karuselės darbu galite pasigrožėti toliau pateiktame pavyzdyje.

Kai iš viso gausite 3 gabalus, galėsite pasirinkti karuselę arba slankiklį pagal savo poreikius. Šiam slankikliui yra daug daugiau galimybių. Jei turite kokių nors sunkumų ar problemų dėl mitybos, klauskite jų komentaruose ir aš pasistengsiu greitai į juos atsakyti.

Slankiklio scenarijų gavome iš praėjusios savaitės komandos

$ bower i slick.js

Taip pat galite tai sužinoti „Google“ – pirmiausia paklauskite „slick“ http://kenwheeler.github.io/slick/

Slankiklio privalumai: palaiko lietimo įvykius, juos galite žiūrėti savo telefone pirštu
- palaiko reagavimą - galite nustatyti skaidrių skaičių pagal ekrano dydį: dideliuose ekranuose galite peržiūrėti 4 skaidres, vidutiniuose 2-3, telefonuose po vieną

Gera praktika įtraukti scenarijus iš aplanko bower_components



Be to, atnaujinant scenarijų Bower programa, nereikės kode perrašyti versijos numerio, todėl Bower suteikia scenarijus nuolatinius pavadinimus, kurie atnaujinus nepasikeis.

Kokie stiliai randami slick aplanke: slick.css, slick.less, slick.theme.less, geriau juos nukopijuoti į aplanką su css ir įtraukti. Jei atimsite jiems vietą ir pakeisite slankiklio stilių, atnaujinus scenarijų visi pakeitimai bus prarasti.

Skirtingai nuo kitų slankmačių, rėmeliai dedami ne į sąrašą, o į blokus:

1 2 3 4 5 6

Spustelėjimas be parametrų Spustelėjus įskiepį be parametrų, galima pasirinkti paprastą parinktį su viena slenksčiu šone ir naršymo rodyklėmis.

$(".vieno elemento"). slidus ();

Kelių skaidrių rodymas Programoje nustatėme slinkimo kilpinio slinkimo parametrus „slankus slankiklis“, įjungėme naršymo taškų rodymą ir nurodėme rodomų ir slenkamų skaidrių skaičių.
$(".keli elementai"). slidus ((
begalinis: tiesa,
// apjuoskite slankiklį - po likusios skaidrės pirmoji eina taškais: tiesa,
// taškus po slankikliu, kad būtų rodoma aktyvi skaidrė
skaidrių demonstravimas: 3,
//skaidrių, kurios bus rodomos ekrane, skaičius slidesToScroll : 1
//kiek skaidrių įrašoma vienu metu
)); Centravimo režimas Centravimo režimu aktyvioji skaidrė dedama centre.
$(".centras"). slidus ((
centro režimas: tiesa,
skaidrių demonstravimas: 3,
});
Centrinė čiuožykla turi "slick-center" klasę, o tai reiškia, kad ji gali būti suprojektuota skirtingai. Pritaikymas Slankikliu galite tinkinti skaidrių skaičiaus adaptyvų dizainą, priklausomai nuo ekrano pločio. Pavyzdžiui, kai ekrano plotis mažesnis nei 600 pikselių, reikia rodyti tik 2 skaidres ir jas maišyti po vieną. Šie rūmai atrodys taip

$(".uncycle" ) . slick(( begalinis: false , greitis: 350 , // nurodo perdegusių skaidrių sklandumą: 4 , // skaidrių, kurios turi būti rodomos slidesToScroll, skaičius: 2 , // kiek skaidrių išdegs vienu metu reaguoja: [ ( lūžio taškas: 600 , // nurodo, kuris ekrano plotis, reikia įjungti reguliavimo nustatymus: (slidesToShow: 2, slidesToScroll: 1, infinite: true,))))));

Sklandus perjungimas Standartinėje slankiklio sąrankoje staigiai keičiasi skaidrės. Be to, „Slick“ funkcija užtikrina sklandų skaidrės keitimo režimą. Norėdami tai padaryti, turite pereiti prie atributo data-lazy, kuriame parašytas kelias į vaizdą. Atributą reikia pritvirtinti ne prie paties paveikslėlio, o prie pačios vaizdo žymos. Taip siekiama, kad js kodas būtų unikalus. Alternatyva būtų komanda

LazyLoad: „ondemand“

Parašykite pėdsakų atributą taip

< img data- lazy = " images/slaid.jpg" >

Tokio slankiklio ypatumas slypi tame, kad ekrane yra tik viena skaidrė, kurią perjungus juda žingsnis po žingsnio. Poveikis pagrįstas sklandaus matomumo didinimo principu. Tada pasirenkamas pirmasis valandos segmentas, kurio metu pirmosios skaidrės matomumas pasikeičia nuo 0% iki 100%, per kurį tampa matoma kita skaidrė. Tokio slankiklio scenarijus atrodo taip

$(.fade" ) . slick(( begalinis: tiesa , greitis: 400 , fade: true , cssEase: "linijinis" ) ) ;

„Slick“ yra universaliausias ir paprasčiausias šiandien prieinamas slankiklis. Platus slankiklio reguliavimo pasirinkimas yra palankus sprendimas slankiklių įgyvendinimui, o tai, žinoma, yra svarbiausias šio slankiklio privalumas. Slankaus slankiklio reguliavimas

• Prieinamumas – pradinė šio parametro reikšmė nustatyta į „true“, nurodant slankiklio naršymo mygtukų – rodyklių pirmyn ir atgal – ryšį ir mygtukus nukreipiant tašku.
• adaptiveHeight – apsiriboja tik vienu slankikliu, kuriame pradinio konteinerio aukštis keičiasi priklausomai nuo slankiklio aukščio. Burbuolės protai neturi jokio ryšio.
• automatinis paleidimas – reguliuoja skaidrių atkūrimą automatiniu režimu be mokytojo pagalbos. Standartinė šio parametro reikšmė yra klaidinga.
• autoplaySpeed ​​​​– šis parametras papildo automatinį paleidimą ir nustato laiką, iki kurio skaidrė bus paleista automatiškai. Pradinė to vertė yra 3000 milisekundžių.
• rodyklės – sujungia rodykles pirmyn ir atgal prie slankiklio. Naudodami papildomą išorinių stilių lentelę galite pakeisti šių rodyklių padėtį ir išvaizdą.
• asNavFor – įterpia naršymo nuorodą tarp dviejų slankiklių, naudojant papildomą identifikatorių ir klasę. Kukurūzų lukštuose parametras turi nulinę reikšmę.
• prevArrow – leidžia pakeisti standartinės naršymo rodyklės, kylančios į viršų priekinėje skaidrėje, išvaizdą.
• nextArrow – panaši į ankstesnio parametro funkciją, bet veikia kaip rodyklė, perkelianti skaidrę į priekį.
• centreMode – nustato dabartinę skaidrę kaip Tėvo konteinerio centrą, pradedant įtraukimo parametru.
• centrePadding – kai srauto slankiklis rodomas centriniu režimu (priekinis parametras), jis nustato vidinį to skaidrės užpildymą, kuris vizualiai leidžia padidinti srauto skaidrę.
• cssEase – suteikia animaciją, skirtą paveikslėlių maišymui, kuris gali būti sklandus arba staigus. Iškelia standartinę reikšmę „lengvumas“.
• customPaging – leidžia į slankiklio rodinį įterpti pasirinktinį šabloną.
• taškai – sujungia trumpiklius ir lieka plovimo stotyje.
• velkamas – suteikia galimybę vilkti čiuožykles suspaudžiant meškiuką. Tada, jei perkelsite pelės žymeklį ant slankiklio, suspausite jį ir perkelsite, skaidrė persijungs į tolesnę.
• fade – sukuria skaidrės blukimo efektą maišant, animacinį efektą.
• focusOnSelect – sufokusuoja užduotis ties slankiklio elementu.
• palengvinimas – leidžia nustatyti specialų animacijos režimą, kai vaizdai perjungiami.
• edgeFriction – vibruoja skaidres maišant ant likusio elemento. Tai ypač aktualu, nes slankiklis nesisuka.
• begalinis – demonstruoja skaidrių demonstraciją. Tai reiškia, kad kai remiksuosite likusias skaidrių demonstravimo nuotraukas, jos pradės pasirodyti.
• inicialinė skaidrė – nurodo vaizdą, nuo kurio prasidės skaidrių demonstravimas. Po to paleidimo slankiklis pasirenka pirmąjį vaizdą.
• lazyLoad – leidžia nustatyti kitų skaidrių įkėlimo režimą. Tinkinti galima tik 2 vertes: „ondemand“ ir „progressive“, o likusios vertės skirtos tinkinimui.
• pauseOnHover – pristabdo skaidrių slinkimą, kai pelės žymeklis užves virš slankiklio korpuso. Taip yra todėl, kad nurodytas automatinis skaidrių maišymas.
• pauseOnDotsHover – pristabdo skaidrių slinkimą, kai pelės žymeklis užves virš taškinių trumpiklių. Taip yra todėl, kad nurodytas automatinis skaidrių maišymas.
• responseTo – suaktyvina naršyklės lango pločio keitimo reakciją. Galimos trys reikšmės: "langas", "slankiklis" arba "min".
• responsive – leidžia pritaikyti slankiklio nustatymus prie ekrano pločio. Jis skiriasi nuo ankstesnio reguliavimo tuo, kad pločio ribos priskiriamos tikslioms pikselių reikšmėms. Vikorist pritaikytam išdėstymui mobiliesiems įrenginiams.
• slidesToShow – leidžia nustatyti nuotraukų, kurios turi būti rodomos matomoje srityje, skaičių. Iš pradžių rodoma viena skaidrė, o kitos reikšmės gali būti keičiamos.
• slidesToScroll – informuoja slankiklį, kiek vaizdų reikia pakeisti perjungiant.
• greitis – nustato greitį, dėl kurio skaidrės maišosi.
• variableWidth – pritaiko slankiklio konteinerių plotį prie rodomo odos paveikslėlio pločio.

UPD: Bandžiau sukurti šios pamokos slankiklį ir pasirodė, kad jis nėra labai geras.
Aš pridėsiu daugiau.

1. Peržiūrėkite saugyklą čia https://github.com/kenwheeler/slick
2. Failo index.html prieš atidarytą failą pridėkite slankiklio stilių:

Prieš uždarydami įtraukiame scenarijus

Šiam slankikliui reikės šriftų. Šriftų aplankas iš slankiklio aplanko turi būti įdėtas į projekto css aplanką.
O slankiklio aplanke reikia žinoti mažąjį ajax-loader.gif ir faile slick-theme.css parašyti kelią į naują

3. Dabar slankiklio įvyniokliui priskiriama klasė, pavyzdžiui, kelių elementų
O faile script.js įrašome kodą

$(dokumentas).ready(function())(
$(".multiple-items").slick((
automatinis paleidimas: klaidingas,
automatinio paleidimo greitis: 6000,
rodyklės: tiesa,
begalinis: tiesa,
taškai: tiesa,
Centro režimas: tiesa,
skaidrių demonstravimas: 3,
slidesToScroll: 1
});
});

4. Slankiklis jau veikia. Tik rodyklių ašies nesimato, nes už slankiklio ribų tvyro smarvė, o slankiklio plotis dengia visą ekraną. Rodyklės yra slick-theme.css faile, o įvestis pakeista taip, kad rodyklės būtų slankiklio viduryje, o ne viduryje.

5. Geras. Dabar, mano nuomone, centrinė slankiklio skaidrė yra kalta dėl trikdžių.
parašyk tai, ko užtenka įrašyti į kodą

$(.middle").slick((
Centro režimas: tiesa,
//Centruokite srauto skaidrę
centre Padding: "50px",
// šiek tiek tikslesnė skaidrė
skaidrių demonstravimas: 3
//Peržiūrai matomos 3 skaidrės
});

Norėdami padidinti centrinio slankiklio dydį. Tiesą sakant, šis metodas neveikia
Patobulinta centrinė čiuožykla stilingai
.slick-center(
fono spalva: #8cc63f;
transformuoti: mastelis(1.3);
}

Sveiki visi, o šiandien aš jums pasakoju apie labai šaunų ir paprastą slankiklį - slidinėjimą.

Eikite į svetainę http://kenwheeler.github.io/slick/Čia galite rasti daugybę slidaus slankiojančio roboto programų. Šis slankiklis iš tikrųjų turi daug skirtingų efektų ir taip pat slenka pele. Tobto. Kairiuoju pelės mygtuku galite spustelėti bet kurį slankiklio elementą ir, naudodami pelę, atsukti slankiklį kaire arba dešine ranka. Ši funkcija nėra visiškai naudinga kompiuteriams, bet išmaniesiems telefonams ir planšetiniams kompiuteriams – lygiai taip pat!

Taigi, norėdami jį prijungti, atsisiųskite failus iš šios svetainės. Dabar galime sukurti HTML ir prijungti reikiamus komponentus naudodami jquery, nes... Vikorijos slankiklis turi šią biblioteką savo darbui.

savo turinį
savo turinį
savo turinį

Sujunkite stilius

Įjungiu scenarijus

Norėdami inicijuoti slankiklį, scenarijaus žymoje parašykite:

$(".jūsų klasė").slick((
nustatymo pavadinimas: nustatymo vertė
});
});

Kai baigsite, jūsų html failas atrodys maždaug taip:

Sklandus

savo turinį
savo turinį
savo turinį

$(dokumentas).ready(function())(
$(".jūsų klasė").slick((
nustatymo pavadinimas: nustatymo vertė
});
});

Šis slankiklis turi daugybę nustatymų, kuriuos galite nustatyti patys. Visus juos galite sužinoti toje pačioje svetainėje, esančioje lentelės puslapio apačioje. Nustatykite jų inicijavimo instrukcijas objekte.

$(dokumentas).ready(function())( $(".jūsų klasė").slick(( automatinis paleidimas: tiesa; )); ));

Kieno užpakaliai buvo pasakyta, kad jie gali automatiškai sudeginti skaidres.

Be to, kaip matote, slankiklį labai lengva įdiegti ir konfigūruoti, tačiau jis leidžia sakyti puikias kalbas. Ačiū už pagarbą ir švedui!

slick – visapusiškesnis karuselės funkcionalumo sprendimas, įvairiomis apraiškomis. Galima peržiūrėti/gauti demonstracines versijas, tipines parinktis ir leidinius.

Pateikite savo paraišką

Pagrindinė „slick“ konfigūracija apima daugybę scenarijų, daugybę stilių ir paprastą šriftą. Aš naudoju sutrumpintą versiją:

• slick.min.js (sumažinimas)
• slick.css (+ stilius galima išvalyti)
• slick-theme.css (+ stilius galima išvalyti)

Stiliai, krepšiui gali būti derinami į vieną.
Aš pakeičiau aptakų šriftą didesniu FontAwesome

Pagrindinė karuselė Kartojimo blokas

Pagrindinis karuselės funkcionalumas nustatomas div class="multiple-items". div class="carousel" reikalingas tik karuselės įrašams apibrėžti.

Scenarijaus inicijavimo scenarijus

$(document).ready(function() ( $(.multiple-items").slick(( //infinite: true, //scrolling autoplay: true, slidesToShow: 3, slidesToScroll: 3 )); ) );

Slidus slankiklis (plotis: 100 %; slankusis: kairėn;).slidus slydimas (žymeklis: žymeklis;).keli elementai .slystantis slankiklis (paraštė: 0 15 tšk.;).karuselė (pamušalas: 0 3 %; plūduriavimas: left;width:100%;box-sizing:border-box;) /* woocommerce produktams */ .carousel .woocommerce ul.products li.product (margina: 1em 0 1.992em 0; plotis: 100%;)

Woocommerce produktų karuselė

Atnaujinta versija

Praėjus kelioms minutėms po karuselės produktų rodymo (! Ne universalus sprendimas, skirtingos išdėstymo parinktys gali pasirodyti skirtingai):

Naudojant karuselės scenarijus, atsiranda išdėstymo iškraipymų. Galime sukurti burbuolės stilių, kurie apkarpo karuselę srauto išdėstyme:

Keli elementai (rodymas: lankstus !svarbu; lankstus apvyniojimas: apvyniojimas; paraštė-apačia: 25 piks.;).multiple-items img ( -moz-backface-visibility: matomas; -webkit-backface-visibility: matomas; backface-visibility : matomas; ) .slick-list (paraštė: 0 -1px 0 0 !svarbu; užpildymas: 0 1px 0 0 !svarbu; plotis: 100%;) .slick-track (kraštinė: vientisa #e9eaec; kraštinės plotis: 0 0 0 1px; ekranas: lankstus !svarbu; užpildymas apačioje: .1rem;).karuselė .produktas ( kraštinė: vientisas #e9eaec; kraštinės plotis: 1px 1px 1px 0; fonas: #fff; : nėra, teksto lygiavimas: centras; padėtis: santykinė; paraštė-apačia: -.1rem; aukštis: automatinis; ) .multiple-ites > .product (plotis: 25%;

Maitinimo galinis vaizdas vaizdui, nurodant, nes Jei norite atimti paslėptą tada pervyniodami prieškambario etikečių smarvę.

Karuselės prisitaikymas

Scenarijus gali būti sukonfigūruotas skirtingiems ekrano dydžiams. Šiuo tikslu nustatymuose nurodomi reaguojantys parametrai

Atsakingas: [ ( pertraukos taškas: 1280, nustatymai: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( pertraukos taškas: 1024, nustatymai: ( slidesToShow: 3, slidesToScroll: 3, ) ) ( ( pertraukos taškas: : 2, skaidrių slinkimas: 2 ) ), ( pertraukos taškas: 480, nustatymai: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]

Arba tiesiog įjunkite jį atskirai – nustatymai: „Unslick“

Sklandus slankiklis

Likusį laiką pagrindinį slankiklį kuriu remdamasis slidumu. Tai nėra didelė problema – spustelėjus puslapį, visos skaidrės rodomos kelias sekundes, o tada sulankstomos. Užmaskavau taip:

Viskas, išskyrus vieną skaidrę, yra nematoma:

Slick-track > div:nth-child(2) img (rodymas: blokuoti !svarbu;) #index-slider img (rodyti: nėra;)

O pritraukus puslapį pasigirs dar kažkas:

JQuery(document).ready(function())( jQuery("#index-slider img").css("rodymas", "blokas"); ));

Skaidrių tobulinimas

Slick prideda dar vieną naudingą funkciją – lazyload(). Jums tereikia pridėti lazyLoad: 'ondemand' galią prie scenarijaus. Keičiu vaizdo priekinį planą:

Arba galite pasakyti taip:

">

O kad skaidrės iš karto taptų patrauklios, būtina užrašyti galią lazyLoad: 'progresyvus'

Standartinis vaizdas neveikia visiškai tinkamai, rekomenduoju patikrinti ryšį su lazyload.

Mobilioji slankiklio versija
Iš mobiliojo telefono galite gauti daugiau. versija, slankiklio aukštis, dėl kurio atsiras vaizdo kraštai ir vaizdas bus didesnis:

@medijos ekranas ir (maksimalus įrenginio plotis: 480 pikselių) ( #index-slider, .hotel-photos (aukštis: 200px;).slick-list, .slick-track (aukštis: 100%;) #index-slider img , .hotel-photos img (aukštis: 100%; tinkamas objektui: viršelis;) )

tinkamas objektui: dangtelis; - Galingas CSS 3, palaikomas daugelyje naršyklių

Galerija

Neseniai vienoje iš svetainių galerijoje įgijau pagarbą Slick vikoristanui. Ypatumas yra tas, kad galerijos vaizdai tęsiasi iki ekrano kraštų (mylė nuo svetainės visame ekrane).

Norėdami tai įgyvendinti, ant konteinerio (.s2) turite įdėti slankiklį (#index-slider) ir pridėti šiuos stilius:

S2 (perpildymas: paslėptas; ekranas: blokuoti;) #index-slider (maks. plotis: 1000 pikselių; paraštė: 0 automatinis;) .s2 .slick-list (perpildymas: matomas;) #index-slider .slick-slide img ( maksimalus plotis: 800 piks.; paraštė: 0 automatinis;)

arba dar paprasčiau:

Norėdami sukurti tokią galeriją, tereikia įvesti 2 stilius:

#index-slider (maksimalus plotis: 1280 pikselių; paraštė: 0 automatinis;) #index-slider .slick-list (perpildymas: matomas;)

Nešiojamieji kompiuteriai