Maraming tao sa kanilang sariling site ang gustong makakita ng mga slider - ito ay mga bloke na nagpapakita ng isang elemento ng nilalaman sa screen, at pagkatapos ng isang tiyak na tagal ng panahon ay binabago ang nilalamang ito sa isa pa. Naturally, ang bawat web developer ay nakapag-iisa na lumikha ng isang slider gamit ang HTML, CSS at JavaScript, ngunit hindi ito palaging may katuturan. Gugugulin ka ng maraming oras, sa kabila ng katotohanan na mayroong ilang mga handa na solusyon sa Internet na ginagawang mas madali ang iyong buhay at ginagawang mas kaakit-akit ang iyong site. Ang artikulong ito ay tumutuon sa isa sa mga solusyong ito na tinatawag na Owl Carousel. Ang pagse-set up ng slider na ito ay hindi kapani-paniwalang simple, kaya kahit isang baguhan ay kayang hawakan ito. Ngayon ay matututunan mo kung ano ang slider na ito, pati na rin ang iba pang mahahalagang detalye. Ang pag-set up ng Owl Carousel ay isang hakbang-hakbang na proseso, kaya dapat mong pag-aralan ang materyal na ito sa pagkakasunud-sunod lamang.
Ano ito at bakit mo dapat piliin ang partikular na slider na ito?
Owl Carousel, ang configuration na tatalakayin sa artikulong ito, ay isang napaka-epektibong plugin na nagdaragdag ng maganda at maginhawang slider sa iyong page, na lubos na magpapadali sa iyong trabaho sa site,makatipid ng maraming oras, pagsisikap at pera. Ano ang mga pakinabang ng partikular na plugin na ito, dahil napakaraming slider sa Web? Ang katotohanan ay ang slider na ito ay nag-aalok sa iyo ng dose-dosenang mga pagpipilian sa pagpapasadya, na magbibigay-daan sa iyong gawing kakaiba at walang katulad ang iyong pahina. Ito ay isang tumutugon na plugin na gagana sa lahat ng mga bersyon ng browser at madaling konektado sa WordPress at iba pang sikat na CMS. Sa pangkalahatan, ang slider na ito ay may maraming mga pakinabang, kaya dapat kang gumawa ng isang pagpipilian sa pabor nito. Gayunpaman, bago mo simulan ang pag-set up ng Owl Carousel, kailangan pa ring i-load ang plugin na ito.
I-download
Hindi posible ang pag-set up ng Owl Carousel 2 kung hindi mo pa ito na-download sa iyong computer, at dahil ito ay sunud-sunod na pagtuturo, dapat kang magsimula sa simula pa lang. Kaya, maaaring ma-download ang program gamit ang mga manager ng package, ngunit ito ay mga advanced na tool ng developer, kaya dito namin sasabihin sa iyo kung paano makuha ang plugin na ito sa karaniwang paraan. Kailangan mong pumunta sa opisyal na website ng plugin at i-download ang pinakabagong bersyon nito. Pagkatapos nito, ang lahat ng mga na-download na file ay dapat ilipat sa direktoryo ng iyong site, na naghanda ng isang maginhawang folder, na pinangalanang kapareho ng plugin mismo. Tandaan na ang plugin na ito ay kasama ng jQuery, kaya kailangan mong magkaroon din ng library na iyon. Well, kapag na-download mo na ang plugin na ito, kakailanganin mong pangalagaan ang susunod na hakbang na pagse-set up ng Owl Carousel slider 2.
CSS
BAng mga setting ng Owl Carousel 1.3 ay nananatiling halos kapareho ng sa mas bagong bersyon 2, mga bagong feature lang ang idinaragdag. Gayunpaman, ang pangunahing impormasyon ay magiging pareho, simula sa pagdaragdag ng CSS sa iyong dokumento. Kaya ang unang hakbang ay idagdag ang linya. Ano ang ibinibigay niya sa iyo? Ito ay isang string na naglo-load ng mga kinakailangang istilo sa site upang ipakita ang slider. Dito ka makakatapos sa pamamagitan ng paggawa ng visual processing sa iyong sarili. Gayunpaman, mayroong isang mas maginhawa at mas mabilis na solusyon. Maaari ka ring magdagdag ng isang linya na naglo-load din ng default na tema ng slider, na ginagawa itong agad na handang gamitin. Maaari mong i-edit ang ilan sa mga istilo upang gawing mas kakaiba at naiiba ang iyong slider, at mas angkop para sa iyong nilalaman. Naturally, ang mga setting ng Owl Carousel sa Russian ay magiging maginhawa, ngunit dapat maunawaan ng bawat taong gumagawa ng mga website na hindi niya magagawa nang walang kaalaman sa Ingles.
JavaSpript connection
Siyempre, hindi gagana ang slider nang walang JS, kaya dapat mo ring ingatan na isama ang naaangkop na file na naglalaman ng kinakailangang code. Upang gawin ito, kailangan mong magpasok ng isang linya ng code mula sa dokumentasyon, gayunpaman, dapat matugunan ang isang kundisyon. Alam ng lahat na ang JS ay isang programming language na nagpapatupad ng lahat ng mga command sa pagkakasunud-sunod, kaya sa kasong ito dapat mong idagdag ang linyang ito ng code pagkatapos ng linya na nagdaragdag ng jQuery library sa iyong dokumento. Higit pa sa JS sa kaso ng slider na ito, wala kang gagawinkailangan.
HTML coding
Well, ikinonekta mo na ang slider, oras na para idisenyo at i-customize ito. Una sa lahat, kailangan mong isulat ang HTML code para lumabas ang slider sa iyong page. Upang gawin ito, kailangan mong lumikha ng isang lalagyan na naglalaman ng mga slide. Magagawa ito gamit ang div tag, na kailangang italaga sa klase ng owl-carousel. Ito ang klase na nagsisiguro na ang lahat ng mga istilo na nauugnay sa slider ay isaaktibo. Maaari ka ring magsulat ng isa pang klase - tema ng kuwago. Ito ay magiging kapaki-pakinabang kung magpasya kang gamitin ang default na disenyo o kunin ang karaniwang bersyon ng slider bilang batayan para sa karagdagang trabaho.
Pagkatapos ay kailangan mong idagdag ang bawat slide sa isang hiwalay na lalagyan na may div tag. Siyempre, maaari kang gumamit ng iba pang mga tag, ngunit ang tag na ito ay ang pinakamahusay para sa mga slider.
Call plugin
At ang huling bagay na kailangan mong gawin upang magkaroon ng handa na slider sa iyong site ay gamitin ang block na ito ng code:
$(dokumento).ready(function(){
$(".owl-carousel").owlCarousel();
});
Tinitiyak nito na magsisimulang gumana ang slider, ibig sabihin, mag-scroll sa nilalaman, kapag nag-load ang iyong page. Gamit ang parehong code, maaari mong ikonekta ang Owl Carousel sa WordPress. Ang mga setting ng plugin na ito ay marami at iba-iba, at ngayon ay matututuhan mo ang tungkol sa pinakamahahalagang punto.
Pagtatakda ng hitsura at functionality ng slider
Kaya anong mga utos ang maaari mong gamitin upang i-customize ang iyong slider? Una sa lahat, kailangan mong tandaan ang command ng mga item, dahil dito maaari kang magtakda ng isang tiyak na bilang ng mga slide sa iyong slider. Ang loop command ay magbibigay-daan sa iyo na pumili kung i-loop ang slider o ihinto ang pag-scroll sa huling elemento. Mayroon ding utos na I-drag, na may ilang mga opsyon, gaya ng mouse at touch. Sa unang kaso, magagawa mo ito upang ang mga elemento ng iyong slider ay mai-swipe gamit ang mouse na naka-hold down, at sa pangalawang kaso, sa tulong ng isang pagpindot (ang utos na ito ay angkop para sa mga mobile device). Ang isa pang mahalagang utos ay ang nav, na nagbibigay-daan sa pagpapakita ng mga arrow sa pag-navigate. Kasama nito, maaari mong gamitin ang navText command upang magdagdag ng mga label sa mga navigation button. Gayundin, hindi mo dapat kalimutan ang tungkol sa utos ng autoplay, na nagbibigay-daan sa iyong paganahin at huwag paganahin ang awtomatikong pagsisimula ng pag-ikot ng mga slide ng iyong slider kapag nag-load ang pahina. Sa command na ito, maaari mo ring gamitin ang autoplayTimeout, kung saan maaari kang magtakda ng isang partikular na halaga sa mga millisecond, na tutukuyin ang oras sa pagitan ng awtomatikong pag-ikot ng bawat isa sa mga slide.
Kung gumagamit ka ng tumutugon na disenyo ng web, ibig sabihin, awtomatikong nagbabago ang disenyo ng iyong page depende sa kung saang device ito tinitingnan, tiyak na kailangan mong tandaan ang tumutugon na utos, na nagbibigay-daan sa iyong itakda ang bilang ng mga slide ipapakita depende sa lapad ng screen kung saan tinitingnan ang page.
