Направи плъзгач за сайта

Owl въртележка - JQuery Carousel - Документация

Plug-in за сайта: owlgraphic.com/owlcarousel/ (като на това писание - не работи)

Стъпка 1. Изтеглете и да се свържете въртележката

Тъй като домейна на сайта, с документация за тази въртележка в момента е (както и на това писание) не работи, ние ще работим с GitHub хранилище, където можете да изтеглите кода и вижте документацията на приставката.

Ходим на хранилището на въртележка и кликнете върху зеления бутон «клонинг или да изтеглите». След това кликнете върху «Изтегли ZIP». Сега имате файловете за свързване към проекта.

Разопаковайте файловете са вътре в папка, наречена «сова въртележка» и въведена в своя проект в рамките на «LIBS» папка. Имате място може да бъде различна, но ще използвам в урока е то.

Свързване на въртележката. В заглавната страница, а вътре маркер глава свържете CSS стилове:

В края на страницата, преди затварянето свържете JQuery библиотеката (аз използвах позоваване на JQuery, който се намира в Интернет на адрес Googleapis място)

В тази стъпка ние сме свързани въртележката плъгин файлове на нашия уебсайт.

Етап 2: Получаване на HTML маркиране

Създаване на HTML маркиране за слайдовете за нашата въртележка.

Основните правила са както следва:

Трябва да се създаде общ контейнер, който ще бъде на базата на нашите въртележка пързалки. Имаме контейнер
.
. Задайте му клас клас = "сова-въртележка" да прилагат стилове на въртележка библиотека. И ние го даде ИД = "slider_container". Id стойност може да бъде всеки. Според него, ние ще се свържем и се обадете на (да тече) ни въртележка.

Във вътрешността на контейнера, да създадете блок да се плъзга. те трябва да имат една и съща структура. Такива като имаме това е само на снимки, така че ние поставяме тук 6 изображения. Естествено броя на кадрите може да бъде всеки. Ако искате да поставите в слайд не само изображението, но също така и текст, както и други елементи, всеки слайд ще трябва да приключи празен Разделение.

В този случай, тя ще изглежда така:

Но ние правим само за снимките, така че тази обява (маркирането) няма да използва.

Етап 3: Call (инициализация) плъгин

Сега ние трябва да изпълните нашата въртележка. С други думи, трябва да се каже, че плъгин DIV с идентификатор = »slider_container» е нашият контейнер въртележка. За да направите това, main.js файл, уточни следното:

Изграждането на $ (документ) .ready (функция () <…>); тук, това означава, че кодът вътре в нея да работи, когато библиотеката JQuery е зареден и на целия HTML страницата. След това ще оспори въртележка плъгин - това е, на което е написано вътре.

оспори въртележката се извършва след строителство: $ ( "# slider_container") owlCarousel () ;. Това е избор елемент контейнер за въртележката, ние я имаме #slider_container т.е. на Разделение ИД = # slider_container. и по-нататък към него се завинтва въртележка.

В тази стъпка връзка въртележка може да бъде завършен, тъй като сега той е свързан и работи.

Стъпка 4. Създаване на въртележка

При свързване на щепсела, можем да зададем въртележка някои настройки, които са описани в документацията. Това се извършва чрез прехвърляне на параметрите на обектите с щепсел инициализация. Това е, както следва:

Обява долу Донесох избирателно някои от настройките. Пълен списък на наличните параметри и тяхното значение може да се намери в документацията.

Параметри като елементи да определят колко пързалки ще бъдат показани на различен размер на екрана. параметър AutoPlay определя дали въртележката самата автоматично преминете през слайдовете. stopOnHover - дали за автоматично спиране на възпроизвеждането на поставяне на курсора на слайда или не.

Параметрите за навигация - стрелки показващи да преминат пързалки. transitionStyle - специален ефект на прехода. За да я накара да работи, трябва да се свържете капачка owl.transitions.css файл.

Параметрите имена на буквите има.

Стъпка 5: Персонализиране на външния вид на

Подобно на този пост? Сподели с приятелите си, те ще оценят:

Сподели във Facebook