Owl Carousel: iestatīšana un savienojamība

Internets
Notiek ielāde ...

Daudzi cilvēki savā mājas lapā vēlas redzētSlīdņus ir tādi bloki, kas ekrānā parāda vienu elementu saturu, un pēc noteikta laika tie maina šo saturu citā. Protams, katrs tīmekļa izstrādātājs pats spēj izveidot slīdni, izmantojot HTML, CSS un JavaScript, taču tas ne vienmēr ir jēga. Jūs pavadīsiet diezgan daudz laika, lai gan 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ā mēs apspriedīsim vienu no šiem risinājumiem, ko sauc par Pūces karuselis. Šī slīdnes iestatīšana ir neticami vienkārša, lai pat iesācējs varētu to paveikt. Tagad jūs uzzināsiet, ko šis slīdnis pārstāv, kā arī citas svarīgas ziņas. Soli pa solim tiek veikta Owl Carousel iestatīšana, tāpēc jums vajadzētu izpētīt šo materiālu tikai kārtībā.

pūces karuselis setup

Kas tas ir un kāpēc ir vērts izvēlēties šo slīdni?

Oulu karuselis, kura iestatījums būsšajā rakstā aplūkotais ir ļoti efektīvs spraudnis, kas jūsu lapai pievieno jauku un ērtu slīdni, kas ievērojami atvieglos jūsu darbu vietnē, ļaujot jums ietaupīt daudz laika, pūļu un naudas. Kādas ir šīs konkrētās spraudnes priekšrocības, jo tīmeklī ir daudz slīdņu? Fakts ir tāds, ka šis slīdnis piedāvā vairākus desmitus pielāgošanas iespēju, kas ļaus jums padarīt jūsu lapu unikālu un neatkārtojamu. Šis ir adaptīvs spraudnis, kas darbosies visās pārlūkprogrammu versijās, un to var viegli savienot ar WordPress un citu populāru CMS. Parasti šīs slīdnes priekšrocības ir ļoti daudzas, tādēļ jums noteikti vajadzētu izvēlēties tās labā. Tomēr, pirms sākat iestatīt Owl Carousel, šis spraudnis ir jālejupielādē.

pūces karuselis 2 iestatījumi

Lejupielādēt

Owl Carousel 2 iestatīšana nav iespējama, ja jums tā navlejupielādēt to savā datorā un, tā kā tas ir soli pa solim, ir vērts sākas jau no paša sākuma. Tātad, programmu var lejupielādēt pakotņu pārvaldnieku palīdzībā, taču tie ir uzlaboti izstrādātāja rīki, tāpēc šeit tiks informēts, kā šo spraudni lietot standarta veidā. Jums nepieciešams doties uz spraudņa oficiālo vietni un lejupielādēt jaunāko versiju. Pēc tam visi lejupielādētie faili jāpārvieto uz jūsu vietnes direktoriju, sagatavojot ērtu mapi, ko sauc par tādu pašu kā spraudni. Ņemiet vērā, ka šis spraudnis ir saistīts ar jQuery, tādēļ jums arī ir jābūt pieejamai šai bibliotēkai. Nu, kad lejupielādējat šo spraudni, jums būs jāveic nākamais solis, proti, Pulse Karuselis 2 slīdņa iestatījums.

pūces karuselis 2 slīdņa iestatījums

CSS

In Owl Carousel 1.3 iestatījumi paliek gandrīz tādi paši kā jaunākajā versijā, tiek pievienotas tikai jaunas funkcijas. Tomēr pamata informācija būs tāda pati, sākot ar dokumenta pievienošanu CSS. Tādēļ pirmais solis ir pievienot HTML koda virkni. <link rel = "stilu tabula" href = "owlcarousel / owl.carousel.min.css">. Ko viņa tev dod? Šī ir virkne, kas ielādē vietnei nepieciešamos stilus, lai parādītu slīdni. Šajā brīdī jūs varat pabeigt, piesaistot sevi vizuālajai apstrādei. Tomēr ir ērtāks un ātrāks risinājums. Varat arī pievienot rindu. <link rel = "stilu tabula" href = "owlcarousel / owl.theme.default.min.css">kas arī ielādē standarta motīvuslīdni, kas padara to uzreiz gatavs lietošanai. Jūs varat rediģēt dažus stilus, padarot slīdni vairāk unikālu un neparastu, kā arī vairāk piemērotu jūsu saturam. Protams, krēsla "Owl Carousel" iestatījumi krievu valodā būtu ļoti ērti, taču ikvienam, kas izveido vietnes, būtu jāsaprot, ka viņš nevar iztikt bez angļu valodas zināšanām.

pūka karuselis wordpress iestatījumi

JavaSpript savienojums

Protams, slīdnis nedarbosies bez JS,tādēļ jums ir arī jāuzmanās, lai iekļautu atbilstošo failu, kurā ir vajadzīgs kods. Lai to izdarītu, jums jāievieto koda rinda no dokumentācijas tomēr obligāti jāievēro viens nosacījums. Ikviens zina, ka JS ir programmēšanas valoda, kas attiecīgi izpilda visas komandas, šajā gadījumā jums vajadzētu pievienot šo koda rindiņu pēc līnijas, kas pievieno jQuery bibliotēkai jūsu dokumentu. Šim slīdņa gadījumā jums nav jādara kaut kas cits ar JS.

pūce karuselis 1 3 iestatījumi

HTML formāts

Nu, jūs piesaistījāt slīdni, tagad ir pienācis laikssakārtot to un konfigurēt. Vispirms jums jāraksta HTML kods, lai jūsu lapā tiktu parādīts slīdnis. Lai to izdarītu, jums ir jāizveido trauks, kurā būs slaidi. To var izdarīt, izmantojot div tagu, kas jāpiešķir klases pūcei-karuselē. Tā ir šī klase, kas nodrošina, ka tiks aktivizēti visi stila veidi, kas pieder pie slīdņa. Varat arī reģistrēt citu klasi - pūces tēmu. Tas jums ir noderīgi, ja jūs nolemjat izmantot noklusējuma dizainu vai arī esat izmantojis slīdni standarta versiju kā pamatu turpmākam darbam.

Tad jums ir jāpievieno katrs slaids atsevišķā konteinerā ar div tagu. Protams, jūs varat izmantot citus tagus, taču šis tags vislabāk atbilst slīdņiem.

Zvanu spraudnis

Un pēdējā lieta, kas jums jādara, lai jūsu vietnē parādītu gatavu slīdni, ir izmantot šo koda bloku:

$ (document) .ready (funkcija () {

$ ( "Pūce-karuselis"). OwlCarousel () .;

});

Viņš garantē, ka slīdni sāksieslai funkcionētu, tas ir, lai ritinātu saturu, kad lapa ielādējas. Izmantojot to pašu kodu, jūs varat savienot Owl Carousel ar WordPress. Šī spraudņa iestatījumi ir daudzi un daudzveidīgi, un tagad jūs uzzināsit par galvenajiem mirkļiem.

pūces karuseļa iestatījumi krievu valodā

Pielāgojiet slīdņa izskatu un funkcionalitāti

Tātad, kādas komandas jūs varat izmantotpielāgot savu slīdni? Pirmkārt, jums ir jāatceras elementu komanda, jo ar tās palīdzību jūs varat iestatīt noteiktu slaidu skaitu slazdā. Cilpas komanda ļaus jums izvēlēties, vai cilpa slīdni vai pārtraukt ritināšanu pēdējā objektā. Ir arī Drag komanda, kurai ir vairākas iespējas, piemēram, peles un pieskāriens. Pirmajā gadījumā jūs varat padarīt slīdņa elementus ieskrūvēt ar piespiestu peli, bet otrajā gadījumā - izmantojot pieskārienu (šī komanda ir piemērota mobilajām ierīcēm). Vēl viena svarīga komanda ir nav, kas ietver navigācijas bultas rādīšanu. Ar to jūs varat izmantot komandu navText, pievienojot navigācijas pogām etiķetes. Tāpat arī neaizmirstiet par automātiskās palaišanas komandu, kas ļauj ieslēgt un izslēgt automātisko slaida lapas pagriešanas procesu, ielādējot lapu. Ar šo komandu jūs varat arī izmantot autoplayTimeout, par kuru jūs varat norādīt noteiktu vērtību milisekunžu laikā, kas nosaka laiku starp katra slaida automātisko pārslēgšanos.

Ja izmantojat atsaucīgu web dizainu, tadJūsu lapas dizains automātiski tiek mainīts atkarībā no tā, kāda ierīce ir skatīta, un jums noteikti jāatceras atbildīgā komanda, kas ļauj iestatīt parādīto slaidu skaitu atkarībā no tā ekrāna platuma, kurā tiek skatīta šī lapa.

Notiek ielāde ...
Notiek ielāde ...