O'z saytidagi ko'pchilik slayderlarni ko'rishni xohlaydi - bu bloklar ekranda bitta kontent elementini aks ettiradi va ma'lum vaqtdan keyin bu tarkibni boshqasiga o'zgartiradi. Tabiiyki, har bir veb-ishlab chiquvchi mustaqil ravishda HTML, CSS va JavaScript-dan foydalangan holda slayder yaratishi mumkin, ammo bu har doim ham mantiqiy emas. Internetda hayotingizni ancha osonlashtiradigan va saytingizni yanada jozibador qiladigan bir nechta tayyor echimlar mavjudligiga qaramay, siz juda ko'p vaqt sarflaysiz. Ushbu maqola Owl Carousel deb nomlangan ushbu echimlardan biriga qaratiladi. Ushbu slayderni o'rnatish juda oddiy, shuning uchun hatto yangi boshlovchi ham buni qila oladi. Endi siz ushbu slayder nima ekanligini, shuningdek, boshqa muhim tafsilotlarni bilib olasiz. Owl Carousel-ni sozlash bosqichma-bosqich jarayon, shuning uchun siz ushbu materialni faqat tartibda o'rganishingiz kerak.
Bu nima va nima uchun aynan shu slayderni tanlashingiz kerak?
Owl Carousel, uning konfiguratsiyasi ushbu maqolada muhokama qilinadi, bu sizning sahifangizga chiroyli va qulay slayderni qo'shadigan juda samarali plagin bo'lib, saytdagi ishingizni sezilarli darajada osonlashtiradi,ko'p vaqt, kuch va pulni tejash. Ushbu plaginning afzalliklari nimada, chunki Internetda juda ko'p slayderlar mavjudmi? Gap shundaki, ushbu slayder sizga o'nlab moslashtirish variantlarini taklif qiladi, bu sizning sahifangizni noyob va betakror qilish imkonini beradi. Bu barcha brauzer versiyalarida ishlaydigan va WordPress va boshqa mashhur CMS-ga osongina ulanishi mumkin bo'lgan sezgir plagin. Umuman olganda, bu slayder juda ko'p afzalliklarga ega, shuning uchun siz uning foydasiga tanlov qilishingiz kerak. Biroq, Owl Carousel-ni sozlashni boshlashdan oldin, bu plaginni hali ham yuklash kerak.
Yuklab olish
Owl Carousel 2-ni o'rnatish, agar siz uni kompyuteringizga yuklab olmagan bo'lsangiz, mumkin emas va bu bosqichma-bosqich ko'rsatma bo'lgani uchun, siz boshidan boshlashingiz kerak. Shunday qilib, dasturni paket menejerlari yordamida yuklab olish mumkin, ammo bular ishlab chiquvchilarning ilg'or vositalaridir, shuning uchun bu erda biz ushbu plaginni standart tarzda qanday olish kerakligini aytib beramiz. Plaginning rasmiy veb-saytiga o'tishingiz va uning so'nggi versiyasini yuklab olishingiz kerak. Shundan so'ng, barcha yuklab olingan fayllar plaginning o'zi bilan bir xil nomlangan qulay papkani tayyorlab, saytingiz katalogiga o'tkazilishi kerak. E'tibor bering, ushbu plagin jQuery bilan to'plangan, shuning uchun sizda bu kutubxona mavjud bo'lishi kerak. Ushbu plaginni yuklab olganingizdan so‘ng, “Owl Carousel 2” slayderini sozlash bo‘yicha keyingi qadamni bajarishingiz kerak bo‘ladi.
CSS
BOwl Carousel 1.3 sozlamalari yangi 2-versiyadagi kabi deyarli bir xil bo'lib qoladi, faqat yangi xususiyatlar qo'shiladi. Biroq, hujjatingizga CSS qo'shishdan boshlab, asosiy ma'lumotlar bir xil bo'ladi. Shunday qilib, birinchi qadam qatorni qo'shishdir. U sizga nima beradi? Bu slayderni ko'rsatish uchun saytga kerakli uslublarni yuklaydigan satr. Bu erda siz vizual ishlov berishni o'zingiz bajarishingiz mumkin. Biroq, yanada qulay va tezroq yechim mavjud. Bundan tashqari, slayderning standart mavzusini yuklaydigan qatorni ham qo'shishingiz mumkin, bu uni darhol foydalanishga tayyor qiladi. Slayderingizni yanada noyob va boshqacha qilish va kontentingizga mosroq qilish uchun siz ba'zi uslublarni tahrirlashingiz mumkin. Tabiiyki, rus tilidagi "Owl Carousel" sozlamalari juda qulay bo'lar edi, lekin veb-saytlarni yaratgan har bir kishi ingliz tilini bilmasdan qila olmasligini tushunishi kerak.
JavaSpript ulanishi
Albatta, slayder JSsiz ishlamaydi, shuning uchun siz kerakli kodni o'z ichiga olgan tegishli faylni ham kiritishingiz kerak. Buni amalga oshirish uchun siz hujjatlardan kod qatorini kiritishingiz kerak, ammo bitta shart bajarilishi kerak. JS barcha buyruqlarni tartibda bajaradigan dasturlash tili ekanligini hamma biladi, shuning uchun bu holda hujjatingizga jQuery kutubxonasini qo'shadigan qatordan keyin ushbu kod qatorini qo'shishingiz kerak. Ushbu slayderda JS bilan ko'proq, sizda hech narsa yo'qkerak.
HTML kodlash
Slayderni uladingiz, endi uni loyihalash va sozlash vaqti keldi. Avvalo, slayder sahifangizda umuman paydo bo'lishi uchun HTML kodini yozishingiz kerak. Buning uchun siz slaydlarni o'z ichiga olgan konteyner yaratishingiz kerak. Buni boyo'g'li-karusel sinfini tayinlash kerak bo'lgan div yorlig'i yordamida amalga oshirish mumkin. Aynan shu sinf slayderga tegishli barcha uslublar faollashishini ta'minlaydi. Bundan tashqari, boshqa sinf - boyqush-mavzuni yozishingiz mumkin. Agar siz standart dizayndan foydalanishga qaror qilsangiz yoki keyingi ish uchun asos sifatida slayderning standart versiyasini olsangiz, bu sizga yordam beradi.
Unda siz har bir slaydni div tegi bilan alohida konteynerga qo'shishingiz kerak. Albatta, siz boshqa teglardan foydalanishingiz mumkin, lekin bu teg slayderlar uchun eng yaxshisidir.
Qoʻngʻiroq plagini
Va saytingizda tayyor slayderga ega boʻlish uchun qilishingiz kerak boʻlgan oxirgi narsa bu kod blokidan foydalanish:
$(hujjat).tayyor(funksiya(){
$(".boyqush-karusel").owlCarousel();
});
Bu slayderning ishlashini ta'minlaydi, ya'ni sahifangiz yuklanganda tarkibni aylanib chiqadi. Xuddi shu kod bilan siz Owl Carousel-ni WordPress-ga ulashingiz mumkin. Ushbu plagin sozlamalari juda koʻp va xilma-xil boʻlib, endi siz eng muhim fikrlarni bilib olasiz.
Slayderning koʻrinishi va funksiyasini sozlash
Slayderni sozlash uchun qanday buyruqlardan foydalanishingiz mumkin? Avvalo, siz elementlar buyrug'ini eslab qolishingiz kerak, chunki u yordamida siz slayderingizda ma'lum miqdordagi slaydlarni o'rnatishingiz mumkin. Loop buyrug'i slayderni aylanish yoki oxirgi elementda aylantirishni to'xtatishni tanlash imkonini beradi. Bundan tashqari, Sichqoncha va teginish kabi bir nechta variantlarga ega Drag buyrug'i ham mavjud. Birinchi holda, siz slayderingizning elementlarini sichqonchani bosib ushlab turganda, ikkinchi holatda esa teginish yordamida (bu buyruq mobil qurilmalar uchun mos) surilishi mumkin bo'lishi mumkin. Yana bir muhim buyruq nav bo'lib, u navigatsiya strelkalarini ko'rsatish imkonini beradi. U bilan birga navigatsiya tugmalariga teg qo'shish uchun navText buyrug'idan foydalanishingiz mumkin. Bundan tashqari, siz sahifa yuklanganda slayderingizning slaydlarini avtomatik ravishda aylantirishni yoqish va o'chirish imkonini beruvchi avtomatik ijro etish buyrug'i haqida unutmasligingiz kerak. Ushbu buyruq yordamida siz shuningdek, autoplayTimeout funksiyasidan ham foydalanishingiz mumkin, buning uchun har bir slaydni avtomatik aylantirish orasidagi vaqtni aniqlaydigan millisekundlarda ma'lum qiymatni o'rnatishingiz mumkin.
Agar siz sezgir veb-dizayndan foydalansangiz, ya'ni sahifangiz dizayni qaysi qurilmada ko'rilayotganiga qarab avtomatik ravishda o'zgarib tursa, slaydlar sonini belgilash imkonini beruvchi javob berish buyrug'ini albatta eslab qolishingiz kerak. sahifa koʻrilayotgan ekran kengligiga qarab koʻrsatish uchun.
