Бібліятэка JQuery: слайдары для вашага сайта

З цягам часу і развіццём тэхналогій у галіне вэб-дызайну змяняюцца і запатрабаванні / патрабаванні карыстальнікаў да змесціва сайтаў. Калі раней гэта быў пераважна тэкставы кантэнт з невялікай колькасцю тэматычных малюнкаў, то сёння пераважнай з'яўляецца менавіта графічная складнік. Яна дазваляе ў сціснутыя тэрміны атрымаць максімум патрэбнай і карыснай інфармацыі, а не марнаваць час на чытанне доўгіх тэкстаў. У сувязі з гэтым усё больш папулярным і, больш за тое, неабходным элементам вэб-старонак становяцца слайдары. Яны ўяўляюць сабой блокі з змяняюцца ў іх кантэнтам - ад малюнкаў да спасылак. Сучасны спосаб дадання дадзенага вэб-аб'екта - выкарыстанне бібліятэкі JQuery. Слайдары, створаныя з дапамогай дадзенага інструмента, атрымліваюцца зручнымі, простымі ў выкарыстанні, ды і выглядаюць вельмі эфектна. Далей мы разгледзім, як зрабіць гэтыя элементы вэб-старонкі самастойна. Дзякуючы досыць вялікай колькасці стандартызаваных сродкаў, з'яўляецца магчымасць рэалізоўваць JQuery-слайдары розных тыпаў і разнастайнага напаўнення.

Як дадаць слайдэр на вэб-старонку?

Спосабаў дадання слайдэр-блокаў на старонку сайта некалькі. Часцяком нават не прыходзіцца пісаць HTML-код і ўнікаць у скрыпт. Існуе немалая колькасць бясплатных бібліятэк, якія прапануюць карыстальнікам ўжо гатовыя шаблоны, якія дазваляюць дадаць JQuery-слайдары на ваш сайт. Усё, што ад вас патрабуецца, - гэта скапіяваць яго ў зыходны код вашай вэб-старонкі і атрымліваць асалоду ад вынікам. Аднак у дадзеным выпадку магчымасці рэалізацыі вашых творчых фантазій абмежаваныя. Таму нялішнім будзе ўмець ствараць гэты элемент дызайну самастойна. Для гэтага трэба ведаць, як рэалізуецца просты слайдэр JQuery, а ўжо ўскладніць яго вы заўсёды зможаце, дадаўшы дадатковыя элементы ў код.

Ствараем слайдэр самастойна: код у HTML

Першае, з чаго варта пачаць, - гэта прапісаць разметку будучага слайдера.

1. Ствараем у HTML-файле блок Slideshow, які і будзе змяшчаць усе нашы слайды (малюнкі і інш.).
2. У яго закладваем спіс ul, кожны пункт якога будзе захоўваць асобны слайд.

Працуем у CSS

Далей ўжываем да яго патрэбныя характарыстыкі стылю, выкарыстоўваючы CSS-дакумент. Гэта неабходна, каб звярстаны намі слайдэр кантэнту JQuery працаваў карэктна і меў патрэбны выгляд. На дадзеным этапе перад намі стаяць наступныя задачы:

• зрабіць так, каб у блоку Slideshow адлюстроўваўся толькі адзін, патрэбны ў сапраўдны момант слайд (малюнак або кантэнт), а астатнія былі схаваныя;
• размясціць слайды адзін за адным (злева направа);
• зрабіць ul-кантэйнер, у якім захоўваюцца слайды, рухомым (налева і направа).

Для гэтага задаем ў CSS-файле наступныя параметры:

• для Slideshow: overflow-x - scroll, overflow-y - hidden:
• для ul: float - left.

Таксама можна задаць параметры шырыні (width), вышыні (height), фону (background) і інш.

Прапісваем код у JQuery

У HTML і CSS усе неабходныя змены ўнесены. Засталося справа за кодам JQuery, слайдары у якім павінны мець наступныя параметры:

• слайды павінны змяняць адзін аднаго з пэўным інтэрвалам часу;
• пры навядзенні курсора мышкі іх рух павінен спыняцца.

Для гэтага аб'яўляем дзве зменныя: slidewidth (роўная даўжыні слайда) і slidertime (вызначае перыяд змены слайдаў). Таймер будзе запускацца, калі старонка сайта цалкам загрузіцца. Да дадзеным параметры прывязваем дзеянне навядзення курсора мышкі на слайд (што спыняе змену слайдаў).

Абавязкова варта прапісаць даўжыню кантэйнера ul. Яна будзе роўная колькасці слайдаў, памножанай на даўжыню кожнага слайда.

Вставляем функцыю, якая адказвае за змену слайдаў. Вось і ўсё, можаце праверыць працу вашага слайдера.

заключэнне

У дадзеным артыкуле мы разгледзелі, як самастойна стварыць JQuery-слайдары для ўстаўкі на старонку свайго сайта. Выкарыстоўваючы прыклад рэалізацыі простага слайдера, вы зможаце прыдумляць свае ўласныя варыянты яго інтэрпрэтацыі, уносячы адпаведныя змены ў зыходны код. Гэта дасць магчымасць удасканаліць дызайн і зрабіць карыстанне вашым сайтам зручней для наведвальнікаў.