Js պատկերների սլայդեր: Պատկերների համար անվճար JQuery Sliders օրինակներ

այն Հարմարվող հպում Slider- ը գրվել է jQuery- ի վրա: Այս plugin- ի շարժիչում օգտագործվում են CSS3 անիմացիաներ, բայց միեւնույն ժամանակ, ֆուտբոլներ տրամադրվում են զննարկիչների ավելի հին տարբերակներով: Glide.js- ը պարզ է եւ հեշտ:

Թեթլ

1. Միացրեք jQuery- ը

Լրացուցիչի միակ կախվածությունը JQuery- ն է, որը մենք պետք է միայնակ կապվենք.

2. Միացրեք սահադաշտը:

3. Ավելացնել HTML

Միացրեք հիմնական ոճերը:

Գլխավորեք Slider- ի կառուցվածքը:

4. Նախաձեռնություն

Գործարկել լռելյայն պարամետրերով ...

... կամ մեղմացրեք այն ձեր տակ

Կարգավորումներ

Առկա պարամետրերի ցուցակ.

Պարամետր	Լռելյայն արժեք	Մի տեսակ	Նկարագրություն
Ավտոմատ միացում	4000	int / bool	Ավտոմատ պայմանագիր (կեղծ անջատման համար)
Հմայք:	Ճիշտ.	Բոցեր	Կասեցրեք ավտոմատ պայմանագիրը, երբ մկնիկը սայթաքեք սլայդերի վրա
Անիմացիա	500	int.	!!! Այս տարբերակը աշխատում է, եթե զննարկիչը չի աջակցում CSS3- ին: Եթե \u200b\u200bCSS3- ն աջակցում է զննարկչի կողմից, ապա այս պարամետրը պետք է փոխվի V.CSS ֆայլի միջոցով !!!
Ռադիո	Ճիշտ.	bool / լարային:	Show ուցադրել / թաքցնել / կցել նետերը: True իշտ է սլայդերի կոնտեյներով նետերը ցուցադրելու համար: Կեղծ թաքցնելու համար: Կարող եք նաեւ նշել դասի անվանումը (օրինակ. «Կլաս-անուն») `հատուկ HTML կոդը կցելու համար
Ռադիոերթապակ	Սահիչ-նետեր:	Լար	Դաս, որը բեռնարկղ է նշանակելու նետերով
arrowmainclass.	Սլայագործ-սլաք	Լար	Հիմնական դաս բոլոր նետերի համար
arrowrightclass	slider-Arrow - Right իշտ է	Լար	Դասը ճիշտ սլաքի համար
arrowleftclass	slider-Arrow - ձախ	Լար	Ձախ սլաքի դաս
arlowrightext	Հաջորդ	Լար	Տեքստի ճիշտ սլաքի համար
arrowlefttext	նախնական	Լար	Ձախ սլաքի տեքստ
Նավ	Ճիշտ.	bool / լարային:	Show ուցադրել / թաքցնել / կապել նավարկությունը սլայդով: True շմարիտ ցուցադրմանը: Կեղծ թաքցնելու համար
Նավկենիչ	Ճիշտ.	Բոցեր	Նավիգացիա կենտրոնների համար
Նավլաս:	slider-Nav.	Լար	Դաս Նավիգացիայի բեռնարկղի համար
navitemclass	slider-Nav__item.	Լար	Դաս Նավիգացիոն տարրի համար
navcurrentitemclass	slider-Nav__item - ընթացիկ	Լար	Դասի ներկայիս նավիգացիայի տարրերի համար
Ստեղնաշար:	Ճիշտ.	Բոցեր	Ոլորեք սլայդը, երբ սեղմում եք ձախ / աջ կոճակները
touchdistance.	60	int / bool	Աջակցություն հպումին (հպում): Սուտ այս հատկությունը անջատելու համար:
Նախկինում:	Գործառույթ () ()	Գործառույթ:	Սոլլարներ, որոնք կսկսվեն plugin- ի նախաստորագրումից առաջ
Հետագա	Գործառույթ () ()	Գործառույթ:	Սոլլարներ, որոնք կսկսվեն plugin- ի նախաստորագրվելուց հետո
buforetransition	Գործառույթ () ()	Գործառույթ:	Skolkk, որը կսկսվի սահնակը պտտվելուց առաջ
Հետագա փորձարկում:	Գործառույթ () ()	Գործառույթ:	Squake, որը կսկսվի սահող պտտվելուց հետո

API.

API- ն օգտագործելու համար գրեք սահիկ դեպի փոփոխականը:

Var glide \u003d $ (". Slider"): Սահադաշտ (): Տվյալներ («API_GLIDE»);

Այժմ API մեթոդները մատչելի են ձեզ համար:

Glide.jump (3, Console.log ("Wooo!"));

.Մուրենտ () - վերադարձնում է ընթացիկ կողմի քանակը
.Play () - Սկսել ավտոմատ պայմանագիրը
.Պաուս () - Դադարեցրեք ավտոմատ պայմանագիրը
.Next (հետադարձ կապ) - սկուռի առաջ ձուկ
.prev (հետադարձ կապ) - սահնակ Վերադառնալ
.Jump (Հեռավորություն, հետադարձ կապ) - անցնել հատուկ սլայդ
.Նավ (թիրախ) - Նավիգացիա կցեք որոշակի կետի (օրինակ, «Մարմին», «. Կլաս»)
.Rrows (թիրախ) - նետերը կցեք որոշակի տարրի (օրինակ `« Մարմին »,« #ID »)

Պարզ, թեթեւ քաշ (21KB սեղմված ձեւով) Սահիչը գրված է մաքուր JavaScript- ի վրա, որը չունի որեւէ կախվածություն, այսինքն: Գործում է առանց jQuery- ի:

Փորձարկվել է հետեւյալ զննարկիչներում.

Chrome 26.0.
Firefox 20.0.
Safari 5.1.7
Այսին, 10:
Օպերա 16.0.

IE8 / 9-ի թերի աջակցությունն է (ոչ մի ազդեցություն):

Հատկություններ

Կարող եք ավելացնել անսահմանափակ քանակությամբ սահիկներ էջ, նույնիսկ մյուսը դնել:
Փոխում է չափերը կախվածությունից բովանդակությունից, բայց հնարավոր է արգելել:
Նավարկելով ստեղնաշարի վրա - Երբ կուրսորը սլայդի վրա է, կարող եք սլայդերը նետերով անցնել:
Բջջային հպման միջոցառման աջակցություն:

Կապ

Նախքան փակման պիտակը Դուք պետք է միանաք slidr.js. կամ slidr.min.js. ֆայլ:

HTML մակնշում

slidr.js. Այն կարող է աշխատել ցանկացած ներկառուցված, ներկառուցված բլոկով, արգելափակել իրերը, որոնք ունեն ID հատկանիշ: Թույլատրվում է օգտագործել առաջին մակարդակի ցանկացած դուստր տարրեր տվյալների-Slidr ատրիբուտով, օրինակ.

Խնձոր:
Բանան:
Կոկոս

Խնձոր:

Բանան:

Կոկոս

JavaScript.

Միացումից հետո slidr.js. Գլոբալ Slidr օբյեկտը հասանելի կլինի: Slidr ստեղծելու ամենահեշտ ձեւը.

Slidr.create ("Slidr-ID"). Սկիզբ ();

Զանգահարեք բոլոր պարամետրերի առաջադրանքով.

Slidr.Create («Slidr-ID» (Հետո, գործառույթ (E) (Console.Log ("IN:" E.In.slidr);), նախքան. «Out» (Consout. + E.out.slidr);), breadcrumbs. Ճշմարիտ, վերահսկում, «անկյուն», ուղղություն, կեղծ, ստեղնաշար, «# 222», «խորանարդ "." 0.5S հեշտությամբ "), հպում. True շմարիտ, անցում,« խորանարդ »)): Սկսել ();

Կարգավորումներ

Slidr.js- ի համար առկա բոլոր պարամետրերը ներկայացված են ստորեւ բերված աղյուսակում:

Պարամետր	Մի տեսակ	Լուռ:	Նկարագրություն
Հետո	Գործառույթ:		Հետադարձի գործառույթը գործառույթ է սահում փոխելուց հետո
Նախքան.	Գործառույթ:		Հետադարձի գործառույթը գործառույթն է, նախքան սլայդը փոխելը
Հացաթխում.	Բոցեր	կեղծ	Show ույց տվեք հացի փշրանքները, սլայդները վերահսկելու համար: Ճիշտ կամ սխալ.
Վերահսկում:	Լար	Սահման:	Ռադիո տեղադրություն, սլայդները վերահսկելու համար: Սահման, անկյուն կամ ոչ մեկը:
Ուղղություն:	Լար	հորիզոնական	Լռելյայն ուղղություն `նոր սլայդների համար: Հորիզոնական կամ ժամ, ուղղահայաց կամ v.
Մոռացվել	Բոցեր	Ճիշտ.	Միացրեք մթնեցման ազդեցությունը սլայդերի փոփոխության համար (մարել / դուրս): Ճիշտ կամ սխալ.
Ստեղնաշար:	Բոցեր	կեղծ	Միացրեք քաղցրավենիքի հերթափոխը `օգտագործելով ստեղնաշարը: Ճիշտ կամ սխալ.
Արտահոսք:	Բոցեր	կեղծ	Միացրեք արտահոսքը սահնակով բլոկի համար: Ճիշտ կամ սխալ.
Դադար	Բոցեր	կեղծ	Մի փոխեք սլայդները ինքնաբերաբար, երբ մկնիկը սավառնեք (պետք է սկսեք ավտոմատ ()): Ճիշտ կամ սխալ.
Թեման:	Լար	#Fff.	Վերահսկիչ տարրերի գույնը սահում է (հաց փշրանքներ եւ նետեր): #hexcode կամ rgba (արժեք):
Ժամանակաշրջան	Օբյեկտ	{}	Դիմելու համար հարմարավետ անիմացիոն ժամկետներ: («Անցում». «Ժամանակ»):
Հպում	Բոցեր	կեղծ	Հպեք հպման կառավարումը բջջային սարքերի վրա: Ճիշտ կամ սխալ.
Անցում	Լար	գծային	Սլայդների փոփոխության ազդեցությունը: Խորանարդ, գծային, մարում կամ ոչ մեկը:

Հակադարձ զանգի առանձնահատկությունները հետեւյալ տվյալները ստանալուց հետո եւ առաջ ստանալը.

(ID. «Slidr-ID», - ում, (EL: # , Slidr: "Data-Slidr-in", Trans. "Transition-in", Dir. "Ուղղություն-in"), դուրս. (El: # , Slidr. «Տվյալներ-slidr-out», տրանս. «Անցում-դուրս», ռեժ. Ուղղություն - դուրս »))

Slider.js գլոբալ API.

Գլխավոր սլայդ Նամակներ տարածքը տրամադրում է հետեւյալ գործառույթները.

/ ** * ընթացիկ տարբերակը * @return (լարային) Major.minor.patch. * / գործառույթի տարբերակ () (); / ** * Առկա անցումային էֆեկտներ: * @return (զանգված) անցումային. * / Գործառույթի անցում () (); / ** * Ստեղծում եւ վերադառնում է Slidr: * Նույն տարում երկու անգամ զանգահարելով այս գործառույթը կվերադարձնի արդեն ստեղծված Slidr օբյեկտը: * @Param (լարային) տարրական ID Slidr- ի համար: * @Param (օբյեկտ \u003d) opt_settings պարամետրեր սահիկի համար: * / Գործառույթների ստեղծում (ID, OPT_SETTINGS) ();

Slider API

// Slidr նախաստորագրում իր var s \u003d slidr.create պարամետրերով («Slidr-Api-Demo» պարամետրեր (Breadcrumbs: True իշտ է, արտահոսք)); // ավելացնել հորիզոնական սլայդները ստանդարտ անցումային էֆեկտով: // «Մեկ» զանգվածի կրկնօրինակման տարրը վերջում վերելակների համար Slidr // Սահեցրեք անսահման s.add- ի սլայդները («մեկ», «երկու», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք», «երեք»: // Ուղղահայաց սահիկ ավելացնել «խորանարդի» անցումային էֆեկտով: S.ADD («V», [«Հինգ», «Չորս», «երեք», «հինգ»], «խորանարդ»); // Գործարկել սլայդը: S.start ();

Կարճ գրառում

Var s \u003d slidr.create ("Slidr-Api-Demo", (Breadcrumbs. True շմարիտ, արտահոսք. True) .Add ("V", [«Հինգ», «Չորս», «երեք», «հինգ»], «խորանարդ»):

Slidr.js API գործառույթի ամբողջական ցուցակը ներկայացված է ստորեւ:

/ ** * Սկսեք Slidr- ը: * Ավտոմատ կերպով գտնում է սահիկ ստեղծելու համար, եթե ոչինչ չի ավելացվել նախքան զանգը սկսելը (): * @Param (string) opt_start `Data-Slidr` ID- ն սկսելու համար: * @return (սա) * / Function Start (opt_start) (); / ** * Ստուգեք `մենք կարող ենք սահել: * @Param (լարային) Հաջորդը մի ուղղություն («վեր», «ներքեւ», «ձախ», «աջ») կամ «տվյալների սլաք» ID: * @return (Boolean) * / գործառույթը չեղյալ հայտարարելու համար (հաջորդ) (); / ** * Սլայդ! * @Param (լարային) Հաջորդը մի ուղղություն («վեր», «ներքեւ», «ձախ», «աջ») կամ «տվյալների սլաք» ID: * @return (սա) * / գործառույթ սլայդ (հաջորդ) (); / ** * Ավելացնում է մի շարք սլայդներ: * @Param (լարային) ուղղություն `հորիզոնական || H` կամ «ուղղահայաց || v` * @Param (Array) ID- ների ցուցակը `Slidr- ին ավելացնելու համար: Սլայդերը պետք է լինեն սլայդի կամ օգտագործման միջեւ անցում կատարելու համար: * @param (string \u003d) Լռելյայն. * @Param (Bolean \u003d) Opt_overwrite, արդյոք վերաշարադրեք առկա սլայդերի քարտեզները / անցումները, եթե բախումներ լինեն: * @return (սա) * / ** * ինքնաբերաբար Հաջորդ սլայդը որոշակի ժամանակաշրջանից հետո: Զանգերը սկսվում են () եթե արդեն կանչված չէ: * @param (int \u003d) Opt_MSEC- ը յուրաքանչյուր սլայդի անցումից: * @param (string \u003d ) Opt_direction «վեր», «ներքեւ», «ձախ» կամ «ճիշտ»: Լռելյայն «աջ». * @Param (string \u003d) star at (միայն աշխատում է Կանչված է STROTTR): * @return (սա) * / գործառույթ ավտոմատ (Opt_MSEC, Opt_Direction, opt_start) (); / ** * Դադարեցրեք ավտոմատ անցումը, եթե այն միացված լինի: * @return (սա) * / գործառույթի դադարեցում () (); / ** * սահմանել պատվերով անիմացիոն ժամկետներ: * @Param (string | օբյեկտ) անցում կամ անցումային անուն (այսինքն `« խորանարդ »), կամ ա (« անցում ») օբյեկտ: * @Param (string \u003d) opt_timing նոր անիմացիոն ժամկետը (I.E "0.5S հեշտությամբ"): Անհրաժեշտ չէ, եթե անցումը օբյեկտ է: * @return (սա) * / գործառույթի ժամկետ (անցում, opt_timing) (); / ** * միացրեք հացաթուխները: * @return (սա) * / ֆունկցիա Breadcrumbs () (); / ** * միացման հսկիչները: * @param (string \u003d) opt_scheme Toggle opt_scheme միացրեք / անջատեք, եթե ներկա չէ, այլապես փոխեք դասավորությունը: «Սահման», «անկյուն» կամ «Ոչ»: * @Return (սա) * / գործառույթի վերահսկում (Opt_Scheme) ();

Ոլորման էջը սլայդների փոփոխության ընթացքում

Այս տհաճ սխալը հայտնվում է որոշ զննարկիչներում: Շտկել այն: Դուք պետք է ոճին ավելացնեք:

Մարմինը (արտահոսք. Թաքնված;)

Դինամիկ չափի փոփոխություն

Ինքը, Սլիդրը, «հասկանում է», թե սայթաքողի չափը փոխելու պատկերով: Եթե \u200b\u200bսլայդլ բլոկը նշված է, Slidr- ը ավտոմատ կերպով չի փոխի դրանք: Եթե \u200b\u200bնշվում են նվազագույն եւ նվազագույն հատկություններ, սլայդը կփոխի իր չափը բովանդակության տակ, հաշվի առնելով այդ արժեքները: Հակառակ դեպքում չափի սահմանումը ինքնաբերաբար կլինի:

Ավտոմատ չափի փոփոխություն

Լավ

Հիասքանչ:

անհավատալի

Ստատիկ չափսեր

Լավ

Հիասքանչ:

անհավատալի

Վերահսկիչ տարրեր Slidr.

Վերահսկիչների նշումը հաջորդը.

Դուք կարող եք հարմարեցնել սլայդերի կառավարման ցանկացած տարր, օգտագործելով CSS ընտրողների.

Մի կողմ. Sliddidr-Control.right (Լայնությունը `50px! Կարեւոր; բարձրությունը, 50px! Կարեւոր; կարեւոր; -25px! Կարեւոր; 25px; URL ("/ Ստատիկ / պատկերներ / arrow_right.png") 14px 13px ոչ կրկնող սեւ; անթափանցիկություն. 0.4;) մի կողմ. սավառնել (անթափանցիկություն, 1;)

«Arrow» հսկողությունը իրականացվում է կեղծ ընտրողի միջոցով. Հետո, այնպես որ այն թաքցնելու համար օգտագործեք հետեւյալ ծածկագիրը.

// Թաքցնել մեկ սլաքը մեկ հսկիչի մեջ: Մի կողմ .Slidr-Control.right. Դրանից հետո (սահմանային գույնը, թափանցիկ! Կարեւոր;) // թաքցրեք բոլոր նետերը մեկ վերահսկիչի մեջ: Մի կողմ .Սլդիդ-հսկողություն. Հետո (սահմանային գույնը, թափանցիկ! Կարեւոր;) // թաքցրեք բոլոր սլայդերը: Մի կողմ .Սլդիդ-հսկողություն. Հետո (սահմանային գույնը, թափանցիկ; կարեւոր;)

Հացաթխում է slidr.

Հացաթխման փշրանքներն ունեն պարզ HTML նշում: Յուրաքանչյուր UL նշում է ամբողջ լարը, եւ յուրաքանչյուր լի առանձին հացի փշրանք.

Հացի փշրանքների ոճավորում CSS- ով.

// Անհատականացրեք դիրքը, չափը, սահմանի գույնը եւ ֆոնի գույնը: Մի կողմ (աջ, 50%! Կարեւոր; -41PX! Կարեւոր;) մի կողմ. Սանձազերծում. 15px! Կարեւոր; Li.normal (սահմանի գույնը `սպիտակ! Կարեւոր;) մի կողմ .Slidr-breadcrumbs li.Aictive (Գույնը, սեւ!

Լիցենզիա

Այս ծրագիրը կարող է ազատորեն օգտագործել MIT լիցենզիայի ներքո:

Անհրաժեշտ է պարզ սահնակ, ավտոմատ պտտվելով: Բերեք ...

Սլայդերի աշխատանքի նկարագրությունը:

Սլայդերը կկառուցվեն տողում, եւ որոշակի ժամանակ անց կշարունակվի:

Կարմիր շրջանակը ցույց է տալիս սլայդի տեսանելի մասը:

Սլայդերի վերջում անհրաժեշտ է կրկնօրինակել առաջին սլայդը: Անհրաժեշտ է, երրորդ սահիկից պտտվելը ապահովելու համար: Պետք է նաեւ վերջնական սլայդը ավելացնել սկզբին `հակառակ ուղղությամբ պտտվելու հնարավորության համար` առաջին սլայդից մինչեւ երրորդ: Ստորեւ ներկայացված է սահիկի աշխատանքը առաջ շարժման ուղղությամբ:

Երբ սլայդը ավարտվում է, սահիկի սկզբից դրա պատճենը անմիջապես տեղադրվում է վերջին սլայդի տեղում: Ցիկլը այնուհետեւ կրկին կրկնվում է: Սա ստեղծում է անսահման սահիկի պատրանք:

HTML մակնշում

Սկսելու համար մենք կատարում ենք մի պարզ սահնակ, ավտոմատ պտտվելով: Իր աշխատանքի համար ձեզ հարկավոր են երկու բեռնարկղ: Առաջինը կներկայացնի սահիկի տեսանելի տարածքի չափը, իսկ երկրորդը անհրաժեշտ է սահող սարքեր տեղավորելու համար: Սլայդերի նշումը կունենա հետեւյալ ձեւը.

> >

Styles սլայդեր

.Slider-Box (Լայնություն, 320px; Բարձրություն, 210px; արտահոսք. թաքնված;). սողուն, 210px; 0;)

Container.Slider-Box- ը սահմանում է սահիկի չափերը: Օգտագործելով արտահոսքը. Թաքնված գույքը, բոլոր տարրերը թաքնված են, որոնք ներառված չեն տարրի ներսում գտնվող տարածքում:

Բեռնարկղի համար: Սահիչը մեծ լայնություն է սահմանվում: Անհրաժեշտ է, որպեսզի բոլոր սլայդները տեղավորվեն դրա մեջ:

Սլայդերը հավասարեցված են բոցով. Ձախ գույքը:

Ստորեւ ներկայացված է սահող բլոկների սխեմատիկ վայր:

Սցենար

Սլայդ շարժումը կկատարվի բեռնարկղի մարժայի ձախ գույքի սահուն փոփոխության միջոցով: Սահիչ:

$ (Գործառույթ () (Var Width \u003d $ (". Սլիրիկ-տուփ") .Width (); // Լայնության սահող: ընդմիջում \u003d 4000; // սլայդերի փոփոխության ընդմիջում: $ (". Slider IMG: Վերջին") .Լոն () .Պրեպտոն (".slider"); // Վերջին սլայդի պատճենը տեղադրվում է սկզբում: $ () .eq (1) .Clone () .Pendto (".slider"); // Առաջին սլայդի պատճենը տեղադրվում է վերջում: // բեռնարկղ: Սահիչ տեղաշարժերը թողել են մեկ սլայդի լայնությունը: setinterval ("անիմացիա ()", ընդմիջում); // անիմացիոն () գործառույթը սկսվում է կատարել սլայդերի հերթափոխը: )); Գործառույթի անիմացիա () (var margin \u003d parseint ($ (". Սլայդեր") .CSS ("լուսանցք")); // ընթացիկ բլոկ օֆսեթ .ս Լայնություն \u003d $ (". Սլայդեր-տուփ") .Width () // Լայնության սահող: Slidersawount \u003d $ (". Սլայդեր") .Գիտաններ (). // Սլայդերում սլայդների քանակը: եթե (մարժա! \u003d (- Լայնություն * (Slidersamount- 1))) // Եթե ներկայիս սլայդը վերջինը չէ, (մարժա \u003d մարժա լայնություն; // մարժայի արժեքը նվազում է սլայդի լայնությանը: ) Ուրիշ ( // Եթե վերջին սլայդը ցուցադրվում է, $ (". Սլայդեր") .CSS («Մարգին-ձախ», - լայնություն); // այնուհետեւ արգելափակում .սլիդը վերադառնում է սկզբնական դիրքի, լուսանցք \u003d - Լայնություն * 2; ) $ (". Սլայդեր") ..Animate ((լուսանցք. Մարժիր), 1000); // Block.Slider տեղափոխություններ, որոնք մնացել են 1 սլայդ: } ;

Արդյունքում պարզվեց, որ պարզ սահնակ է `անսահման ավտոմատ պտտվելով:

Ժամանակը դեռ կանգ չի առնում նրա հետ եւ առաջադիմում է: Սա ազդել է ինտերնետի տարածքների վրա: Արդեն կարող եք տեսնել, թե ինչպես է կայքերի տեսքը փոխվում, հարմարվողական դիզայնը հատկապես տարածված է: Եվ այս կապակցությամբ քիչ բան չկար Հարմարվող JQuery Sliders, պատկերասրահներ, կարուսելներ կամ նմանատիպ plug-ins.
1. Պատասխանատու հորիզոնական հաղորդագրություններ Slider

Հարմարվող հորիզոնական կարուսել `մանրամասն տեղադրման հրահանգներով: Այն իրականացվում է պարզ ոճով, բայց դուք կարող եք ոճավորել այն ինքներդ:

2. Սահիչ սահադաշտի վրա

Այս սլայդը հարմար է ցանկացած կայքի համար: Այն օգտագործում է սահադաշտեր `բաց կոդով: Սլայդերի գույները կարելի է հեշտությամբ փոխվել:

3. Tilted բովանդակության սլայդերի ցուցադրություն

Հարմարվող սլայդ բովանդակությամբ: Այս սլայդերի կարեւորագույն իրադարձությունը 3D պատկերի էֆեկտ է, ինչպես նաեւ պատահական կարգով արտաքին տեսքի տարբեր անիմացիաներ:

4. Սահիչ, օգտագործելով HTML5 կտավ

Ինտերակտիվ մասնիկներով շատ գեղեցիկ եւ տպավորիչ սահիկ: Այն իրականացվում է HTML5 կտավի միջոցով,

5. Սահիչ «Morphing պատկերներ»

Սահնակը `մորֆինգի ազդեցությամբ (սահուն վերափոխումից մեկ առարկայից մյուսը): Այս օրինակում սահնակը լավ է հարմար վեբ մշակող պորտֆելի կամ վեբ ստուդիայի համար `պորտֆելի տեսքով:

6. շրջանաձեւ սլայդ

Սահնակ, շրջանի տեսքով `պատկերի հեղաշրջման ազդեցությամբ:

7. Սահիչ `Blurred ֆոնով

Հարմարվողական սահիկ `անջատիչ եւ փչող հետեւի ֆոնով:

8. հարմարվողական նորաձեւության սլայդ

Կայքի համար պարզ, թեթեւ եւ հարմարվողական սահիկ:

9. Slicebox - JQuery 3D Image Slider (Թարմացվել է)

Թարմացվել է Slicebox սլայդերի տարբերակը շտկվածքներով եւ նոր հնարավորություններով:

10. Անվճար անիմացիոն պատասխանող պատկերի ցանց

JQuery plugin- ը `ճկուն պատկերի ցանց ստեղծելու համար, որը կփոխի նկարները, օգտագործելով տարբեր անիմացիաներ եւ ժամկետներ: Այն կարող է լավ տեսք ունենալ որպես կայքում ֆոն կամ դեկորատիվ տարր, քանի որ մենք կարող ենք հարմարեցնել նոր պատկերների եւ նրանց անցումների ընտրողական տեսքը: Plugin- ը պատրաստված է մի քանի վարկածով:

11. FlexSlider

Ունիվերսալ անվճար plugin ձեր կայքի համար: Այս plugin- ը պատրաստված է սահիկի եւ կարուսելների մի քանի տարբերակներով:

12. Ֆոտոռամա

Ֆոտորամա:- Սա համընդհանուր plugin է: Նա շատ պարամետրեր ունի, ամեն ինչ արագ եւ հեշտ է աշխատում, հնարավոր է սլայդները դիտել ամբողջ էկրանին: Սահիչը կարող է օգտագործվել ինչպես ֆիքսված չափի, այնպես էլ հարմարվողական, մանրապատկերներով եւ առանց դրա, շրջանաձեւ պտտվելով եւ առանց որեւէ այլ բանի:

ՍիրվածՄի քանի անգամ դրեք սահնակը եւ հավատացեք, որ նա լավագույններից մեկն է

13. Անվճար եւ հարմարվողական 3D պատկերասրահ-լեռնային մանրանկարչություն:

Փորձարարական պատկերասրահ-սլայդեր 3DPanellaut Ցանցի եւ հետաքրքիր անիմացիոն էֆեկտներով:

14. Սահիչ CSS3- ում

Adaptive Slider- ը պատրաստված է CSS3- ի միջոցով `բովանդակության եւ թեթեւ անիմացիայի հարթ տեսքով:

15. wow սլայդ:

Wow սահիկ:- Սա պատկերների սլայդ է `ցնցող տեսողական էֆեկտներով:

17. առաձգական

Էլաստիկ սահիկ `լիարժեք հարմարվողականություն եւ մանրանկարչություն սլայդներ:

18.â:

Սա ամբողջ էկրանով հարմարվողական սահիկ է, օգտագործելով CSS3 անիմացիա: Սահիչը կատարվում է երկու վարկածով: Անիմացիան կատարվում է բավականին անսովոր եւ գեղեցիկ:

19. Adaptive Plus Լուսանկարներ

Պարզ անվճար սահող պատկերասրահ `դիագրամի պատկերներով:

20. Հարմարվող սլայդ WordPress- ի համար

Adaptive Free Slider WP- ի համար:

21. Parallax բովանդակության սլայդ

Սահնակը զուգահեռ ազդեցությամբ եւ յուրաքանչյուր տարրի վերահսկողության միջոցով CSS3- ի միջոցով:

22. Սահիկ երաժշտության պարտադիր

Slider, օգտագործելով բաց կոդով JLLAYER: Այս սլայդը հիշեցնում է երաժշտության ներկայացմանը:

23. Սահիկ JMPress.js- ով

Adaptive Slider- ը հիմնված է JMPress.js- ի վրա եւ, հետեւաբար, թույլ է տալիս օգտագործել մի քանի հետաքրքիր 3D էֆեկտներ սահելու համար:

24. արագ սավառնելու սլայդերի ցուցադրում

Slide Show- ը արագ անջատիչ սլայդներով: Սլայդերը անջատիչները կուրսորը սավառնելիս:

25. Պատկերի ակորդեոն CSS3- ի հետ

Պատկերների ակորդեոն `CSS3- ով:

26. Հպում օպտիմիզացված պատկերասրահի plugin

Սա հարմարվողական պատկերասրահ է, որը օպտիմիզացված է հպման սարքերի համար:

27. 3D պատկերասրահ

3D պատի պատկերասրահ:- Ստեղծվել է Safari զննարկչի համար, որտեղ տեսանելի է 3D ազդեցությունը: Եթե \u200b\u200bնայեք մեկ այլ զննարկիչ, գործառույթը լավ կլինի, բայց տեսանելի չի լինի 3D էֆեկտի համար:

28. Սահիչ, պագիայով

Հարմարվող էջի համարակալման սլայդ `օգտագործելով JQuery UI սլայդ: Գաղափարն այն է, որ օգտագործեք նավիգացիայի պարզ հայեցակարգ: Հնարավոր է վերափոխել բոլոր պատկերները կամ փոստային անջատումը:

29. Մոնտաժը jQuery- ով

Պատկերի ավտոմատ տեղադրություն, կախված էկրանի լայնությունից: Շատ օգտակար բան, պորտֆելի կայք մշակելիս:

30. 3D պատկերասրահ:

Հասարակ 3D շրջանաձեւ սլայդ, CSS3- ի եւ jQuery- ի վրա:

31. Ամբողջ էկրանով ռեժիմը `3D ազդեցությամբ CSS3- ի եւ JQuery- ի վրա

Սահուն `լիարժեք էկրանի պատկերի դիտման ունակությամբ` գեղեցիկ անցումով:

Հեղինակից. Չնայած այն լուրերին `առանց պտտվելու համար նախատեսված վեբ էջերի ենթադրյալ« մահվան »մասին, լավ սահիկի անհրաժեշտությունը ոչ մի տեղ չէր վերանում: Եկեք անկեղծ լինենք, գոնե երկրորդ - սլայագործները զվարճալի են: Բացի այդ, շարժվող բովանդակության հակադրությամբ ոչ մի այլ բան չի առաջացնում «Wau» էֆեկտի ազդեցությունը: Բոլոր սլայդերը մի քանի սլայդների մի շարք են, որոնք փոխում են միմյանց, եւ հրամայական է, որ սահող ծածկագիրը հնարավորինս հեշտ է: Նման դեպքերում է, որ JQuery- ը կօգնի մեզ:

Նայեք Envan- ի շուկայի կայքից 20 jQuery սողաններին, եւ դուք կհասկանաք, որ կան սահնակներ, որոնք ավելին են, քան պարզապես բլոկը `սահուն փոխարինող պատկերներով:

1. Royalslider - սենսորային էկրանների պատկերասրահ JQuery- ում

Այժմ հարմարվողական սլայդը նաեւ ընկերական է էկրաններին դիպչելու համար, դա նշանակում է շատ ավելին, քան նախկինում: Royalslider- ը համատեղում է երկու գործառույթները. Հարմարվողականություն եւ շոշափման էկրաններ: Լավ ընտրություն, քանի որ պատկերասրահը գրված է HTML5- ի եւ CSS3- ի վրա:

Մի քանի հետաքրքիր հատկություններ.

JavaScript. Արագ սկիզբ

SEO օպտիմիզացում

Բարձր հարմարավետություն

Ավելի քան 10 նախնական ձեւանմուշներ

Համեմատություն կան CSS3 անցումների համար

Իմ կարծիքով, ամենաթեժ գործառույթը «Մոդուլային սցենարի ճարտարապետությունն» է, որը թույլ է տալիս անջատել ավելորդ բաները հիմնական JS ֆայլից, դրանով իսկ նվազեցնելով քաշը: Royalslider, սենսորային էկրանների պատկերասրահ JQuery - հուսալի JavaScript սլայդ, որը պետք է լրացնի ցանկացած մշակողի գործիքների մի շարք:

2. Սլայդեր հեղափոխություն ադապտիկ jQuery plugin

Ոչ այնքան հեշտ է սահնակով «հեղափոխական» ինչ-որ բան անել: Երբ խոսքը վերաբերում է սլայդներին, դրանցում կարող եք ավելացնել այդքան շատ գործառույթներ: Այնուամենայնիվ, սահող հեղափոխությունը իսկապես լավ փորձ է: JQuery Sliders- ի մեջ այս դեպքը բավարարում է ձեր բոլոր հնարավոր պահանջները:

Սլայդերի առանձնահատկությունների ցանկն այնքան մեծ է, ուստի ես կներկայացնեմ միայն Մոզտսը.

PararAllax ազդեցություն եւ հարմարավետ անիմացիա

Անսահմանափակ թվով շերտեր եւ սլայդներ հղումներով

Պատրաստ է օգտագործել, խորը հարմարեցված ոճեր

եւ շատ ավելին

Ներկառուցված վիդեո նվագարկիչ եւ սոցիալական ցանցերից հղումներ ավելացնելու ունակությունը սահող հեղափոխություն է կատարում ցանցի առավել ճկուն եւ հարմարեցված տարբերակներից մեկը:

3. Layerslider ադապտիկ jQuery plugin Slider

«Layerslider adaptive jquery plugin Slider» անունով չի կարող իրականում գնահատել այս սահնակը:
Սլայդերի միջեւ 200+ 2D եւ 3D անցումներ որեւէ մեկին առաքում են:

Հատկանշական մի քանի գործառույթներ.

13 երեսվածք եւ 3 ընտրացանկի տեսակ

Սլայդերի վրա ֆիքսված պատկեր տեղադրելու ունակություն

Եւ jQuery Fallbek

Եվ շատ ավելին

Ինչպես նախորդ սլայդերի հետ, կարող եք ավելացնել գրեթե ցանկացած բովանդակություն, նույնիսկ HTML5 ռեզիդենտ մուլտիմեդիա բովանդակություն: Layerslider- ը վերակենդանացնում է սահնակները, բացի այդ, այն շատ գեղեցիկ է:

4. JQuery Banner Rotator / SlideShow

jQuery Banner Rotator / Slideshow- ը բավականին պարզ սայթաքում է, որը չի զոհաբերում հիմնական գործառույթը:

Հնարավորություններ.

Tultty, տեքստային ներդիրներ եւ այլն:

Նախադիտումներ եւ բաղադրիչներ դիտելու տարբեր տարբերակներ

Ժմչփ, մեկ սայթաքի կամ բոլորի հետաձգմամբ

Բոլոր սլայդների բազմակի անցումներ կամ յուրաքանչյուրի համար տարբեր անցումներ առանձին

jQuery Banner Rotator / Slideshow- ը `համեմատած այլ JQuery Sliders- ի հետ, ունի միայն հիմնական հնարավորություններ, բայց մի մոռացեք դրա մասին:

5. Բոլորը մեկ սլայդերում - ադապտիկ jQuery slider plugin

Any անցում հայտնված ցանկացած սլայդ ունի իր ուրույն տեսլականը եւ իր ոլորտում խնդիրներ է լուծում: Բայց պարզապես ոչ սա: Մեկ սլայդի մեջ բոլորը կարելի է անվանել «ներառյալ ներառական»:

Կարծում եմ, վեբ մշակողների եւ դիզայներների մեծամասնությունը ապացուցված լուծում ունի, բայց նրանք միշտ նոր բան են փնտրում: Եվ սա «նոր բան» ներառում է.

Ռոտատորի պաստառներ

Banner նախադիտմամբ

Պայուսակ խաղացանկով

Բովանդակության սլայդ

Կարուսել

Սողանների բոլոր տեսակները պաշտպանում են ֆունկցիոնալության մեծ մասը, եթե ոչ այն ամենը, ինչ անհրաժեշտ է jQuery sliders: Արդյոք բոլորը մեկ սայթաքում կդառնան ձեր «ներառական»:

6. UnoSlider - Adaptive TouchSpreen Slider

Եթե \u200b\u200bձեր սահնակը հարմարվողական չէ եւ չի աջակցում հպման էկրաններին, ապա սխալ սլայդ ունեք: Unoslider- ը ճիշտ է:

Այս սլայդը իր տեղը գտավ արեւի տակ `գործառույթների պարզության եւ հարուստ շարք միջեւ: Գործառույթներ.

Աջակցության թեմա

12 պատրաստի թեմաներ

40 անցում

IE6 + աջակցության աջակցություն

Բոլոր գործառույթները `դիզայնի եւ ոճի կողմնակալության մեջ, ինչը Unoslider- ին դարձնում է հիանալի բովանդակության սահնակ` թեմաներ ավելացնելու հնարավորությամբ:

7. Master Slider - JQuery Touchscreen Slider

Փնտրում եք «մեկ jQuery slider բոլորին ղեկավարելու համար»: Փորձեք Master Slider - JQuery Touchscreen Slider- ը էկրանի տարբեր չափերի համար ...

Երբ խոսքը վերաբերում է լավ դիզայնի, այս օրինակը լավագույններից մեկն է.

Ավելի քան 25 ձեւանմուշ

Ապարատային արագացման անցում

Աջակցող հպում եւ Սվայրով

Եվ շատ ավելին

Ինտերակտիվ անցումները, անիմացիոն շերտերը եւ թեժ կետերը անպայման կգրավեն ձեր ուշադրությունը: Master Slider - արվեստի գործեր:

8. TouchCarousel - JQuery Content Scroller եւ Slider

TouchCarousel- ը գրավում է անվճար աջակցություն եւ թարմացումներ: Այնուամենայնիվ, սա այս թեթեւ քաշային slider տիպի կարուսելի բոլոր գործառույթներն են:

Եթե \u200b\u200b«հպում» բառը ներկա է վերնագրում, կարող եք կռահել, որ սահնակը լիովին հարմարվողական է եւ աջակցում է հպումին: Այլ գործառույթներ.

SEO օպտիմիզացում

Smart Avto խաղալ

CSS3 ապարատային արագացման անցում

Photoshop- ի համար հարմարեցված UI եւ 4 երեսվածքներ

Touchcarousel- ը իր ուրույն ֆիզիկական ոլորման սլայդների պատճառով, սա շարժական սարքերում սենսացիաների բոլորովին նոր մակարդակ է:

9. Ընդլայնված սահող - JQuery XML Slider

jQuery Sliders- ը կարող է օգտագործվել ոչ միայն կայքերում: Նրանք կարող են նաեւ հարմար լինել վեբ ծրագրերում: Advanced Slider- ը թույլ է տալիս դա անել:

HTML կամ XML Markup- ի միջոցով այս առաջադեմ սլայդը անջնջելի տպավորություն ունի.

Անիմացիոն շերտեր եւ խելացի տեսանյութ

100+ անցում եւ 150+ սովորական հատկություններ

Սահկապատ, 7 երեսվածքներ Scrollbar- ի եւ ներկառուցված աջակցության լուսատուփի համար

Նավիգացիա ստեղնաշարի հետ, աջակցություն շոշափումներին եւ լիարժեք կարգավորելիության համար

Եվ շատ ավելին

Այնուամենայնիվ, լավագույն առանձնահատկությունն է առաջադեմ սլայդ - JQuery XML սլայդեր API, որը դարձնում է սլայդերի կատարյալ ընտրանքներ ձեր վեբ դիմումի համար:

10. JQuery Slider ZOOM- ը լրիվ արձագանքեց

Այն JQuery Sliders- ից մեկը, որը կստիպի ձեզ ցուցադրություն տեսնել նախքան իր հնարավորությունների մասին կարդալը: Պարզապես ուզում եք հասկանալ, թե ինչ է նշանակում այս «խոշորացում / դուրս էֆեկտը»:

Մեծացնելու էֆեկտը բավականին թույլ է, բայց այն ավելացնում է վերահսկողության զգացողություն եւ պատկերի ներկա հպում, իսկ մնացած ստատիկ սահնակը: Սլայդերի հատուկ առանձնահատկություններ.

CSS3- ի անցումները շերտերի միջեւ

Շարժապատկերների ավարտի պարամետրը շերտերի համար

Ֆիքսված լայնության ընտրանքներ, ամբողջ էկրան եւ ամբողջ լայնություն

Անիմացիոն տեքստ HTML եւ CSS ձեւաչափմամբ

Սլայմերի մեծ մասը փորձում է հնարավորինս շատ հետեւանքներ պատկերացնել, եւ JQuery Slider- ի խոշորացման մեջ / ելքը ամբողջությամբ պատասխանատու է, բայց իրականացվում է միայն ken այրվածքների ազդեցություն:

11. jQuery կարուսելի էվոլյուցիա

Ինչպես վերը նշված առաջադեմ սլայդերի հետ `jQuery xml սլայդեր, jQuery կարուսելի էվոլյուցիան ունի իր API- ն, որը կարող է օգտագործվել մեկ այլ նախագծի գործառույթների կամ ինտեգրման համար:

JavaScript. Արագ սկիզբ

Ուսումնասիրեք JavaScript- ի հիմունքները `վեբ դիմում ստեղծելու գործնական օրինակով

Պատկերներով, HTML Markup, YouTube եւ Vimeo Video Դուք կստանաք նաեւ.

SEO օպտիմիզացում

9 ոճեր կարուսելի

Ստվերի եւ արտացոլման հետեւանքները

Պատկերի չափը կարող է կազմաձեւվել որպես առջեւի եւ հետեւի մասում

jQuery Carousel Evolution- ը պարզ կարուսելի է `շատ օգտագործման ընտրանքներով:

12. Սեքսուալ սլայդ:

Sexy Slider- ը մինչ այժմ այնքան սեքսուալ չէ: Այնուամենայնիվ, իր տարիքի պատճառով այս սլայդը արժանի է վստահության:

Առաջին հայացքից սլայդը շատ տպավորիչ չէ, բայց եթե այն լավ կազմաձեւված է, նա հիանալի տեղավորվում է ձեր դիզայնի մեջ: Հնարավորություններ.

Սլայդ ավտո խաղացողներ

Ստորագրություններ պատկերների համար

Շարունակական խաղային սլայդներ

6 Անցումային էֆեկտ

Sexy Slider- ը սպասում է, որ դուք բացեք նրա ամբողջ ուժը եւ բացահայտեք ներուժը:

13. JQuery Image & Content Scroll W / Lightbox

Բջջային սարքերի բոլոր այս ձեւավորմամբ եւ սաստիկ էկրաններին օժանդակելու համար հաճելի է տեսնել JQuery Slider- ը, որը չի մոռացել աշխատասեղանի համակարգիչների մասին:

jQuery Image & Content Scroll W / Lightbox- ը աջակցում է ստեղնաշարի եւ մկնիկի անիվի մուտքին, ինչպես նաեւ այլ հատկություններ.

Հորիզոնական եւ ուղղահայաց կողմնորոշում

Տեքստի ստորագրությունները սահողից կամ դրսում

Որոշակի քանակությամբ կիրառելի սլայդներ սահմանելու ունակություն

Ներկառուցված պատկերներ, ֆլեշ, iframe, ajax եւ inline բովանդակություն

Նաեւ սահնակում կա ներկառուցված թեթեւ տուփ: Ընտրովի, դուք չեք կարող գործարկել սահնակը JQuery Image & Content Scroller W / Lightbox- ում, բայց առանձին թեթեւ տուփը գործարկելու համար:

14. կիսաթափանցիկ - հարմարվողական ռոտատորի պաստառներ / սահող

JQuery Sliders- ի մեծ մասը ունի իր դիզայնը: Դուք կարող եք կարգավորել այն ինքներդ ձեզ համար, բայց երբեմն պարզապես ուզում եք ամեն ինչ սահնակների ներսում: Կիսաթափանցիկը ներկայացվում է ձեր ուշադրությանը:

Սլայդերում շատ նախադրյալներ կան: Կարող եք պարզապես անհրաժեշտ լինել որոշակի պարամետրեր սահմանել, եւ դա այն է: Հնարավորություններ.

6 տարբեր ոճեր

Անցումային 4 ազդեցություն

2 Swatch անցում

Կարգավորելի կոճակներ եւ ստորագրություններ

Մյուսների նման, այս սլայդը աջակցում է հպումին, հարմարվողականներին եւ ունի ապարատային արագացում: Transluse- ը սահիկ է `նվազագույն ձեւավորմամբ, որ բովանդակությունն ինքնին դնում է անկյունի գլխին:

15. FSS - Ամբողջ էկրանով լոգարիթմական կայք Plugin

Do անկանում եք լրիվ էկրանի կայք, որը բաղկացած է սլայդներից: Ապա ձեզ հարկավոր է FSS:

Իրականում, այս JQuery Slider- ը չափազանց հեշտ է ստեղծել ամբողջական էկրանի սահիկ: Հնարավորություններ.

Ajax աջակցություն

Ոլորղ

Խորը կապող տեխնոլոգիայի աջակցություն

2 տարբեր անցումային էֆեկտ

Արժե վճարել նաեւ ստեղնաշարի աջակցության եւ 11 էջի ուղեցույցի համար: Այնուամենայնիվ, ներկա տպավորությունը առաջացնում է FSS- ի ծանրությունը, ընդամենը 5 կմ:

16. Zozo ակորդեոն - հարմարվողական սենսորային էկրանների սլայդ

JQuery Slider- ի մեկ այլ օրինակ `կենտրոնացած է ոճերի վրա, եւ ով լավ է դիմագրավում իրենց աշխատանքով: Zozo ակորդեոն պահանջվում է նրանց կողմից, ովքեր փնտրում են լավ սահող-համադրող, ոճեր փոխելու ունակությամբ:

CSS3 անիմացիայի այս գեղեցկությունը ունի նաեւ գործառույթների բավականին լայն տեսականի.

Հորիզոնական եւ ուղղահայաց ակորդեոն

Սեմալտ HTML5 եւ SEO օպտիմիզացում

Աջակցեք հպումին, ստեղնաշարի եւ վայ-արիան

Ավելի քան 10 երեսվածք եւ 6 դասավորություն

Եվ շատ ավելին

Zozo ակորդեոնն ունի անվճար աջակցություն եւ մշտական \u200b\u200bթարմացումներ, ինչպես նաեւ բոլոր գործառույթները, որոնք ցանկանում եք տեսնել JQuery ակորդեոնում:

17. jQuery արձագանքող onebyone slider plugin

jquery արձագանքող onebyone slider plugin- ը ավելի շատ նման է պարզ անիմացիայի, այլ ոչ թե սահնակ: Միանգամից մեկ սլայդ ցուցադրելու փոխարեն, այս օրինակը քայլ առ քայլ լցնում է էկրանը սլայդներով, մինչդեռ տարածքում տեղ չկա եւ միայն դրանից հետո տեղ չկա:

CSS3 անիմացիոն աշխատանքներն անիմացիոն գործի տակ են գործում, այն թեթեւ է, բաղկացած է մի քանի շերտերից եւ շարժական սարքերից: Մի քանի գործառույթներ.

Գոյություն ունի նաեւ նավիգացիայի տարբերակ, օգտագործելով քաշել եւ թողնել: Jquery արձագանքող onebyone սլայդ plugin- ը աշխատում է Twitter Bootstrap Carousel- ի հիման վրա:

18. ակորդեոնեզա - jQuery plugin

Դրա համար ավելի հեշտ չկա JQuery Slider- ը: Աշխատելու համար դուք պետք է ներբեռնեք ընդհանուր 3KB սլայդերը, որը Matingionza- ն դարձնում է առավել թեթեւ ձայնային տիպի սայթաքում:

Եթե \u200b\u200bձեզ դուր չի եկել երեք ոճ, ապա կարող եք ինքներդ ուղղել HTML- ը եւ CSS- ը: Հնարավորություններ.

Նավիգացիա ստեղնաշարի հետ

Հեշտ էֆեկտներ եւ կոճակներ

Առաջադիմական բարելավման տեխնիկա - աշխատանքներ առանց JavaScript- ի

Հիշեք, որ ակորդեոնեզան կարող է ցուցադրել զվարճալի պարունակության շատ տարբերակներ, ինչը այն դարձնում է չափազանց ճկուն:

19. MOSTYSLISER - հարմարվողական բազմաբնույթ սլայդ

Թողիսը իսկապես հզոր սայթաքիչ է: Այն կարող է օգտագործվել ոչ միայն որպես պատկերների պարզ սլայդ, այլեւ որպես ամբողջական էկրանի միակողմանի սլայդ `ընտրացանկի իրերի միջոցով նավարկությամբ: Դրանով դուք կարող եք կատարել հիանալի մեկ էջի կայք:

Hood- ի տակ կգտնեք շատ տարբերակներ.

Ստեղնաշար, մկնիկի եւ հպման աջակցություն

CSS3 ապարատային արագացման անցում

Մաքուր վավեր նշման եւ SEO օպտիմիզացում

Անսահմանափակ սլայդ թիվ, ստորագրությունների եւ էֆեկտների շերտեր

API- ն մշակողների համար շատ հզոր է եւ ընկերասեր, ինչը տարբեր եղանակներ է բացում: MightySlider- ը հիանալի առաջադեմ JQuery Slider է մաքուր եւ լավ մեկնաբանված կոդով:

20. PARALLAX SLIDER - Adaptive JQuery Plugin

Parallax Slider- ը աշխատում է jQuery արձագանքող onebyone սլայդի plugin- ով եւ թույլ է տալիս մեկ սայթաքել յուրաքանչյուր շերտով յուրաքանչյուր շերտ: Դուք կարող եք անիմաստացնել բոլոր սլայդները կամ նույնիսկ միայն մեկը `ավելացնելով PararAllax անիմացիա:

Հավաքածուն ներառում է տարբեր տեսակի 4 սողաններ, բոլորը զուգահեռ ազդեցությամբ: Ինչպես մյուս JQuery Sliders, այն ունի.

Ամբողջական հարմարավետություն

Հպեք աջակցություն

Լիովին հարմարեցված, անսահմանափակ թվով շերտեր

Ավտոմատ խաղ, Looping, բարձրության եւ լայնության ճշգրտում, ինչպես նաեւ ժմչփ

Անիմացիոն շերտերը ոչ միայն տեքստ կամ պատկերներ են: Կարող եք նաեւ ավելացնել YouTube, Vimeo եւ HTML5 տեսանյութ: Parallax Slider- ը եւս մեկ լավ օրինակ է, թե ինչպես կարող եք ընդօրինակել Flash Effects- ը նույնիսկ ավելի լավ, քան ինքն իրեն, որոնք նույնպես աջակցվում են բոլոր սարքերի վրա:

Եզրակացություն

Հետաքրքրական է դիտարկել, թե ինչպես jQuery sliders մեծացել է մի բանից, որը պարզապես փոխարինում է մեկ պատկեր մյուսներին, ստեղծագործական գործիքների հսկայական հավաքածուի մեջ: Այժմ կա 3D, PararAllax սլայդեր, սողաններ ամբողջ էջի, հարմարվողական եւ նրանց, որոնք կարելի է դիտել ինչպես աշխատասեղանի համակարգիչներում, այնպես էլ սմարթֆոնների վրա:

Եթե \u200b\u200bայս ցուցակից որեւէ սահիկ չեք սիրում, միշտ կարող եք անցնել jQuery կոդի ձեռնարկի դասը Envan կայքում եւ զարգացնել միանգամայն նոր եւ եզակի բան:

Դե, կամ դիտեք այլ սլայդերներ Envan- ի շուկայում. Ինչ ընտրելն է: Եվ որն է ձեր նախընտրած JQuery Slider- ը, եւ ինչու: