Много хора в собствения си сайт искат да виждат плъзгачи - това са блокове, които показват един елемент от съдържание на екрана и след определен период от време променят това съдържание с друго. Естествено, всеки уеб разработчик може самостоятелно да създаде плъзгач, използвайки HTML, CSS и JavaScript, но това не винаги има смисъл. Ще отделите доста време, въпреки факта, че в интернет има доста готови решения, които улесняват живота ви много и правят сайта ви много по-привлекателен. Тази статия ще се фокусира върху едно от тези решения, наречено Owl Carousel. Настройката на този плъзгач е невероятно проста, така че дори начинаещ може да се справи с него. Сега ще научите какво представлява този плъзгач, както и други важни подробности. Настройването на Owl Carousel е процес стъпка по стъпка, така че трябва да изучавате този материал само в ред.
Какво е това и защо трябва да изберете този конкретен плъзгач?
Owl Carousel, чиято конфигурация ще бъде разгледана в тази статия, е много ефективен плъгин, който добавя красив и удобен плъзгач към вашата страница, което значително ще улесни работата ви в сайта,спестяване на много време, усилия и пари. Какви са предимствата на този конкретен плъгин, тъй като в мрежата има доста плъзгачи? Факт е, че този плъзгач ви предлага десетки опции за персонализиране, които ще ви позволят да направите страницата си уникална и неподражаема. Това е отзивчив плъгин, който ще работи на всички версии на браузъра и може лесно да бъде свързан към WordPress и други популярни CMS. Като цяло този плъзгач има много предимства, така че определено трябва да направите избор в негова полза. Въпреки това, преди да започнете да настройвате Owl Carousel, този плъгин все още трябва да бъде зареден.
Изтегляне
Настройването на Owl Carousel 2 не е възможно, ако не сте го изтеглили на вашия компютър и тъй като това е инструкция стъпка по стъпка, трябва да започнете от самото начало. Така че програмата може да бъде изтеглена с помощта на мениджъри на пакети, но това са усъвършенствани инструменти за разработчици, така че тук ще ви кажем как да получите този плъгин по стандартния начин. Трябва да отидете на официалния уебсайт на плъгина и да изтеглите най-новата му версия. След това всички изтеглени файлове трябва да бъдат прехвърлени в директорията на вашия сайт, като сте подготвили удобна папка, която носи същото име като самия плъгин. Имайте предвид, че този плъгин е в комплект с jQuery, така че трябва да имате и тази библиотека. Е, след като изтеглите този плъгин, ще трябва да се погрижите за следващата стъпка, която е да настроите плъзгача Owl Carousel 2.
CSS
BНастройките на Owl Carousel 1.3 остават почти същите като в по-новата версия 2, само се добавят нови функции. Основната информация обаче ще бъде същата, като се започне с добавянето на CSS към вашия документ. Така че първата стъпка е да добавите реда. Какво ти дава тя? Това е низ, който зарежда необходимите стилове в сайта за показване на плъзгача. Тук можете да завършите, като направите визуалната обработка сами. Има обаче по-удобно и по-бързо решение. Можете също да добавите ред, който също зарежда темата по подразбиране на плъзгача, което го прави незабавно готов за използване. Можете да редактирате някои от стиловете, за да направите плъзгача си по-уникален и различен и по-подходящ за вашето съдържание. Естествено, настройките на Owl Carousel на руски език биха били много удобни, но всеки човек, който създава уебсайтове, трябва да разбере, че не може без познания по английски.
JavaSpript връзка
Разбира се, плъзгачът няма да работи без JS, така че трябва също да се погрижите да включите подходящия файл, съдържащ необходимия код. За да направите това, трябва да вмъкнете ред код от документацията, но трябва да бъде изпълнено едно условие. Всеки знае, че JS е език за програмиране, който изпълнява всички команди по ред, така че в този случай трябва да добавите този ред код след реда, който добавя библиотеката jQuery към вашия документ. Повече с JS в случая с този плъзгач, нямате какво да правитенужда.
HTML кодиране
Е, свързахте плъзгача, сега е време да го проектирате и персонализирате. На първо място, трябва да напишете HTML кода, за да може плъзгачът изобщо да се появи на вашата страница. За да направите това, трябва да създадете контейнер, който ще съдържа слайдовете. Това може да стане с помощта на тага div, на който трябва да се присвои класа owl-carousel. Именно този клас гарантира, че всички стилове, свързани с плъзгача, ще бъдат активирани. Можете да напишете и друг клас - owl-theme. Ще ви бъде полезно, ако решите да използвате дизайна по подразбиране или да вземете стандартната версия на плъзгача като основа за по-нататъшна работа.
След това трябва да добавите всеки слайд в отделен контейнер с div таг. Разбира се, можете да използвате други тагове, но този маркер е най-добрият за плъзгачи.
Плъгин за обаждане
И последното нещо, което трябва да направите, за да имате готов плъзгач на вашия сайт, е да използвате този блок от код:
$(документ).готово(функция(){
$(".owl-carousel").owlCarousel();
});
Той гарантира, че плъзгачът започва да функционира, т.е. да превърта съдържанието, когато страницата ви се зареди. Със същия код можете да свържете Owl Carousel към WordPress. Настройките на този плъгин са многобройни и разнообразни и сега ще научите за най-важните точки.
Настройване на външния вид и функционалността на плъзгача
И така, какви команди можете да използвате, за да персонализирате своя плъзгач? На първо място, трябва да запомните командата items, защото с нея можете да зададете определен брой слайдове във вашия плъзгач. Командата loop ще ви позволи да изберете дали да завъртите плъзгача или да спрете превъртането на последния елемент. Има и командата Drag, която има няколко опции, като мишка и докосване. В първия случай можете да направите така, че елементите на вашия плъзгач да могат да се плъзгат с натиснатата мишка, а във втория случай с помощта на докосване (тази команда е подходяща за мобилни устройства). Друга важна команда е nav, която позволява показването на навигационни стрелки. Заедно с него можете да използвате командата navText, за да добавите етикети към бутоните за навигация. Също така, не трябва да забравяте за командата за автоматично възпроизвеждане, която ви позволява да активирате и деактивирате автоматичното стартиране на завъртане на слайдовете на вашия плъзгач, когато страницата се зареди. С тази команда можете също да използвате autoplayTimeout, за което можете да зададете конкретна стойност в милисекунди, която ще определи времето между автоматичното завъртане на всеки от слайдовете.
Ако използвате отзивчив уеб дизайн, тоест дизайнът на вашата страница автоматично се променя в зависимост от това на кое устройство се гледа, тогава определено трябва да запомните отзивчивата команда, която ви позволява да зададете броя на слайдовете за показване в зависимост от ширината на екрана, на който се разглежда страницата.
