Инсталиране и конфигуриране на плъзгача JQuery lightslider

Преместването на плъзгача

Така че, нека да преминем към официалния сайт на плъзгача JQuery lightSlider.

След това отидете на връзката и свалите файла Изтегляне на последната версия на плъзгача. Моля, имайте предвид, че на главната страница на официалния сайт на настоящите инструкции за инсталиране и конфигуриране на плъзгача и страница Примери предлага разнообразие от примери за използването на плъзгача.

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

На следващо място, от папката CSS, копирате файла lightslider.css стилове, а също и да го свържете на нашия сайт:

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

Изходна плъзгача JQuery lightSlider на екрана

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

Ето как виждате слайда - това е отделна единица, Li, в рамките на които могат да бъдат поставени произволно съдържание.
По-късно през script.js файл, добавете следния код:

Това означава, че с помощта на JQuery библиотеката, изберете блока на бъдещето на плъзгача, т.е. ул единица идентификатор lightSlider, и призовават за метод изпълнение lightSlider (). В същото време на екрана, ще видим следното.

основни настройки

Сега нека да разгледаме основния плъзгач настройки lightSlider:

т - размера на слайдовете показвани на страницата;

slideMove - брой слайдове бъдат преместени в едно кликване на контролите;

скорост - скорост на анимационни ефекти, когато се движат в слайда;

slideMargin - външен разстояние между слайдове;

линия - линия на плъзгача в кръг;

RTL - превъртане плъзгача в обратен ред;

авто - автоматично пускане плъзгача.

Настройки се прехвърлят на плъзгача, буквално обект.

В този случай, ще видим в следния екран:

отзивчиви плъзгач

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

По този начин ние виждаме на екрана по следния начин (браузъра ширина 700 пиксела):

браузър, по-малка от 400 пиксела:

Интеграция с галерия с изображения lightGallery

Slider lightSlider работи много добре с галерията lightGallery изображения. Поради това, отидете на lightGallery връзката на официалния сайт, изтеглете библиотеката и галерията е подобен на свързване на необходимите файлове на сайта на тестова страница.

Html - оформление, което е необходимо за плъзгача:

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

След това добавете следния код:

Следните настройки се използват в кода:

галерия - при предаване на този параметър TRUE слайдер съдържание работи като слайдер на изображения;

thumbItem - брой на показаните миниизображения под оригиналното изображение;

thumbMargin - външен разстояние между картинка;

onSliderLoad - опция, която ви позволява да се опише функцията на манипулатора, за да се изпълнява, когато напълно заредена плъзгача на уеб страницата. Функцията приема като променлив параметър ел - е обект на избрания елемент, който се използва за работата на плъзгача. Кодът на събитието манипулатор, като се използва ел обект наричаме lightGallery, който започва работа в галерия lightGallery.

В този случай, ще видим в следния екран:

Ако кликнете на изображението в пълен размер - включена в работата на галерия lightGallery:

плъзгач Събития

Slider lightSlider допълнение към събитията onSliderLoad, поддържа няколко събития, които можете да използвате, за да се създаде функция манипулатор.

onBeforeStart - работи, преди да започне да се зареди плъзгача;

onBeforeSlide - задейства преди слайд шоу;

onAfterSlide - задейства след слайда;

onBeforeNextSlide - работи преди да преминете към следващия слайд;

onBeforePrevSlide - активира преди да се пристъпи към предишния слайд.

В този урок е завършен. Всичко най-хубаво и успешно кодиране.

Най-IT новини и уеб разработки на нашия канал Телеграма

Искате ли да научите как да направите фото галерии като FaceBook?

Сега през курса е да се създаде една красива fotogalarei като FaceBook!