Bundi Carousel: sanidi na muunganisho

Orodha ya maudhui:

Bundi Carousel: sanidi na muunganisho
Bundi Carousel: sanidi na muunganisho
Anonim

Watu wengi kwenye tovuti zao wanataka kuona vitelezi - hivi ni vizuizi vinavyoonyesha kipengele kimoja cha maudhui kwenye skrini, na baada ya muda fulani kubadilisha maudhui haya hadi nyingine. Kwa kawaida, kila msanidi wa wavuti ana uwezo wa kuunda kitelezi kwa kujitegemea kwa kutumia HTML, CSS na JavaScript, lakini hii haileti maana kila wakati. Utatumia muda mwingi, licha ya ukweli kwamba kuna suluhisho chache zilizopangwa tayari kwenye mtandao ambazo hurahisisha maisha yako na kufanya tovuti yako kuvutia zaidi. Nakala hii itazingatia moja ya suluhisho hizi zinazoitwa Owl Carousel. Kuweka kitelezi hiki ni rahisi sana, kwa hivyo hata anayeanza anaweza kuishughulikia. Sasa utajifunza nini slider hii ni, pamoja na maelezo mengine muhimu. Kuweka Owl Carousel ni mchakato wa hatua kwa hatua, kwa hivyo unapaswa kusoma nyenzo hii kwa mpangilio pekee.

mpangilio wa jukwa la bundi
mpangilio wa jukwa la bundi

Ni nini na kwa nini unafaa kuchagua kitelezi hiki mahususi?

Owl Carousel, usanidi ambao utajadiliwa katika makala hii, ni programu-jalizi yenye ufanisi sana ambayo inaongeza kitelezi kizuri na rahisi kwa ukurasa wako, ambayo itawezesha sana kazi yako kwenye tovuti,kuokoa muda mwingi, juhudi na pesa. Je, ni faida gani za programu-jalizi hii, kwa sababu kuna vitelezi vingi kwenye Wavuti? Ukweli ni kwamba kitelezi hiki kinakupa chaguzi kadhaa za ubinafsishaji, ambazo zitakuruhusu kufanya ukurasa wako kuwa wa kipekee na usioweza kuepukika. Ni programu-jalizi inayojibu ambayo itafanya kazi kwenye matoleo yote ya kivinjari na inaweza kuunganishwa kwa urahisi kwenye WordPress na CMS nyingine maarufu. Kwa ujumla, slider hii ina faida nyingi, kwa hivyo unapaswa kufanya uchaguzi kwa niaba yake. Hata hivyo, kabla ya kuanza kusanidi Owl Carousel, programu-jalizi hii bado inahitaji kupakiwa.

owl jukwa 2 mazingira
owl jukwa 2 mazingira

Pakua

Kuweka Owl Carousel 2 haiwezekani ikiwa hujaipakua kwenye kompyuta yako, na kwa kuwa haya ni maagizo ya hatua kwa hatua, unapaswa kuanza tangu mwanzo kabisa. Kwa hivyo, programu inaweza kupakuliwa kwa kutumia wasimamizi wa vifurushi, lakini hizi ni zana za msanidi wa hali ya juu, kwa hivyo hapa tutakuambia jinsi ya kupata programu-jalizi hii kwa njia ya kawaida. Unahitaji kwenda kwenye tovuti rasmi ya programu-jalizi na kupakua toleo lake la hivi karibuni. Baada ya hayo, faili zote zilizopakuliwa zinapaswa kuhamishiwa kwenye saraka ya tovuti yako, baada ya kuandaa folda inayofaa, ambayo inaitwa sawa na Plugin yenyewe. Kumbuka kuwa programu-jalizi hii imeunganishwa na jQuery, kwa hivyo unahitaji kuwa na maktaba hiyo pia. Vema, ukishapakua programu-jalizi hii, utahitaji kutunza hatua inayofuata ambayo ni kusanidi kitelezi 2 cha Owl Carousel.

jukwa la bundi 2 mpangilio wa kitelezi
jukwa la bundi 2 mpangilio wa kitelezi

CSS

BMipangilio ya Owl Carousel 1.3 inasalia kuwa sawa na katika toleo jipya la 2, vipengele vipya pekee ndivyo vinavyoongezwa. Hata hivyo, maelezo ya msingi yatakuwa sawa, kuanzia na kuongeza CSS kwenye hati yako. Kwa hivyo hatua ya kwanza ni kuongeza mstari. Anakupa nini? Hii ni kamba ambayo hupakia mitindo muhimu kwenye tovuti ili kuonyesha kitelezi. Hapa ndipo unaweza kumaliza kwa kufanya usindikaji wa kuona mwenyewe. Walakini, kuna suluhisho rahisi zaidi na la haraka. Unaweza pia kuongeza mstari ambao pia hupakia mandhari chaguo-msingi ya kitelezi, na kuifanya iwe tayari kutumika papo hapo. Unaweza kuhariri baadhi ya mitindo ili kufanya kitelezi chako kuwa cha kipekee zaidi na tofauti, na kufaa zaidi kwa maudhui yako. Kwa kawaida, mipangilio ya Owl Carousel katika Kirusi itakuwa rahisi sana, lakini kila mtu anayeunda tovuti anapaswa kuelewa kwamba hawezi kufanya bila ujuzi wa Kiingereza.

owl carousel wordpress mipangilio
owl carousel wordpress mipangilio

muunganisho wa JavaSpript

Bila shaka, kitelezi hakitafanya kazi bila JS, kwa hivyo unapaswa pia kuwa mwangalifu kujumuisha faili inayofaa iliyo na msimbo unaohitajika. Ili kufanya hivyo, unahitaji kuingiza mstari wa kanuni kutoka kwa nyaraka, hata hivyo, hali moja lazima ifikiwe. Kila mtu anajua kwamba JS ni lugha ya programu ambayo hutekeleza amri zote kwa utaratibu, kwa hiyo katika kesi hii unapaswa kuongeza mstari huu wa kanuni baada ya mstari unaoongeza maktaba ya jQuery kwenye hati yako. Zaidi na JS katika kesi ya kitelezi hiki, huna la kufanyahaja.

jukwa la bundi 1 3 mipangilio
jukwa la bundi 1 3 mipangilio

usimbaji wa HTML

Vema, umeunganisha kitelezi, sasa ni wakati wa kukiunda na kukibinafsisha. Kwanza kabisa, unahitaji kuandika msimbo wa HTML ili kitelezi kionekane kwenye ukurasa wako kabisa. Ili kufanya hivyo, unahitaji kuunda chombo ambacho kitakuwa na slides. Hii inaweza kufanywa kwa kutumia tagi ya div, ambayo inahitaji kupewa darasa la bundi-jukwa. Ni darasa hili ambalo linahakikisha kuwa mitindo yote inayohusiana na kitelezi itaamilishwa. Unaweza pia kuandika darasa lingine - mandhari ya bundi. Itakusaidia ukiamua kutumia muundo chaguomsingi au kuchukua toleo la kawaida la kitelezi kama msingi wa kazi zaidi.

Kisha unahitaji kuongeza kila slaidi katika chombo tofauti chenye tagi ya div. Bila shaka, unaweza kutumia lebo zingine, lakini lebo hii ndiyo bora zaidi kwa vitelezi.

Piga programu-jalizi

Na jambo la mwisho unahitaji kufanya ili kuwa na kitelezi kilichotengenezwa tayari kwenye tovuti yako ni kutumia msimbo huu:

$(hati).tayari(kazi(){

$(".bundi-jukwa").bundiCarousel();

});

Inahakikisha kwamba kitelezi kinaanza kufanya kazi, yaani, tembeza maudhui, ukurasa wako unapopakia. Kwa msimbo sawa, unaweza kuunganisha Owl Carousel kwa WordPress. Mipangilio ya programu-jalizi hii ni mingi na tofauti, na sasa utajifunza kuhusu mambo muhimu zaidi.

mipangilio ya jukwa la bundi katika Kirusi
mipangilio ya jukwa la bundi katika Kirusi

Kuweka mwonekano na utendakazi wa kitelezi

Kwa hivyo unaweza kutumia amri zipi kubinafsisha kitelezi chako? Kwanza kabisa, unahitaji kukumbuka amri ya vitu, kwa sababu kwa hiyo unaweza kuweka idadi maalum ya slides kwenye slider yako. Amri ya kitanzi itakuruhusu kuchagua ikiwa utafunga kitelezi au uache kutembeza kwenye kipengele cha mwisho. Pia kuna amri ya Buruta, ambayo ina chaguzi kadhaa, kama vile panya na mguso. Katika kesi ya kwanza, unaweza kuifanya ili vipengele vya slider yako vinaweza kupigwa na panya iliyofanyika chini, na katika kesi ya pili, kwa msaada wa kugusa (amri hii inafaa kwa vifaa vya simu). Amri nyingine muhimu ni nav, ambayo huwezesha onyesho la mishale ya kusogeza. Pamoja nayo, unaweza kutumia amri ya navText kuongeza lebo kwenye vitufe vya kusogeza. Pia, usipaswi kusahau kuhusu amri ya kucheza kiotomatiki, ambayo inakuwezesha kuwezesha na kuzima kuanza kwa moja kwa moja kwa kugeuza slides za slider yako wakati ukurasa unapakia. Kwa amri hii, unaweza pia kutumia autoplayTimeout, ambayo unaweza kuweka thamani maalum katika milisekunde, ambayo itabainisha muda kati ya kugeuza kiotomatiki kwa kila slaidi.

Iwapo unatumia muundo wa wavuti unaoitikia, yaani, muundo wa ukurasa wako hubadilika kiotomatiki kulingana na kifaa gani unatazamwa, basi hakika unahitaji kukumbuka amri sikivu, ambayo hukuruhusu kuweka idadi ya slaidi. kuonyesha kulingana na upana wa skrini ambayo ukurasa unatazamwa.

Ilipendekeza: