Daudzi cilvēki savā vietnē vēlas redzēt slīdņus - tie ir bloki, kas ekrānā parāda vienu satura elementu un pēc noteikta laika maina šo saturu uz citu. Protams, katrs tīmekļa izstrādātājs var patstāvīgi izveidot slīdni, izmantojot HTML, CSS un JavaScript, taču tas ne vienmēr ir loģiski. Jūs pavadīsiet diezgan daudz laika, neskatoties uz to, ka internetā ir diezgan daudz gatavu risinājumu, kas ievērojami atvieglo jūsu dzīvi un padara jūsu vietni daudz pievilcīgāku. Šajā rakstā galvenā uzmanība tiks pievērsta vienam no šiem risinājumiem, ko sauc par pūces karuseli. Šī slīdņa iestatīšana ir neticami vienkārša, tāpēc ar to var tikt galā pat iesācējs. Tagad jūs uzzināsit, kas ir šis slīdnis, kā arī citas svarīgas detaļas. Pūču karuseļa iestatīšana ir pakāpenisks process, tāpēc jums vajadzētu izpētīt šo materiālu tikai secībā.
Kas tas ir un kāpēc izvēlēties šo slīdni?
Pūces karuselis, kura konfigurācija tiks apspriesta šajā rakstā, ir ļoti efektīvs spraudnis, kas jūsu lapai pievieno skaistu un ērtu slīdni, kas ievērojami atvieglos jūsu darbu vietnē,ietaupot daudz laika, pūļu un naudas. Kādas ir šī konkrētā spraudņa priekšrocības, jo tīmeklī ir diezgan daudz slīdņu? Fakts ir tāds, ka šis slīdnis piedāvā desmitiem pielāgošanas iespēju, kas ļaus jums padarīt savu lapu unikālu un neatkārtojamu. Tas ir atsaucīgs spraudnis, kas darbosies visās pārlūkprogrammas versijās un ir viegli savienojams ar WordPress un citām populārām CMS. Kopumā šim slīdnim ir daudz priekšrocību, tāpēc noteikti vajadzētu izdarīt izvēli par labu tam. Tomēr, pirms sākat iestatīt Owl Carousel, šis spraudnis joprojām ir jāielādē.
Lejupielādēt
Owl Carousel 2 iestatīšana nav iespējama, ja neesat to lejupielādējis savā datorā, un, tā kā šī ir soli pa solim sniegta instrukcija, jums jāsāk no paša sākuma. Tātad programmu var lejupielādēt, izmantojot pakotņu pārvaldniekus, taču tie ir uzlaboti izstrādātāju rīki, tāpēc šeit mēs jums pateiksim, kā iegūt šo spraudni standarta veidā. Jums jādodas uz spraudņa oficiālo vietni un jālejupielādē tā jaunākā versija. Pēc tam visi lejupielādētie faili ir jāpārsūta uz jūsu vietnes direktoriju, sagatavojot ērtu mapi, kuras nosaukums ir tāds pats kā pašam spraudnim. Ņemiet vērā, ka šis spraudnis ir komplektā ar jQuery, tāpēc jums ir jābūt pieejamai arī šai bibliotēkai. Kad esat lejupielādējis šo spraudni, jums būs jāveic nākamā darbība, proti, jāiestata slīdnis Owl Carousel 2.
CSS
BOwl Carousel 1.3 iestatījumi paliek gandrīz tādi paši kā jaunākajā versijā 2, tiek pievienotas tikai jaunas funkcijas. Tomēr pamatinformācija būs tāda pati, sākot ar CSS pievienošanu dokumentam. Tātad pirmais solis ir pievienot rindu. Ko viņa tev dod? Šī ir virkne, kas vietnē ielādē nepieciešamos stilus, lai parādītu slīdni. Šeit varat pabeigt, pats veicot vizuālo apstrādi. Tomēr ir ērtāks un ātrāks risinājums. Varat arī pievienot rindiņu, kas arī ielādē slīdņa noklusējuma motīvu, padarot to uzreiz gatavu lietošanai. Varat rediģēt dažus stilus, lai padarītu slīdni unikālāku un atšķirīgāku un piemērotāku savam saturam. Protams, ļoti ērti būtu Pūču karuseļa iestatījumi krievu valodā, taču ikvienam, kas veido mājas lapas, būtu jāsaprot, ka bez angļu valodas zināšanām neiztikt.
JavaSpript savienojums
Protams, slīdnis nedarbosies bez JS, tāpēc jums vajadzētu arī parūpēties, lai iekļautu atbilstošo failu ar nepieciešamo kodu. Lai to izdarītu, jums ir jāievieto koda rindiņa no dokumentācijas, tomēr ir jāievēro viens nosacījums. Ikviens zina, ka JS ir programmēšanas valoda, kas izpilda visas komandas pēc kārtas, tāpēc šajā gadījumā šī koda rindiņa ir jāpievieno aiz rindas, kas pievieno jQuery bibliotēku jūsu dokumentam. Vairāk ar JS šī slīdņa gadījumā jums nav ko darītvajag.
HTML kodēšana
Nu, jūs esat pievienojis slīdni, tagad ir pienācis laiks to izstrādāt un pielāgot. Pirmkārt, jums ir jāieraksta HTML kods, lai slīdnis vispār tiktu parādīts jūsu lapā. Lai to izdarītu, jums ir jāizveido konteiners, kurā būs slaidi. To var izdarīt, izmantojot div tagu, kuram ir jāpiešķir klase pūces-karuselis. Tieši šī klase nodrošina, ka tiks aktivizēti visi ar slīdni saistītie stili. Varat arī uzrakstīt citu klasi - pūces tēmu. Tas noderēs, ja nolemjat izmantot noklusējuma dizainu vai izmantot slīdņa standarta versiju par pamatu turpmākajam darbam.
Tad katrs slaids jāpievieno atsevišķā konteinerā ar div tagu. Protams, varat izmantot citus tagus, taču šis tags ir vislabākais slīdņiem.
Zvanu spraudnis
Un pēdējais, kas jums jādara, lai jūsu vietnē būtu gatavs slīdnis, ir izmantot šo koda bloku:
$(dokuments).ready(function(){
$(".owl-carousel").owlCarousel();
});
Tas nodrošina, ka slīdnis sāk darboties, t.i., ritināt saturu, kad jūsu lapa tiek ielādēta. Izmantojot to pašu kodu, varat savienot pūces karuseli ar WordPress. Šī spraudņa iestatījumi ir daudz un dažādi, un tagad jūs uzzināsit par svarīgākajiem punktiem.
Slīdņa izskata un funkcionalitātes iestatīšana
Tātad, kādas komandas varat izmantot, lai pielāgotu slīdni? Pirmkārt, jums ir jāatceras vienumu komanda, jo ar to jūs varat iestatīt noteiktu slaidu skaitu savā slīdnī. Cilpas komanda ļaus jums izvēlēties, vai veikt slīdņa cilpu vai pārtraukt ritināšanu pie pēdējā elementa. Ir arī komanda Vilkšana, kurai ir vairākas iespējas, piemēram, pele un pieskāriens. Pirmajā gadījumā varat izveidot tā, lai jūsu slīdņa elementus varētu pārvilkt, turot nospiestu peli, un otrajā gadījumā ar pieskāriena palīdzību (šī komanda ir piemērota mobilajām ierīcēm). Vēl viena svarīga komanda ir nav, kas ļauj parādīt navigācijas bultiņas. Kopā ar to varat izmantot komandu navText, lai navigācijas pogām pievienotu etiķetes. Tāpat nevajadzētu aizmirst par automātiskās atskaņošanas komandu, kas ļauj iespējot un atspējot slīdņa slaidu pagriešanas automātisko sākšanu, kad lapa tiek ielādēta. Izmantojot šo komandu, varat izmantot arī autoplayTimeout, kurai var iestatīt konkrētu vērtību milisekundēs, kas noteiks laiku starp katra slaida automātisko pagriešanu.
Ja izmantojat responsīvo tīmekļa dizainu, tas ir, jūsu lapas dizains automātiski mainās atkarībā no tā, kurā ierīcē tā tiek skatīta, tad noteikti ir jāatceras responsive komanda, kas ļauj iestatīt slaidu skaitu lai parādītu atkarībā no ekrāna platuma, kurā lapa tiek skatīta.
