Направите клизач за слике помоћу Јкуери за веб

Направићемо клизач развијен са Јкуери И Ниво Слидер, без потребе за додатком и који се можемо прилагодити нашој веб страници.

Да бисмо то урадили, користићемо Јкуери фрамеворк, који је библиотека за олакшавање рада са Јавасцрипт језиком. Библиотеку преузимамо са Јкуери.цом, такође је могуће да га можете користити повлачењем гооглеапис.цом помоћу овог кода на вашој хтмл страници за додавање ове скрипте.

Ако сте га преузели са странице Јкуери и поставили у директоријум на својој веб локацији, морате га поставити тако да указује на ваш домен као следећи пример:

Хајде сада да преузмемо Ниво клизач шта је Јкуери библиотека која ће нам омогућити креирање клизача. Одавде можете бесплатно преузети Ниво слидер. Распакирајте датотеку у нашем директорију, овдје можемо видјети структуру веба.

Сада ћемо креирати датотеку индек.хтмл за нашу веб страницу, у заглавље ћемо ставити библиотеке и стилске листове. Можемо видети библиотеку Јкуери, библиотеку нивоа клизача и сопствене стилске листове клизача Ниво, а затим их можемо прилагодити.

Сада ћемо створити контејнер за наше слике и за клизач, за ово и да бисмо га могли приказати, креиран је у оквиру истог индек.хтмл (Може се креирати и у ЦСС датотеци са стилом, како би одговарао сваки).
Почињемо са структуром веба и самог клизача, убацујући слике за приказ и поруку.

Затим активирамо додатак ниво Силдер и шаљемо му параметре о врсти ефекта, времену између анимације, паузирању између слике и још много тога што се може видети у документацији Ниво Слидер.

Уочимо да је ид активиран #силдер исти онај где дефинишем слике, па ако желим да имам више клизача мораћу да реплицирам исту структуру и активирам је за одговарајући ИД.
Резултат тестирања индек.хтмл у прегледачу је:

Овде видимо други слајд, испод видимо број слајдова 1 и 2, а подразумеване везе Претходна (претходна) Следећа (следећа) побољшаћемо приказ тога помоћу цсс -а.
Можемо променити бројеве у метке једноставно гледајући ниво-силдер.цсс

 .ниво-цонтролНав {тект-алигн: лефт; паддинг: 0; положај: релативан; з-индекс: 10; } .ниво-цонтролНав за {дисплаи: инлине-блоцк; видтх: 10пк; висина: 10пк; бацкгроунд: урл (буллетс.пнг) но-репеат; текстуална увлака: -9999пк; бордер: 0; маргина: 0 2пк; } .ниво-цонтролНав а.ацтиве {бацкгроунд-поситион: 0 100%; } .ниво-дирецтионНав за {дисплаи: блоцк; видтх: 30пк; висина: 30пк; бацкгроунд: урл (арровс.пнг) но-репеат; текстуална увлака: -9999пк; бордер: 0; горе: ауто; дно: -36пк; з-индекс: 11; } .ниво-дирецтионНав а: ховер {бацкгроунд-цолор: #еее; -вебкит-бордер-радиус: 2пк; -моз-бордер-радиус: 2пк; бордер-радиус: 2пк; } а.ниво-нектНав {бацкгроунд-поситион: 160% 50%; десно: 0пк; } а.ниво-превНав {бацкгроунд-поситион: -60% 50%; лево: ауто; десно: 35пк; } 

Резултат ове промене биће бројеви у облику мета са леве стране и везе као стрелице удесно.

Проширићемо функционалност приказивањем блока података на једном од слајдова

Модификујући код који већ имамо, мењамо пасус у слајду 2 за блок који ћу позвати са ид # блоцк2, затим креирам блок и примењујем скривени стил тако да буде видљив само када је слајд 2 активиран.
Резултат је следећи:

Такође можете ставити минијатурне слике. Друга могућност је да динамички генеришете садржај из мискл -а и пхп -а или га користите у ЦМС шаблону, као што су јоомла или вордпресс. Долази са многим додатцима који су већ програмирани, али са неколико редова кода можемо створити властиту компоненту. Надам се да вам је послужио.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен