Baie mense op hul eie werf wil glyers sien - dit is blokke wat een inhoudelement op die skerm vertoon, en na 'n sekere tydperk hierdie inhoud na 'n ander verander. Natuurlik is elke webontwikkelaar in staat om onafhanklik 'n skuifbalk met HTML, CSS en JavaScript te skep, maar dit maak nie altyd sin nie. Jy sal nogal baie tyd spandeer, ten spyte van die feit dat daar heelwat klaargemaakte oplossings op die internet is wat jou lewe baie makliker maak en jou werf baie aantrekliker maak. Hierdie artikel sal fokus op een van hierdie oplossings genaamd Owl Carousel. Die opstel van hierdie skuifbalk is ongelooflik eenvoudig, so selfs 'n beginner kan dit hanteer. Nou sal jy leer wat hierdie skuifbalk is, sowel as ander belangrike besonderhede. Die opstel van Owl Carousel is 'n stap-vir-stap proses, so jy moet hierdie materiaal slegs in volgorde bestudeer.
Wat is dit en hoekom moet jy hierdie spesifieke skuifbalk kies?
Owl Carousel, waarvan die konfigurasie in hierdie artikel bespreek sal word, is 'n baie effektiewe inprop wat 'n pragtige en gerieflike skuifbalk by jou bladsy voeg, wat jou werk op die webwerf baie sal vergemaklik,bespaar baie tyd, moeite en geld. Wat is die voordele van hierdie spesifieke inprop, want daar is nogal baie glyers op die web? Die feit is dat hierdie skuifbalk jou tientalle aanpassingsopsies bied, wat jou sal toelaat om jou bladsy uniek en onnavolgbaar te maak. Dit is 'n responsiewe inprop wat op alle blaaierweergawes sal werk en maklik aan WordPress en ander gewilde CMS gekoppel kan word. Oor die algemeen het hierdie skuifbalk baie voordele, so jy moet beslis 'n keuse in sy guns maak. Voordat jy egter begin om Owl Carousel op te stel, moet hierdie inprop nog gelaai word.
Laai af
Om Owl Carousel 2 op te stel is nie moontlik as jy dit nie op jou rekenaar afgelaai het nie, en aangesien dit 'n stap-vir-stap instruksie is, moet jy van die begin af begin. Die program kan dus afgelaai word met behulp van pakketbestuurders, maar dit is gevorderde ontwikkelaarnutsgoed, so hier sal ons jou vertel hoe om hierdie inprop op die standaard manier te kry. U moet na die amptelike webwerf van die inprop gaan en die nuutste weergawe daarvan aflaai. Daarna moet alle afgelaaide lêers na die gids van u webwerf oorgedra word, nadat u 'n gerieflike gids voorberei het, wat dieselfde as die inprop self genoem word. Let daarop dat hierdie inprop saam met jQuery gebundel word, so jy moet daardie biblioteek ook beskikbaar hê. Wel, sodra jy hierdie inprop afgelaai het, sal jy moet sorg vir die volgende stap wat die opstel van die Owl Carousel slider 2 is.
CSS
BOwl Carousel 1.3-instellings bly amper dieselfde as in die nuwer weergawe 2, net nuwe kenmerke word bygevoeg. Die basiese inligting sal egter dieselfde wees, begin met die byvoeging van CSS by jou dokument. Die eerste stap is dus om die lyn by te voeg. Wat gee sy vir jou? Dit is 'n string wat die nodige style na die webwerf laai om die skuifbalk te vertoon. Dit is waar jy kan eindig deur self die visuele verwerking te doen. Daar is egter 'n geriefliker en vinniger oplossing. Jy kan ook 'n reël byvoeg wat ook die skuifbalk se verstektema laai, wat dit onmiddellik gereed maak om te gebruik. Jy kan sommige van die style wysig om jou skuifbalk meer uniek en anders te maak, en meer geskik vir jou inhoud. Natuurlik sal die Owl Carousel-instellings in Russies baie gerieflik wees, maar elke persoon wat webwerwe skep, moet verstaan dat hy nie sonder kennis van Engels kan klaarkom nie.
JavaSript-verbinding
Natuurlik sal die skuifbalk nie sonder JS werk nie, so jy moet ook sorg dat jy die toepaslike lêer insluit wat die nodige kode bevat. Om dit te doen, moet jy 'n reël kode uit die dokumentasie invoeg, maar een voorwaarde moet nagekom word. Almal weet dat JS 'n programmeertaal is wat alle opdragte in volgorde uitvoer, so in hierdie geval moet jy hierdie reël kode byvoeg na die reël wat die jQuery-biblioteek by jou dokument voeg. Meer met JS in die geval van hierdie skuifbalk, jy het niks te doen niebenodig.
HTML-kodering
Wel, jy het die skuifbalk gekoppel, nou is dit tyd om dit te ontwerp en aan te pas. Eerstens moet jy die HTML-kode skryf sodat die skuifbalk hoegenaamd op jou bladsy verskyn. Om dit te doen, moet jy 'n houer skep wat die skyfies sal bevat. Dit kan gedoen word deur die div-merker te gebruik, wat aan die uil-karrouselklas toegeken moet word. Dit is hierdie klas wat verseker dat alle style wat met die skuifbalk verband hou, geaktiveer sal word. Jy kan ook 'n ander klas skryf - uil-tema. Dit sal handig te pas kom as jy besluit om die verstekontwerp te gebruik of die standaardweergawe van die skuifbalk as basis vir verdere werk te neem.
Dan moet jy elke skyfie in 'n aparte houer met 'n div-merker byvoeg. Natuurlik kan jy ander merkers gebruik, maar hierdie merker is die beste vir glyers.
Oproep-inprop
En die laaste ding wat jy moet doen om 'n klaargemaakte skuifbalk op jou werf te hê, is om hierdie blok kode te gebruik:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Dit verseker dat die skuifbalk begin funksioneer, d.w.s. blaai deur die inhoud, wanneer jou bladsy laai. Met dieselfde kode kan jy Owl Carousel aan WordPress koppel. Die instellings van hierdie inprop is baie en uiteenlopend, en nou sal jy meer oor die belangrikste punte leer.
Stel die voorkoms en funksionaliteit van die skuifbalk
So, watter opdragte kan jy gebruik om jou skuifbalk aan te pas? Eerstens moet jy die items-opdrag onthou, want daarmee kan jy 'n spesifieke aantal skyfies in jou skuifbalk stel. Die lus-opdrag sal jou toelaat om te kies of jy die skuifbalk wil lus of ophou om by die laaste element te blaai. Daar is ook die Sleep-opdrag, wat verskeie opsies het, soos muis en aanraking. In die eerste geval kan jy dit so maak dat die elemente van jou skuifbalk gevee kan word met die muis wat ingehou word, en in die tweede geval met die hulp van 'n aanraking (hierdie opdrag is geskik vir mobiele toestelle). Nog 'n belangrike opdrag is nav, wat die vertoning van navigasiepyltjies moontlik maak. Daarmee saam kan jy die navText-opdrag gebruik om etikette by navigasieknoppies te voeg. U moet ook nie vergeet van die outospeel-opdrag nie, wat u toelaat om die outomatiese begin van die draai van die skyfies van u skuifbalk te aktiveer en te deaktiveer wanneer die bladsy laai. Met hierdie opdrag kan jy ook autoplayTimeout gebruik, waarvoor jy 'n spesifieke waarde in millisekondes kan stel, wat die tyd sal bepaal tussen die outomatiese draai van elk van die skyfies.
As jy responsiewe webontwerp gebruik, dit wil sê die ontwerp van jou bladsy verander outomaties na gelang van watter toestel dit bekyk word, dan moet jy beslis die responsiewe opdrag onthou, wat jou toelaat om die aantal skyfies te stel om te vertoon afhangende van die wydte van die skerm waarop die bladsy bekyk word.
