По-долу са някои общи тенденции и методи, които използват разработчиците:
- плъзгачи няколко нива - е най-новото попълнение на плъзгачите с паралакс ефект.
- Плъзгачи с ефекти Fade In / Out - тези плъзгачи не разполагат с контрол. Съдържанието ще изчезнат един по един.
- Ротаторния банери - плъзгачи, които се движат по кръгова траектория.
Има и други плъзгачи. Всеки тип на плъзгача е подходящ за определена цел. Ето защо, дизайнерът е доста важно да се избере плъзгача, който е подходящ за определена задача добре. Плъзгачи големи размери могат да бъдат използвани за показване на продукти или проекти, плъзгача по-малък размер, например, за показване популярни статии в блога. Тогава да поговорим малко за предизвикателствата разработчиците могат да се сблъскат, ако включите две костенурки на същата страница.
Недостатъците на използването на няколко JQuery плъзгачи
Както вече бе споменато по-нататъшни различни плъзгачи показват различни ефекти и могат да бъдат използвани за различни оформления. Има много недостатъци на използването на няколко плъзгачи на същата страница.
- Всеки плъзгач ще имаме много скриптове и CSS файлове. Значителен брой от скриптове и CSS файлове, от своя страна, ще се забави времето за зареждане на вашия сайт, който се появява на SEO.
- За различни плъзгачи могат да изискват различни версии на JQuery. Ето защо, JQuery-файлове ще бъдат дублирани.
- възможността за конфликт на кодовете с други плъзгачи.
Като се има предвид по-горе точки, то е препоръчително да се използва плъзгач на една страница. Но това не е задължително. Можете също да създадете различни дизайни с помощта на един плъзгач. За да направите това, просто трябва да изберете гъвкава слайдър, има определени умения за работа с JQuery и CSS, за да го създаде. В този урок ние считаме Rhino плъзгач, защото това е един от най-гъвкавите самите налични плъзгачи.
Въведение в Rhino Slider
Rhino Slider е двойна JQuery слайдер под лиценз MIT. За повече информация можете да прочетете тук. Следното изображение показва Rhino плъзгач.
За това как може да се използва този плъзгач, можете да прочетете в статията "Как да създадете формуляр с помощта RhinoSlider». В тази статия ще можете да видите как тя работи. В днешния урок, ние ще разгледаме как да създадете оформления с различна функционалност и един плъзгач.
Проектиране по поръчка навигация за плъзгача
Навигацията е, може би, един от най-важните части на плъзгача. Дори и да се създаде слайдер с автоматичната скорост интервал кадър предпочитан е все още да се осигури контрол на управлението на потребители. Като цяло, бутоните Следващ и Предишен до плъзгачите са много популярни. Rhino плъзгач, който се използва в този урок съдържа номерирани навигация, която напомня за страниране.
Ние съвсем спокойно може да промените външния вид на плъзгача. В този урок ще разгледаме как се променят основните навигационни стилове. Да започваме.
Определяне на бутоните за управление
Rhino плъзгач има три бутона за придвижване - следващата предишния слайд и страниране. Тези елементи са отделни CSS класове, така че те да могат да бъдат идентифицирани доста лесно.
Предишна Slide - рино-предишна
Следващ слайд - рино-следващата
Сега, има един бърз поглед на снимката по-долу, за да получите представа за това как ние ще се промени дизайна.
Нека сега разгледаме снимката по-долу, за да видите как ще се промени дизайна.
Стъпка 1 - Управление Предишна / Следваща
Както можете да видите, оформлението на бутони предишна / следваща е бил променен. Сега те стоят в средата на дъното и се поставя върху черен фон. Нека да разгледаме промяната в стила:
Създаване на преглед
Тази част е малко по-сложно. Тук ще разгледаме как да се направи кутия с prevshkami изображения, които ще бъдат поставени вместо номерация. Ние ще използваме комбинация от CSS и JQuery.
След като приложите CSS стилове, плъзгачът ще бъде, както следва.
Сега можете да видите визуализация на изображението, както е показано на фигурата по-долу.
Slider с вертикална преглед
По-долу са промените, които трябва да бъдат направени в стила да промени дизайна.
Използването на плъзгачите на същата страница
В предишните раздели, ние сме се променили от функционалността на плъзгача, като се използва същият плъзгача, променете CSS стилове на оригиналния Rhino плъзгача. Но когато на същата страница, трябва да използвате няколко плъзгачи, не можем да променим стила, както преди. За да се определи различните стилове за същите класове и елементи имаме нужда от алтернативен метод.
На първо място, ние трябва да се реализира Rhino Slider отделно чрез определяне на различни ID.