Кукумявка на сова: настройка и свързаност

Много хора на собствения си сайт искат да виждат плъзгачи - това са блокове, които показват един елемент от съдържанието на екрана и след определен период от време променят това съдържание на друго. Естествено, всеки уеб програмист може да създаде плъзгач сам, като използва HTML, CSS и jаvascript, но това не винаги има смисъл. Вие ще прекарате доста време, въпреки че има доста готови решения в Интернет, които значително улесняват живота ви и правят вашия сайт много по-привлекателен. В тази статия ще обсъдим едно от тези решения, наречено "Оулов карусел". Настройването на този плъзгач е невероятно проста, така че дори и начинаещ може да се справи с него. Сега ще разберете какво представлява този плъзгач, както и други важни подробности. Настройването на совалката се извършва стъпка по стъпка, така че трябва да изучавате този материал само в ред.

Какво е това и защо си струва да избирате този плъзгач?

Owl Carousel, настройка, която ще бъде разгледана в тази статия, е високо ефективен плъгин, който добавя към вашата страница хубав и удобен плъзгач, който е много по-лесно да се работи по сайта, ще спестите много време, усилия и пари. Какви са предимствата на този конкретен плъгин, защото в интернет има много плъзгачи? Факт е, че този слайдър телефон предлага няколко десетки опции за конфигуриране, които ви позволяват да се направи на страницата си уникален и неповторим. Тази адаптивна плъгин, който ще работи във всички браузъри, и то да се свързват лесно WordPress и други популярни CMS. Като цяло, предимствата на този плъзгач са много, така че определено трябва да направите избор в негова полза. Въпреки това, преди да започнете да настроите Carousel, този плъгин трябва да се изтегли.

изтегляне

Настройването на "Оувърлит 2" е невъзможно, ако не го изтеглите на компютъра си и тъй като това е инструкция стъпка по стъпка, струва си да започнем от самото начало. Така че, програмата може да бъде изтеглена с помощта на мениджърите на пакети, но това са разширени инструменти за разработчици, така че тук ще бъде обяснено как да получите тази приставка по стандартния начин. Трябва да отидете на официалния сайт на приставката и да изтеглите най-новата версия. След това всички изтеглени файлове трябва да бъдат прехвърлени в директорията на вашия сайт, подготвяйки удобна папка, която се нарича същата като приставката. Обърнете внимание, че този плъгин е свързан с jQuery, така че трябва да разполагате и с тази библиотека. Е, когато изтеглите този плъгин, ще трябва да направите следващата стъпка, а именно настройката на плъзгача на Owl Carousel 2.

CSS

В настройките на Owl Carousel 1.3 остават почти същите като в по-новата втора версия, но се добавят само нови функции. Обаче основната информация ще бъде същата, като се започне с добавянето на CSS към вашия документ. Така че, първата стъпка е да добавите линия към HTML кода . Какво ви дава? Това е низ, който зарежда необходимите стилове в сайта, за да покаже плъзгача. На това можете да завършите, извършвате себе си визуална обработка. Има обаче по-удобно и бързо решение. Можете също да добавите линия , който също така зарежда стандартната тема на плъзгача, което го прави моментално готова за използване. Можете да редактирате някои стилове, като превърнете плъзгача си в по-уникален и необичаен и по-подходящ за съдържанието си. Разбира се, настройките на руския кауза ще бъдат много удобни, но всеки, който създава уеб сайтове, трябва да разбере, че без да знае английски, не може да направи това.

Свързване на JavaSpript

Естествено, плъзгачът няма да работи без JS, така че трябва да се погрижите да свържете съответния файл, съдържащ необходимия код. За да направите това, трябва да поставите кода на кода от документацията, но при задължително спазване на едно условие. Всеки знае, че JS е език за програмиране, който изпълнява всички команди в ред, съответно, в този случай трябва да добавите този ред на код след реда, който добавя библиотеката jQuery към вашия документ. Повече с JS в случая на този плъзгач не е нужно да правите нищо.

Изработване на HTML-код

Е, включихте плъзгача, сега е време да го украсите и персонализирате. На първо място, трябва да напишете HTML код, така че плъзгачът да се показва на страницата ви. За да направите това, трябва да създадете контейнер, който ще съдържа слайдовете. Можете да направите това, като използвате маркера div, който искате да присвоите на класовия клас кукумявка. Този клас гарантира, че всички стилове, свързани с плъзгача, ще бъдат активирани. Също така можете да регистрирате друг клас - бухалка-тема. Това е полезно за вас, ако решите да използвате дизайна по подразбиране или да приемете стандартна версия на плъзгача като основа за по-нататъшна работа.

След това трябва да добавите всеки слайд в отделен контейнер с маркер div. Естествено, можете да използвате други маркери, но най-доброто нещо за плъзгачите е този маркер.

Обадете се на плъгина

Е, последното нещо, което трябва да направите, за да може сайтът ви да има готов плъзгач, е да използвате този блок от код:

$ (документ) .ready (функция () {

$ (".wl-carousel"). owlCarousel () -

}) -

Той гарантира, че плъзгачът ще започне да функционира, т.е. превъртайте съдържанието, когато страницата ви се зареди. С един и същ код можете да свържете "Соула" с WordPress. Настройките на тази приставка са многобройни и разнообразни, а сега ще научите най-важните точки.

Настройване на външния вид и функционалността на плъзгача

И така, кои команди можете да използвате, за да персонализирате плъзгача си? На първо място, трябва да запомните командата за елементи, тъй като с нея можете да зададете определен брой слайдове в плъзгача си. Командата за линия ви позволява да изберете дали да завъртите плъзгача или да спрете превъртането на последния елемент. Има и командата Drag, която има няколко опции, например мишка и докосване. В първия случай можете да направите така, че елементите на вашия плъзгач да могат да се превъртат с подрязана мишка, а във втория случай - с докосване (тази команда е подходяща за мобилни устройства). Друга важна команда е навигацията, която включва показването на навигационните стрелки. Заедно с него можете да използвате командата navText, като добавите етикети към навигационните бутони. Също така не трябва да забравяте командата за автоматично пускане, която ви позволява да включите и изключите автоматичното стартиране на слайдшоуто на слайдера, когато страницата е заредена. Заедно с тази команда можете да използвате и autoplayTimeout, за която можете да определите конкретна стойност в милисекунди, която ще определи времето между автоматично преобръщане на всеки слайд.

Ако използвате адаптивен уеб дизайн, който е на страницата си в промени в дизайна автоматично в зависимост от устройството, на което тя се разглеждат, тогава определено трябва да се помни, отзивчив екип, който ви позволява да определите броя на показаните пързалки, в зависимост от ширината на екрана, на който страницата се разглежда.