Өз сайтында көптөгөн адамдар сыдырмаларды көргүсү келет - бул экранда бир мазмун элементин көрсөткөн блоктор жана белгилүү бир убакыттан кийин бул мазмунду башкасына өзгөртөт. Албетте, ар бир веб-иштеп чыгуучу өз алдынча HTML, CSS жана JavaScript аркылуу сыдырма түзө алат, бирок бул дайыма эле мааниге ээ боло бербейт. Интернетте жашооңузду жеңилдеткен жана сайтыңызды алда канча жагымдуу кылган бир нече даяр чечимдер бар экендигине карабастан, сиз көп убакыт коротасыз. Бул макалада Owl Carousel деп аталган ушул чечимдердин бирине көңүл бурулат. Бул сыдырманы орнотуу өтө жөнөкөй, андыктан аны башталгыч да көтөрө алат. Эми сиз бул слайдер эмне экенин жана башка маанилүү деталдарды билесиз. Owl Carousel орнотуу этап-этабы менен жасалуучу процесс, андыктан бул материалды ирети менен гана изилдешиңиз керек.
Бул эмне жана эмне үчүн ушул сыдырманы тандашыңыз керек?
Owl Carousel, анын конфигурациясы ушул макалада талкууланат, бул абдан эффективдүү плагин, ал сиздин баракчаңызга кооз жана ыңгайлуу сыдырманы кошот, бул сиздин сайттагы ишиңизди бир топ жеңилдетет,көп убакыт, күч жана акча үнөмдөө. Бул плагиндин кандай артыкчылыктары бар, анткени Интернетте көптөгөн слайдерлер бар? Чындыгында, бул слайдер сизге ондогон ыңгайлаштыруу варианттарын сунуштайт, алар сиздин баракчаңызды уникалдуу жана кайталангыс кылууга мүмкүндүк берет. Бул браузердин бардык версияларында иштей турган жооп берүүчү плагин жана WordPress жана башка популярдуу CMS менен оңой туташса болот. Жалпысынан алганда, бул слайдер көп артыкчылыктарга ээ, ошондуктан, албетте, анын пайдасына тандоо керек. Бирок, Owl Carousel орнотуп баштоодон мурун, бул плагин дагы эле жүктөлүшү керек.
Жүктөп алуу
Owl Carousel 2ти орнотуу, эгерде сиз аны компьютериңизге жүктөй элек болсоңуз мүмкүн эмес жана бул этап-этабы менен нускама болгондуктан, эң башынан башташыңыз керек. Ошентип, программаны пакет менеджерлеринин жардамы менен жүктөп алса болот, бирок бул өркүндөтүлгөн иштеп чыгуучу куралдар, андыктан бул жерде биз бул плагинди стандарттуу түрдө кантип алуу керектигин айтып беребиз. Сиз плагиндин расмий сайтына кирип, анын акыркы версиясын жүктөп алышыңыз керек. Андан кийин, бардык жүктөлүп алынган файлдар сиздин сайттын каталогуна өткөрүлүп берилиши керек, плагиндин өзү менен бирдей аталыштагы ыңгайлуу папканы даярдаңыз. Бул плагин jQuery менен коштолгондугуна көңүл буруңуз, андыктан сизде ал китепкана да жеткиликтүү болушу керек. Бул плагинди жүктөп алгандан кийин, Үкү Карусель 2 сыдырмасын орнотуп жаткан кийинки кадамга кам көрүшүңүз керек болот.
CSS
БOwl Carousel 1.3 жөндөөлөрү дээрлик жаңы 2-версиядагыдай бойдон калууда, жаңы функциялар гана кошулат. Бирок, документиңизге CSS кошуудан баштап, негизги маалымат бирдей болот. Ошентип, биринчи кадам сызык кошуу болуп саналат. Ал сага эмне берет? Бул слайдерди көрсөтүү үчүн сайтка керектүү стилдерди жүктөөчү сап. Бул жерде сиз визуалдык иштетүүнү өзүңүз жасап бүтүрө аласыз. Бирок, бир кыйла ыңгайлуу жана тезирээк чечим бар. Сиз ошондой эле слайдердин демейки темасын жүктөй турган сапты кошо аласыз, аны ошол замат колдонууга даяр кылат. Слайдериңизди уникалдуу жана ар түрдүү жана мазмунуңузга ылайыктуу кылуу үчүн кээ бир стилдерди түзөтө аласыз. Албетте, орусча Owl Carousel жөндөөлөрү абдан ыңгайлуу болмок, бирок веб-сайттарды түзгөн ар бир адам англис тилин билбестен кыла албасын түшүнүшү керек.
JavaSpript туташуусу
Албетте, сыдырма JSсиз иштебейт, андыктан керектүү кодду камтыган тиешелүү файлды камтууга да кам көрүшүңүз керек. Бул үчүн, документациядан коддун сызыгын киргизишиңиз керек, бирок бир шарт аткарылышы керек. JS бардык буйруктарды ирети менен аткарган программалоо тили экенин баары билет, андыктан бул учурда документиңизге jQuery китепканасын кошкон саптан кийин коддун бул сабын кошушуңуз керек. Бул сыдырмада JS менен көбүрөөк, сизде эч нерсе жоккерек.
HTML коддоо
Сиз сыдырманы туташтырдыңыз, эми аны иштеп чыгууга жана ыңгайлаштырууга убакыт келди. Биринчиден, слайдер сиздин баракчаңызда такыр пайда болушу үчүн HTML кодун жазышыңыз керек. Бул үчүн, слайддарды камтыган контейнерди түзүү керек. Бул үкү-карусель классын ыйгаруу керек болгон div теги аркылуу жасалышы мүмкүн. Дал ушул класс сыдырмага тиешелүү бардык стилдердин жандырылышын камсыздайт. Сиз дагы бир класс жаза аласыз - үкү-тема. Эгер сиз демейки дизайнды колдонууну чечсеңиз же сыдыргычтын стандарттык версиясын мындан аркы иштөө үчүн негиз катары алсаңыз, бул пайдалуу болот.
Андан кийин ар бир слайдды div теги менен өзүнчө контейнерге кошушуңуз керек. Албетте, башка тегдерди колдонсоңуз болот, бирок бул тег слайдерлер үчүн эң жакшысы.
Чалуу плагини
Жана сайтыңызда даяр слайдер болушу үчүн эң акыркы нерсе бул код блогун колдонуу:
$(документ).даяр(функция(){
$(".owl-carousel").owlCarousel();
});
Бул сыдыргычтын иштей башташын камсыздайт, б.а. сиздин баракчаңыз жүктөлгөндө мазмунду сыдырыңыз. Ошол эле код менен сиз Owl Carouselди WordPressке туташтыра аласыз. Бул плагиндин жөндөөлөрү көп жана ар түрдүү, эми сиз эң негизги пункттарды билесиз.
Сыдырманын көрүнүшүн жана функцияларын орнотуу
Сыдырмаңызды ыңгайлаштыруу үчүн кандай буйруктарды колдоно аласыз? Биринчиден, сиз пункттар буйругун эстеп чыгышыңыз керек, анткени анын жардамы менен слайдериңизде слайддардын белгилүү бир санын орното аласыз. Цикл буйругу сыдырманы айлантууну же акыркы элементте сыдырууну токтотууну тандоого мүмкүндүк берет. Чычкан жана тийүү сыяктуу бир нече варианттары бар Сүйрөө буйругу дагы бар. Биринчи учурда, сиз аны сыдырмаңыздын элементтерин чычканды басып туруп, ал эми экинчи учурда тийүү жардамы менен (бул команда мобилдик түзмөктөргө ылайыктуу) сүрүп тургандай кылып жасай аласыз. Дагы бир маанилүү буйрук - навигация жебелерин көрсөтүүгө мүмкүндүк берген nav. Аны менен бирге, сиз навигация баскычтарына энбелгилерди кошуу үчүн navText буйругун колдоно аласыз. Ошондой эле, сиз автоматтык түрдө ойнотуу буйругун унутпашыңыз керек, ал барак жүктөлгөндө слайдериңиздин слайддарын автоматтык түрдө айлантууну иштетүүгө жана өчүрүүгө мүмкүндүк берет. Бул буйрук менен, сиз ошондой эле autoplayTimeout колдонсоңуз болот, ал үчүн ар бир слайддын автоматтык түрдө айлануусу ортосундагы убакытты аныктай турган миллисекунддарда белгилүү бир маани орното аласыз.
Эгер сиз жооп берүүчү веб-дизайнды колдонсоңуз, башкача айтканда, баракчаңыздын дизайны ал кайсы түзмөктө каралып жатканына жараша автоматтык түрдө өзгөрөт, анда слайддардын санын коюуга мүмкүндүк берген жооп берүү буйругун сөзсүз эстеп калууңуз керек. барак каралып жаткан экрандын кеңдигине жараша көрсөтүү үчүн.
