ТЪРСИ

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

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

настройка на карусел с бухал

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

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

бухал 2 настройки

изтегляне

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

настройка на плъзгача бухалка 2

CSS

В бухалка на сова 1.3 настройки остават почти същите като в по-новата втора версия, добавени са само нови функции. Обаче основната информация ще бъде същата, като се започне с добавянето на CSS към вашия документ. Така че, първата стъпка е да добавите линия към HTML кода <link rel = "стилове" href = "owlcarousel / owl.carousel.min.css">, Какво ви дава? Това е низ, който зарежда необходимите стилове в сайта, за да покаже плъзгача. На това можете да завършите, извършвате себе си визуална обработка. Има обаче по-удобно и бързо решение. Можете също да добавите линия <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">който също зарежда стандартната темаплъзгач, който го прави готов за използване. Можете да редактирате някои стилове, правейки плъзгача по-уникален и необичаен, както и по-подходящ за вашето съдържание. Естествено настройките на бухалката на руски език биха били много удобни, но всеки, който създава уебсайтове, трябва да разбере, че той не може да направи без да знае английски.

настройка на бухалката на бухал

Връзка с JavaSpript

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

бухал 1 3 настройки

HTML форматиране

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

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

Покана за плъгин

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

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

$ ("owl-carousel") owlCarousel ();

});

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

настройка на карусел на бухал на руски език

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

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

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

  • Оценка: