Много хора на техния сайт искат да видят плъзгачи - това са блокове, които показват един елемент от съдържанието на екрана и след определен период от време променят това съдържание в друго. Естествено, всеки уеб програмист може сам да създаде плъзгач, използвайки HTML, CSS и javascript, но не винаги има смисъл. Ще прекарате много време, въпреки факта, че в интернет има много готови решения, които значително опростяват живота ви и правят сайта ви много по-привлекателен. В тази статия ще обсъдим едно от тези решения, наречено Owl Carousel. Създаването на този плъзгач е изключително просто, така че дори и начинаещият може да се справи с него. Сега ще разберете какво представлява този плъзгач, както и други важни детайли. Owl Настройките на въртележка се извършват стъпка по стъпка, така че трябва да изучавате този материал изключително по ред.

Какво е това и защо трябва да изберете този конкретен слайдер?

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

Изтегляния

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

CSS

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

JavaSpript връзка

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

Дизайн на HTML код

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

Извикване на плъгина

Е, последното нещо, което трябва да направите, за да се покаже вашият плъзгач на вашия сайт, е да използвате този блок код: $ (document) .ready (function () {$ (". бухал-въртележка ”) owlCarousel ();}); Гарантира, че плъзгачът ще започне да функционира, т.е. прелиства съдържанието, когато страницата се зарежда. С този код можете да свържете Owl Carousel към WordPress. Настройките на този плъгин са многобройни и разнообразни, а сега ще научите за ключовите моменти.

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

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