Շատ մարդիկ իրենց սեփական կայքում ցանկանում են տեսնել սլայդերներ. սրանք բլոկներ են, որոնք ցուցադրում են բովանդակության մեկ տարր էկրանին և որոշակի ժամանակահատվածից հետո փոխում են այս բովանդակությունը մյուսով: Բնականաբար, յուրաքանչյուր վեբ մշակող կարող է ինքնուրույն ստեղծել սլայդեր՝ օգտագործելով HTML, CSS և JavaScript, բայց դա միշտ չէ, որ իմաստ ունի: Բավականին շատ ժամանակ կծախսեք, չնայած այն բանին, որ ինտերնետում բավականին քիչ պատրաստի լուծումներ կան, որոնք շատ ավելի հեշտացնում են ձեր կյանքը և շատ ավելի գրավիչ դարձնում ձեր կայքը։ Այս հոդվածը կկենտրոնանա այս լուծումներից մեկի վրա, որը կոչվում է Owl Carousel: Այս սլայդերի կարգավորումը աներևակայելի պարզ է, այնպես որ նույնիսկ սկսնակը կարող է կարգավորել այն: Այժմ դուք կսովորեք, թե ինչ է այս սլայդերը, ինչպես նաև այլ կարևոր մանրամասներ: Owl Carousel-ի տեղադրումը քայլ առ քայլ գործընթաց է, այնպես որ դուք պետք է ուսումնասիրեք այս նյութը միայն հերթականությամբ:
Ի՞նչ է դա և ինչու՞ պետք է ընտրել այս հատուկ սահիչը:
Owl Carousel-ը, որի կոնֆիգուրացիան կքննարկվի այս հոդվածում, շատ արդյունավետ փլագին է, որը ձեր էջին ավելացնում է գեղեցիկ և հարմարավետ սլայդեր, որը մեծապես կհեշտացնի ձեր աշխատանքը կայքում,խնայելով շատ ժամանակ, ջանք և գումար: Որո՞նք են այս հատուկ հավելվածի առավելությունները, քանի որ համացանցում բավականին շատ սլայդերներ կան: Բանն այն է, որ այս սլայդերը ձեզ առաջարկում է անհատականացման տասնյակ տարբերակներ, որոնք թույլ կտան ձեր էջը դարձնել յուրահատուկ և անկրկնելի։ Այն ռեսպոնսիվ փլագին է, որը կաշխատի բրաուզերի բոլոր տարբերակների վրա և կարող է հեշտությամբ միանալ WordPress-ին և այլ հանրաճանաչ CMS-ին: Ընդհանուր առմամբ, այս սլայդերը շատ առավելություններ ունի, ուստի պետք է անպայման ընտրություն կատարել նրա օգտին։ Այնուամենայնիվ, նախքան Owl Carousel-ի կարգավորումը սկսելը, այս փլագինը դեռ պետք է բեռնվի:
Ներբեռնում
Owl Carousel 2-ի կարգավորումը հնարավոր չէ, եթե այն չեք ներբեռնել ձեր համակարգչում, և քանի որ սա քայլ առ քայլ հրահանգ է, դուք պետք է սկսեք հենց սկզբից: Այսպիսով, ծրագիրը կարելի է ներբեռնել փաթեթների կառավարիչների միջոցով, բայց դրանք մշակողների առաջադեմ գործիքներ են, ուստի այստեղ մենք ձեզ կպատմենք, թե ինչպես ստանալ այս փլագինը ստանդարտ ձևով: Դուք պետք է գնաք plugin-ի պաշտոնական կայք և ներբեռնեք դրա վերջին տարբերակը: Դրանից հետո բոլոր ներբեռնված ֆայլերը պետք է տեղափոխվեն ձեր կայքի գրացուցակ՝ պատրաստելով հարմար թղթապանակ, որը կոչվում է նույնը, ինչ փլագինը: Նկատի ունեցեք, որ այս փլագինը միացված է jQuery-ի հետ, այնպես որ դուք պետք է այդ գրադարանը նույնպես հասանելի լինի: Դե, այս փլագինը ներբեռնելուց հետո դուք պետք է հոգ տանեք հաջորդ քայլի մասին, որը կարգավորում է Owl Carousel 2-ի սահիչը:
CSS
BOwl Carousel 1.3-ի կարգավորումները մնում են գրեթե նույնը, ինչ նոր տարբերակ 2-ում, ավելացվում են միայն նոր հնարավորություններ: Այնուամենայնիվ, հիմնական տեղեկատվությունը նույնը կլինի՝ սկսած ձեր փաստաթղթում CSS ավելացնելուց: Այսպիսով, առաջին քայլը տող ավելացնելն է: Ի՞նչ է նա տալիս ձեզ: Սա տող է, որը բեռնում է անհրաժեշտ ոճերը կայք՝ սլայդերը ցուցադրելու համար: Այստեղ դուք կարող եք ավարտել՝ ինքներդ կատարելով տեսողական մշակումը: Այնուամենայնիվ, կա ավելի հարմար և արագ լուծում. Կարող եք նաև ավելացնել մի տող, որը նաև բեռնում է սլայդերի լռելյայն թեման՝ այն անմիջապես պատրաստ դարձնելով օգտագործման համար: Դուք կարող եք խմբագրել որոշ ոճեր՝ ձեր սլայդերն ավելի յուրօրինակ և տարբեր դարձնելու համար և ավելի հարմար ձեր բովանդակության համար: Բնականաբար, Owl Carousel-ի կարգավորումները ռուսերեն լեզվով շատ հարմար կլինեն, բայց յուրաքանչյուր մարդ, ով ստեղծում է կայքեր, պետք է հասկանա, որ չի կարող առանց անգլերենի իմացության:
JavaSpript կապ
Իհարկե, սլայդերը չի աշխատի առանց JS-ի, ուստի պետք է հոգ տանել նաև անհրաժեշտ կոդը պարունակող համապատասխան ֆայլը ներառելու մասին: Դա անելու համար հարկավոր է փաստաթղթերից ծածկագրի տող մտցնել, այնուամենայնիվ, պետք է կատարվի մեկ պայման. Բոլորը գիտեն, որ JS-ը ծրագրավորման լեզու է, որը կատարում է բոլոր հրամանները հերթականությամբ, ուստի այս դեպքում դուք պետք է ավելացնեք կոդի այս տողը այն տողից հետո, որն ավելացնում է jQuery գրադարանը ձեր փաստաթղթում: Ավելի շատ JS-ի հետ այս սլայդերի դեպքում, դուք անելիք չունեքանհրաժեշտ է.
HTML կոդավորում
Դե, դուք միացրել եք սլայդերը, այժմ այն նախագծելու և հարմարեցնելու ժամանակն է: Նախ պետք է գրել HTML կոդը, որպեսզի սլայդերն ընդհանրապես հայտնվի ձեր էջում։ Դա անելու համար դուք պետք է ստեղծեք կոնտեյներ, որը կպարունակի սլայդները: Դա կարելի է անել՝ օգտագործելով div պիտակը, որին պետք է հատկացնել owl-carousel դասը: Հենց այս դասն է ապահովում, որ սլայդերի հետ կապված բոլոր ոճերը կակտիվանան։ Կարող եք նաև գրել մեկ այլ դաս՝ owl-theme: Դա օգտակար կլինի, եթե որոշեք օգտագործել լռելյայն դիզայնը կամ հիմք ընդունել սլայդերի ստանդարտ տարբերակը հետագա աշխատանքի համար:
Այնուհետև դուք պետք է յուրաքանչյուր սլայդն ավելացնեք առանձին տարայի մեջ՝ div պիտակով: Իհարկե, դուք կարող եք օգտագործել այլ պիտակներ, բայց այս թեգը լավագույնն է սլայդերների համար:
Զանգի հավելված
Եվ վերջին բանը, որ դուք պետք է անեք, որպեսզի ձեր կայքում պատրաստի սլայդեր ունենաք, դա կոդերի այս բլոկն օգտագործելն է.
$(փաստաթուղթ).ready(function(){
$(".owl-carousel").owlCarousel();
});
Այն ապահովում է, որ սահիչը սկսում է գործել, այսինքն՝ ոլորել բովանդակության միջով, երբ ձեր էջը բեռնվում է: Նույն կոդով դուք կարող եք միացնել Owl Carousel-ը WordPress-ին։ Այս plugin-ի կարգավորումները բազմաթիվ են և բազմազան, և այժմ դուք կսովորեք ամենակարևոր կետերի մասին:
Սահիկի տեսքի և ֆունկցիոնալության կարգավորում
Այսպիսով, ի՞նչ հրամաններ կարող եք օգտագործել ձեր սահիկը հարմարեցնելու համար: Նախ և առաջ պետք է հիշել կետերի հրամանը, քանի որ դրա միջոցով կարող եք ձեր սլայդում սահմանել որոշակի քանակությամբ սլայդներ։ Loop հրամանը թույլ կտա ձեզ ընտրել՝ պտտել սահիչը կամ դադարեցնել ոլորումը վերջին տարրի մոտ: Կա նաև Drag հրամանը, որն ունի մի քանի տարբերակ, օրինակ՝ մկնիկը և հպումը։ Առաջին դեպքում կարող եք այնպես անել, որ ձեր սահիկի տարրերը մկնիկը սեղմած սահեցնեն, իսկ երկրորդ դեպքում՝ հպման օգնությամբ (այս հրամանը հարմար է շարժական սարքերի համար): Մեկ այլ կարևոր հրաման է nav, որը հնարավորություն է տալիս ցուցադրել նավիգացիոն սլաքները: Դրա հետ մեկտեղ դուք կարող եք օգտագործել navText հրամանը՝ նավիգացիոն կոճակներին պիտակներ ավելացնելու համար: Նաև չպետք է մոռանալ autoplay հրամանի մասին, որը թույլ է տալիս միացնել և անջատել ձեր սլայդերի սլայդների շրջման ավտոմատ մեկնարկը, երբ էջը բեռնվում է: Այս հրամանով կարող եք նաև օգտագործել autoplayTimeout-ը, որի համար կարող եք սահմանել որոշակի արժեք միլիվայրկյաններով, որը կորոշի սլայդներից յուրաքանչյուրի ավտոմատ պտտման միջև ընկած ժամանակը:
Եթե օգտագործում եք ռեսպոնսիվ վեբ դիզայն, այսինքն՝ ձեր էջի դիզայնը ավտոմատ կերպով փոխվում է՝ կախված նրանից, թե որ սարքից է այն դիտվում, ապա անպայման պետք է հիշել ռեսպոնսիվ հրամանը, որը թույլ է տալիս սահմանել սլայդների քանակը։ ցուցադրել՝ կախված էկրանի լայնությունից, որով դիտվում է էջը։
