Daugelis žmonių savo svetainėje nori matyti slankiklius – tai blokai, kurie ekrane rodo vieną turinio elementą ir po tam tikro laiko pakeičia šį turinį į kitą. Natūralu, kad kiekvienas žiniatinklio kūrėjas gali savarankiškai sukurti slankiklį naudodamas HTML, CSS ir JavaScript, tačiau tai ne visada prasminga. Jūs praleisite gana daug laiko, nepaisant to, kad internete yra nemažai paruoštų sprendimų, kurie gerokai palengvina jūsų gyvenimą ir padaro jūsų svetainę daug patrauklesnę. Šiame straipsnyje daugiausia dėmesio bus skiriama vienam iš šių sprendimų, vadinamų Pelėdų karusele. Šio slankiklio nustatymas yra neįtikėtinai paprastas, todėl net pradedantysis gali tai padaryti. Dabar sužinosite, kas yra šis slankiklis, ir sužinosite kitą svarbią informaciją. Pelėdų karuselės nustatymas yra žingsnis po žingsnio, todėl turėtumėte perskaityti šią medžiagą tik eilės tvarka.
Kas tai yra ir kodėl verta rinktis būtent šį slankiklį?
Pelėdų karuselė, kurios konfigūracija bus aptarta šiame straipsnyje, yra labai efektyvus įskiepis, kuris prideda jūsų puslapį gražiu ir patogiu slankikliu, kuris labai palengvins jūsų darbą svetainėje,sutaupo daug laiko, pastangų ir pinigų. Kokie yra šio konkretaus papildinio pranašumai, nes internete yra gana daug slankiklių? Faktas yra tas, kad šis slankiklis siūlo daugybę tinkinimo parinkčių, kurios leis jums padaryti puslapį unikalų ir nepakartojamą. Tai reaguojantis įskiepis, kuris veiks visose naršyklės versijose ir gali būti lengvai prijungtas prie „WordPress“ir kitų populiarių TVS. Apskritai šis slankiklis turi daug privalumų, todėl tikrai turėtumėte pasirinkti jo naudai. Tačiau prieš pradedant nustatyti pelėdų karuselę, šį papildinį vis tiek reikia įkelti.
Atsisiųsti
Nustatyti Owl Carousel 2 neįmanoma, jei neatsisiuntėte jos į savo kompiuterį, o kadangi tai yra nuosekli instrukcija, turėtumėte pradėti nuo pat pradžių. Taigi, programą galima atsisiųsti naudojant paketų tvarkykles, tačiau tai yra pažangūs kūrėjo įrankiai, todėl čia mes jums pasakysime, kaip standartiniu būdu gauti šį papildinį. Turite eiti į oficialią papildinio svetainę ir atsisiųsti naujausią jo versiją. Po to visi atsisiųsti failai turi būti perkelti į jūsų svetainės katalogą, paruošus patogų aplanką, kuris pavadintas taip pat, kaip ir pats papildinys. Atminkite, kad šis papildinys yra susietas su „jQuery“, todėl turite turėti ir tą biblioteką. Atsisiuntę šį papildinį turėsite atlikti kitą veiksmą, ty nustatyti pelėdos karuselės slankiklį 2.
CSS
BOwl Carousel 1.3 nustatymai išlieka beveik tokie patys kaip ir naujesnėje 2 versijoje, tik pridedamos naujos funkcijos. Tačiau pagrindinė informacija bus ta pati, pradedant nuo CSS pridėjimo prie dokumento. Taigi pirmas žingsnis yra pridėti eilutę. Ką ji tau duoda? Tai eilutė, kuri įkelia reikiamus stilius į svetainę, kad būtų rodomas slankiklis. Čia galite baigti patys atlikdami vizualinį apdorojimą. Tačiau yra patogesnis ir greitesnis sprendimas. Taip pat galite pridėti eilutę, kuri taip pat įkelia numatytąją slankiklio temą, todėl ji iškart bus paruošta naudoti. Galite redaguoti kai kuriuos stilius, kad slankiklis taptų unikalesnis ir kitoks bei labiau tiktų jūsų turiniui. Natūralu, kad Pelėdų karuselės nustatymai rusų kalba būtų labai patogūs, tačiau kiekvienas kuriantis svetaines turėtų suprasti, kad be anglų kalbos žinių jis neapsieina.
JavaSpript ryšys
Žinoma, slankiklis neveiks be JS, todėl taip pat turėtumėte pasirūpinti, kad įtrauktumėte atitinkamą failą su reikiamu kodu. Norėdami tai padaryti, turite įterpti kodo eilutę iš dokumentacijos, tačiau turi būti įvykdyta viena sąlyga. Visi žino, kad JS yra programavimo kalba, kuri vykdo visas komandas iš eilės, todėl šiuo atveju turėtumėte pridėti šią kodo eilutę po eilutės, kuri prideda jQuery biblioteką prie jūsų dokumento. Daugiau su JS šio slankiklio atveju jūs neturite ką veiktireikia.
HTML kodavimas
Na, prijungėte slankiklį, dabar laikas jį sukurti ir pritaikyti. Visų pirma, turite parašyti HTML kodą, kad slankiklis apskritai būtų rodomas jūsų puslapyje. Norėdami tai padaryti, turite sukurti konteinerį, kuriame bus skaidrės. Tai galima padaryti naudojant div žymą, kuriai reikia priskirti pelėdos-karuselės klasę. Būtent ši klasė užtikrina, kad visi su slankikliu susiję stiliai bus aktyvuoti. Taip pat galite parašyti kitą klasę - pelėdos temą. Tai bus naudinga, jei nuspręsite naudoti numatytąjį dizainą arba naudoti standartinę slankiklio versiją kaip pagrindą tolesniam darbui.
Tada kiekvieną skaidrę turite įtraukti į atskirą konteinerį su div žyma. Žinoma, galite naudoti kitas žymas, bet ši žyma geriausiai tinka slankikliui.
Skambinimo papildinys
Ir paskutinis dalykas, kurį turite padaryti, kad svetainėje būtų paruoštas slankiklis, yra naudoti šį kodo bloką:
$(dokumentas).ready(function(){
$(".pelėda-karuselė").owlCarousel();
});
Tai užtikrina, kad slankiklis pradėtų veikti, t. y. slinktų per turinį, kai įkeliamas puslapis. Naudodami tą patį kodą galite prijungti pelėdų karuselę prie „WordPress“. Šio papildinio nustatymų yra daug ir jie yra įvairūs, o dabar sužinosite apie svarbiausius dalykus.
Slankiklio išvaizdos ir funkcionalumo nustatymas
Taigi, kokias komandas galite naudoti norėdami tinkinti slankiklį? Visų pirma, turite atsiminti komandą items, nes su ja galite nustatyti konkretų skaidrių skaičių savo slankikliu. „Cilp“komanda leis pasirinkti, ar slankiklį pakeisti kilpa, ar sustabdyti slinkimą ties paskutiniu elementu. Taip pat yra komanda Drag, kuri turi keletą parinkčių, pvz., pelės ir lietimo. Pirmuoju atveju galite padaryti taip, kad jūsų slankiklio elementus būtų galima perbraukti laikant nuspaustą pelę, o antruoju atveju – lietimo pagalba (ši komanda tinka mobiliesiems įrenginiams). Kita svarbi komanda yra nav, kuri leidžia rodyti naršymo rodykles. Kartu su ja galite naudoti komandą navText, kad pridėtumėte etiketes prie naršymo mygtukų. Taip pat neturėtumėte pamiršti apie automatinio paleidimo komandą, kuri leidžia įjungti ir išjungti automatinį slankiklio skaidrės pasukimą, kai puslapis įkeliamas. Naudodami šią komandą taip pat galite naudoti automatinio paleidimo trukmę, kuriai galite nustatyti konkrečią reikšmę milisekundėmis, kuri nustatys laiką tarp automatinio kiekvienos skaidrės pasukimo.
Jei naudojate interaktyvų žiniatinklio dizainą, tai yra, jūsų puslapio dizainas automatiškai keičiasi priklausomai nuo to, kuriame įrenginyje jis peržiūrimas, tuomet būtinai turite atsiminti responsive komandą, kuri leidžia nustatyti skaidrių skaičių rodyti priklausomai nuo ekrano pločio, kuriame peržiūrimas puslapis.
