Shumë njerëz në faqen e tyre duan të shohin rrëshqitës - këto janë blloqe që shfaqin një element të përmbajtjes në ekran dhe pas një periudhe të caktuar kohe e ndryshojnë këtë përmbajtje në një tjetër. Natyrisht, çdo zhvillues i uebit është në gjendje të krijojë në mënyrë të pavarur një rrëshqitës duke përdorur HTML, CSS dhe JavaScript, por kjo nuk ka gjithmonë kuptim. Do të shpenzoni mjaft kohë, pavarësisht se ka mjaft zgjidhje të gatshme në internet që jua bëjnë jetën shumë më të lehtë dhe e bëjnë faqen tuaj shumë më tërheqëse. Ky artikull do të fokusohet në një nga këto zgjidhje të quajtur Owl Carousel. Vendosja e këtij rrëshqitësi është tepër e thjeshtë, kështu që edhe një fillestar mund ta trajtojë atë. Tani do të mësoni se çfarë është ky rrëshqitës, si dhe detaje të tjera të rëndësishme. Vendosja e Owl Carousel është një proces hap pas hapi, kështu që ju duhet ta studioni këtë material vetëm sipas renditjes.
Çfarë është dhe pse duhet të zgjidhni këtë rrëshqitës të veçantë?
Owl Carousel, konfigurimi i të cilit do të diskutohet në këtë artikull, është një shtojcë shumë efektive që shton një rrëshqitës të bukur dhe të përshtatshëm në faqen tuaj, i cili do ta lehtësojë shumë punën tuaj në sit,duke kursyer shumë kohë, përpjekje dhe para. Cilat janë avantazhet e kësaj shtojce të veçantë, sepse ka mjaft rrëshqitës në Ueb? Fakti është se ky rrëshqitës ju ofron dhjetëra opsione personalizimi, të cilat do t'ju lejojnë ta bëni faqen tuaj unike dhe të paimitueshme. Është një shtojcë e përgjegjshme që do të funksionojë në të gjitha versionet e shfletuesit dhe mund të lidhet lehtësisht me WordPress dhe CMS të tjera të njohura. Në përgjithësi, ky rrëshqitës ka shumë përparësi, kështu që ju duhet patjetër të bëni një zgjedhje në favor të tij. Megjithatë, përpara se të filloni të konfiguroni Owl Carousel, kjo shtesë duhet ende të ngarkohet.
Shkarko
Konfigurimi i Owl Carousel 2 nuk është i mundur nëse nuk e keni shkarkuar atë në kompjuterin tuaj dhe duke qenë se ky është një udhëzim hap pas hapi, duhet të filloni që në fillim. Pra, programi mund të shkarkohet duke përdorur menaxherët e paketave, por këto janë mjete të avancuara zhvilluesish, kështu që këtu do t'ju tregojmë se si ta merrni këtë shtojcë në mënyrën standarde. Duhet të shkoni në faqen zyrtare të shtojcës dhe të shkarkoni versionin e tij më të fundit. Pas kësaj, të gjithë skedarët e shkarkuar duhet të transferohen në drejtorinë e faqes tuaj, pasi të keni përgatitur një dosje të përshtatshme, e cila quhet njësoj si vetë shtojca. Vini re se kjo shtojcë është e bashkuar me jQuery, kështu që ju duhet ta keni të disponueshme edhe atë bibliotekë. Epo, pasi të keni shkarkuar këtë shtesë, do t'ju duhet të kujdeseni për hapin tjetër që është konfigurimi i rrëshqitësit Owl Carousel 2.
CSS
BCilësimet e Owl Carousel 1.3 mbeten pothuajse të njëjta si në versionin më të ri 2, shtohen vetëm veçori të reja. Sidoqoftë, informacioni bazë do të jetë i njëjtë, duke filluar me shtimin e CSS në dokumentin tuaj. Pra, hapi i parë është të shtoni rreshtin. Çfarë ju jep ajo? Ky është një varg që ngarkon stilet e nevojshme në sajt për të shfaqur rrëshqitësin. Këtu mund të përfundoni duke bërë vetë përpunimin vizual. Sidoqoftë, ekziston një zgjidhje më e përshtatshme dhe më e shpejtë. Mund të shtoni gjithashtu një rresht që ngarkon gjithashtu temën e paracaktuar të rrëshqitësit, duke e bërë atë menjëherë gati për t'u përdorur. Ju mund të modifikoni disa nga stilet për ta bërë rrëshqitësin tuaj më unik dhe më të ndryshëm dhe më të përshtatshëm për përmbajtjen tuaj. Natyrisht, cilësimet e Owl Carousel në Rusisht do të ishin shumë të përshtatshme, por çdo person që krijon faqe interneti duhet të kuptojë se nuk mund të bëjë pa njohuri të gjuhës angleze.
Lidhja JavaSpript
Sigurisht, rrëshqitësi nuk do të funksionojë pa JS, kështu që duhet të kujdeseni gjithashtu që të përfshini skedarin e duhur që përmban kodin e nevojshëm. Për ta bërë këtë, duhet të futni një rresht kodi nga dokumentacioni, megjithatë, duhet të plotësohet një kusht. Të gjithë e dinë që JS është një gjuhë programimi që ekzekuton të gjitha komandat me radhë, kështu që në këtë rast duhet të shtoni këtë rresht kodi pas rreshtit që shton bibliotekën jQuery në dokumentin tuaj. Më shumë me JS në rastin e këtij rrëshqitësi, nuk keni çfarë të bëniduhet.
kodim HTML
Epo, e keni lidhur rrëshqitësin, tani është koha ta dizajnoni dhe personalizoni atë. Para së gjithash, duhet të shkruani kodin HTML që rrëshqitësi të shfaqet fare në faqen tuaj. Për ta bërë këtë, ju duhet të krijoni një enë që do të përmbajë rrëshqitjet. Kjo mund të bëhet duke përdorur etiketën div, të cilës duhet t'i caktohet klasa owl-carousel. Është kjo klasë që siguron që të gjitha stilet që lidhen me rrëshqitësin do të aktivizohen. Ju gjithashtu mund të shkruani një klasë tjetër - temë-buf. Do të jetë e dobishme nëse vendosni të përdorni modelin e paracaktuar ose të merrni versionin standard të rrëshqitësit si bazë për punë të mëtejshme.
Më pas ju duhet të shtoni çdo rrëshqitje në një enë të veçantë me një etiketë div. Sigurisht, mund të përdorni etiketa të tjera, por kjo etiketë është më e mira për rrëshqitës.
Call plugin
Dhe gjëja e fundit që duhet të bëni për të pasur një rrëshqitës të gatshëm në faqen tuaj është të përdorni këtë bllok kodi:
$(dokument).ready(funksion(){
$(".owl-carousel").owlCarousel();
});
Siguron që rrëshqitësi të fillojë të funksionojë, d.m.th., lëviz nëpër përmbajtje, kur faqja juaj të ngarkohet. Me të njëjtin kod, ju mund të lidhni Owl Carousel me WordPress. Cilësimet e kësaj shtojce janë të shumta dhe të ndryshme, dhe tani do të mësoni për pikat më kyçe.
Vendosja e pamjes dhe funksionalitetit të rrëshqitësit
Pra, cilat komanda mund të përdorni për të personalizuar rrëshqitësin tuaj? Para së gjithash, duhet të mbani mend komandën e artikujve, sepse me të mund të vendosni një numër specifik rrëshqitjesh në rrëshqitësin tuaj. Komanda loop do t'ju lejojë të zgjidhni nëse do të lidhni rrëshqitësin në qark ose do të ndaloni lëvizjen në elementin e fundit. Ekziston edhe komanda Drag, e cila ka disa opsione, si mouse dhe touch. Në rastin e parë, mund ta bëni atë në mënyrë që elementët e rrëshqitësit tuaj të mund të rrëshqiten me miun të mbajtur poshtë, dhe në rastin e dytë, me ndihmën e një prekjeje (kjo komandë është e përshtatshme për pajisjet celulare). Një komandë tjetër e rëndësishme është nav, e cila mundëson shfaqjen e shigjetave të lundrimit. Së bashku me të, ju mund të përdorni komandën navText për të shtuar etiketa në butonat e lundrimit. Gjithashtu, nuk duhet të harroni komandën e luajtjes automatike, e cila ju lejon të aktivizoni dhe çaktivizoni fillimin automatik të kthimit të rrëshqitësve të rrëshqitësit tuaj kur faqja ngarkohet. Me këtë komandë, mund të përdorni edhe autoplayTimeout, për të cilën mund të vendosni një vlerë specifike në milisekonda, e cila do të përcaktojë kohën ndërmjet rrotullimit automatik të secilit prej sllajdeve.
Nëse përdorni dizajn të përgjegjshëm të uebit, domethënë dizajni i faqes tuaj ndryshon automatikisht në varësi të pajisjes në të cilën shihet, atëherë patjetër duhet të mbani mend komandën responsive, e cila ju lejon të vendosni numrin e rrëshqitjeve për t'u shfaqur në varësi të gjerësisë së ekranit ku faqja po shikohet.
