Պարզ արձագանքող հպումային jQuery սահիչ: js պատկերների համար հարմարվողական սլայդերների ընտրություն

Բայց քանի որ մենք անցնում ենք JS-ի հիմունքներին, հիմունքները ուսումնասիրելու համար ես կպատմեմ, թե ինչպես ստեղծել պարզ սլայդեր՝ օգտագործելով միայն JavaScript լեզուն: Դե, եկեք սկսենք վերլուծել նյութը:

Ինչ տեսակի սլայդերներ կան և որտեղ կարող են դրանք անհրաժեշտ լինել:

Պատկերների դիտման համար հարմար պատկերասրահների ստեղծումը պահանջվում է բոլոր վեբ ծառայություններում, որոնք պարունակում են առնվազն որոշ լուսանկարներ: Դրանք կարող են լինել առցանց խանութներ, պորտֆոլիո կայքեր, լրատվական և կրթական ծառայություններ, ընկերությունների և զվարճանքի հաստատությունների կայքեր՝ ֆոտոռեպորտաժներով և այլն։

Այնուամենայնիվ, սա սլայդերների ստանդարտ օգտագործում է: Նման տեխնոլոգիաները օգտագործվում են նաև հաճախորդներին գովազդային ապրանքներ, ծառայություններ ներգրավելու կամ ձեռնարկությունների առավելությունները նկարագրելու համար:

Հիմնականում հաճախորդները խնդրում են վեբ էջերում տեղադրել «Կարուսել» տիպի պատկերասրահներ: Սա հարմար գործիք է մեծ չափերով պատկերներ դիտելու համար՝ օգտագործողի համար սլայդները առաջ և հետ փոխելու ունակությամբ: Այս դեպքում նկարներն իրենք սովորաբար ավտոմատ կերպով փոխվում են որոշակի ժամանակ անց: Այս մեխանիզմը կոչվում էր կարուսել, քանի որ նկարների ցուցադրումը կրկնվում է շրջանագծի մեջ։

Այսօր, ցանկության դեպքում, համացանցում կարող եք գտնել ամենաարտասովոր և գրավիչ պլագինները՝ լուսանկարների հավաքածու դիտելու համար:

Անկախ գործունեություն

Դե, հիմա եկեք սկսենք ստեղծել մեր սեփական սլայդերը: Դասընթացի այս պահին ես առաջարկում եմ օգտագործել մաքուր JavaScript այն իրականացնելու համար: Սա ավտոմատ կերպով կփոխի նկարները շրջանագծի մեջ:

Ստորև ես կցել եմ իմ դիմումի կոդը: Ես մեկնաբանություններ թողեցի ձեզ համար, երբ ես կոդավորեցի:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

/*Ես նկարագրում եմ շրջանակի տեսքը, ապագա սլայդերի հիմքը */ #slides( դիրքը` հարաբերական; բարձրությունը` 415px; լայնությունը` 100%, լիցքավորումը` 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px կապույտ, 0 0 15px #010, 0 0 35px #010 ) /* Նկարների ցուցադրման խմբագրում*/ img (լայնությունը՝ ավտոմատ; բարձրությունը՝ 390px; լիցքավորումը՝ 13px;) Ես նշում եմ, որ ցանկի տարրերի բովանդակությունը կցուցադրվի մայր տարրի կենտրոնում, այսինքն. այս դեպքում, ul տարրի կենտրոնում - սլայդների հիմքը */ li ( text-align: center; ) /* Ես նկարագրում եմ սլայդների տեսքն իրենք */ .slide( դիրքը՝ բացարձակ; անթափանցիկություն՝ 0 Վերև՝ 0px, բարձրություն՝ 100%; 1 z-ինդեքս՝ 4;

var MySlider = document.querySelectorAll("#slides .slide"); var ընթացիկՊատկեր = 0; var IntervalForChange = setInterval(nextSlide,2700); ֆունկցիա nextSlide())( MySlider.className = «սլայդ»; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = «սլայդերի ցուցադրում»;)

Պատկերի ավտոմատ փոխարկիչ /*Նկարագրում է շրջանակի տեսքը, ապագա սլայդերի հիմքը */ #slides( դիրքը` հարաբերական; բարձրությունը` 415px; լայնությունը` 100%, լիցքավորումը` 0px; ցուցակի ոճի տեսակը` ոչ մեկը; տուփ- ստվեր՝ 0 0 7px #010, 0 0 10px կապույտ, 0 0 15px #010, 0 0 35px #010 ) /* Պատկերների ցուցադրման խմբագրում*/ img (լայնությունը՝ ավտոմատ; բարձրությունը՝ 390px; լիցքավորումը՝ 13px;) /* Նշելով, որ բովանդակության ցանկի տարրերը կցուցադրվեն մայր տարրի կենտրոնում, այսինքն. այս դեպքում, ul տարրի կենտրոնում - սլայդների հիմքը */ li ( text-align: center; ) /* Ես նկարագրում եմ սլայդների տեսքն իրենք */ .slide( դիրքը՝ բացարձակ; անթափանցիկություն՝ 0 Վերև՝ 0px, բարձրություն՝ 100%; 1 z-ինդեքս՝ 4;

Հուսով եմ, որ css-ի և html կոդի հետ կապված որևէ խնդիր չեք ունեցել: Բայց ես անհրաժեշտ եմ համարում ապամոնտաժել սցենարի աշխատանքը։ Այսպիսով, եկեք անցնենք գրվածի վերծանմանը:

Այսպիսով, նախ, օգտագործելով querySelectorAll մեթոդը, ես MySlider փոփոխականին վերագրում եմ նշված տիրույթում գտնվող բոլոր տարրերի ցանկը: Նշում է այս մուտքը

document.querySelectorAll("#slides .slide")

Այսպիսով, MySlider-ը պահպանում է չորս տարրերից բաղկացած հավաքածու:

Հաջորդը, ես նշում եմ, թե որ պատկերը սկսելու ցուցադրել՝ զրոյի դնելով currentPicture փոփոխականը: Այնուհետև ես նշում եմ, որ սլայդի փոփոխությունը տեղի է ունենում 2,7 վայրկյանում և պետք է կանչվի nextSlide մշակման գործառույթը:

Անցնենք բուն ֆունկցիային։

Սկզբում ընթացիկ ցուցակի տարրի համար ես փոխում եմ դասերի նկարագրությունը, այսինքն. Ես վերաշարադրում եմ «slide showing»-ը «slide»-ի: Հետեւաբար պատկերն անտեսանելի է դառնում։

Այժմ ես սահմանում եմ հավաքածուի նոր տարր, որը կցուցադրվի էկրանին: Դա անելու համար ես վերցնում եմ ներկայիս +1 դիրքը: Երևի նկատել եք, որ ես նաև օգտագործում եմ բաժանումը մնացորդով (%) հասանելի սլայդների քանակով: Ականջներով այս հնարքն անհրաժեշտ է շոուն նոր շրջանով սկսելու համար։ Ահա թե ինչ տեսք կունենա այն բառացիորեն.

Մենք պետք է ավելացնենք առաջ և հետ կոճակներ:

Դա անելու համար հարկավոր է լրացնել նախկինում գրված կոդը։

HTML կոդը նոր սլայդերի համար

Ամբողջ սահիկի կառուցվածքը կմնա նույնը: Նշման մեջ կավելացվի երկու կոնտեյներ, որոնք կծառայեն որպես կոճակներ։

Slider ոճերը

Կոճակները կզբաղեցնեն իրենց տեղը կոնտեյների նկատմամբ բացարձակ դիրքավորման շնորհիվ.slider-box

Slider-box( դիրքը՝ հարաբերական; լայնությունը՝ 320px; բարձրությունը՝ 210px; հորդառատ՝ թաքնված;) .slider( դիրքը՝ հարաբերական; լայնությունը՝ 10000px; բարձրությունը՝ 210px;) .slider img(float) : ձախ. .prev, .slider-box .next( դիրքը: բացարձակ; վերև: 100px; ցուցադրում: բլոկ; լայնությունը: 29px; բարձրությունը: 29px; կուրսորը: ցուցիչ;) .slider-box.prev(ձախ: 10px; ֆոն: ...

Սցենար

Սահիկը ինքնաբերաբար պտտվում է: Լռելյայնորեն շարժումը գնում է ձախից աջ, բայց անհրաժեշտության դեպքում կարող եք փոխել դրա շարժման ուղղությունը՝ օգտագործելով ընթացքի փոփոխականը: Երբ փոփոխականի արժեքը փոխվում է 1-ից -1, սահիկի շարժման ուղղությունը կփոխվի:

Սլայդերի պատկերները չպետք է փոխվեն, երբ կուրսորը գտնվում է սահիկի մեջ: Ինչու՞ է դա արվում: Դա պարզ է. Եթե մկնիկի կուրսորը գտնվում է սահիկի վրա, դա նշանակում է, որ կայքի այցելուին հետաքրքրում է դրա բովանդակությունը։ Այս պահին դուք չպետք է ինքնաբերաբար փոխեք սլայդները:

$(function () ( var slider = $(".slider") , sliderContent = slider.html () , // Slider content slideWidth = $(".slider-box") .outerWidth () , // Սահիկի լայնությունը slideCount = $(".slider img") .length, // Սլայդների քանակը prev = $(".slider-box .prev") , // Հետ կոճակը հաջորդ = $(".slider-box .next") , / / Փոխանցել կոճակը sliderInterval = 3300 , // Slide change interval animateTime = 1000 , // Slide change time course = 1 , // Slider շարժման ուղղությունը (1 կամ -1) margin = - slideWidth // Initial slide offset $ ( ; slider img:last") .clone () .prependTo (."slider") ;// Վերջին սլայդի պատճենը տեղադրված է սկզբում $(".slider img") .eq (1) .clone () . appendTo (."slider" ) ; ձախ կողմում՝ մեկ սլայդի լայնությամբ ( // Անիմացիոն() ֆունկցիան գործարկվում է սլայդները փոխելու համար: interval = window.setInterval(animate, sliderInterval) ; ) ֆունկցիան animate() ( if (margin==- slideCount* slideWidth- slideWidth) (// Եթե սլայդը հասել է slider.css-ի ավարտին (( "marginLeft" :- slideWidth) ; // ապա block.slider-ը վերադառնում է դեպի իր սկզբնական դիրքը լուսանցք=- slideWidth* 2 ) else if (margin== 0 && course==- 1 ) ( // Եթե սահիկը սկզբում է, իսկ հետադարձ կոճակը սեղմված է slider.css (( "marginLeft" :- slideWidth* slideCount) ) ; slider-ը տեղափոխվում է ձախ 1 սլայդով) sliderStop() ֆունկցիան ( // Գործառույթ, որը դադարեցնում է սլայդերի պատուհանը.clearInterval (interval) ; = - 1 կենդանություն (); // Կանչել animate() ֆունկցիայի դասընթացը = course2 ; )) ; next.click (function () ( // Հետ կոճակը սեղմվում է, եթե (slider.is (":animated") ) ( return false ; ) // Եթե անիմացիան չի առաջանում var course2 = course; // Ժամանակավոր փոփոխական պահպանել արժեքի դասընթացը = 1 // Սահմանում է սլայդերի ուղղությունը աջից ձախ animate() ; slider.add (next) .add (prev) .slider (function () ( // Եթե մկնիկի կուրսորը գտնվում է sliderStop(); // Երբ կուրսորը դուրս է գալիս սահիչից, անիմացիան վերսկսվում է: nextSlide(); // Կանչել ֆունկցիան nextSlide() ) ;

Արդյունքը առաջ և հետ կոճակներով սահիկ է:

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

Օգտագործում 1. Միացրեք jQuery-ն

Փլագինի միակ կախվածությունը jQuery-ն է, որը նախ պետք է ներառենք.

2. Միացրեք Glide.js-ը

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

Եկեք միացնենք հիմնական ոճերը.

Եկեք ստեղծենք սլայդերի html կառուցվածքը։

4. Նախնականացում

Գործարկեք սահիչը լռելյայն կարգավորումներով...

$(."slider").glide();

...կամ հարմարեցրեք այն ինքներդ ձեզ համար

$(."slider").glide(( autoplay: 5000, arrows: "body", nav: "body" ));

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

Հասանելի պարամետրերի ցանկ.

Պարամետր	Կանխադրված արժեք	Տիպ	Նկարագրություն
Ավտոմատ միացում	4000	int/bool	Ավտոմատ ոլորել (կեղծ՝ անջատելու համար)
hoverpause	ճիշտ	բուլ	Դադարեցրեք ավտոմատ ոլորումը, երբ մկնիկը սահեցրեք սահիկի վրա
animationTime	500	միջ	!!! Այս տարբերակը աշխատում է, եթե զննարկիչը ՉԻ աջակցում css3-ին: Եթե css3-ը աջակցվում է բրաուզերի կողմից, ապա այս պարամետրը պետք է փոխվի .css ֆայլում!!!
նետերը	ճիշտ	bool/string	Ցույց տալ/թաքցնել/կցել սլաքները: Ճիշտ է սլայդերի կոնտեյներով սլաքները ցուցադրելու համար: Սխալ է թաքցնել: Կարող եք նաև նշել դասի անունը (օրինակ՝ «.class-name»)՝ հատուկ html կոդ կցելու համար։
arrowsWrapperClass	slider-arrows	լարը	Դաս, որը վերագրվելու է կոնտեյներին սլաքներով
arrowMainClass	slider-arrow	լարը	Հիմնական դաս բոլոր սլաքների համար
arrowRightClass	slider-arrow--աջ	լարը	Աջ սլաքների դաս
arrowLeftClass	slider-arrow--ձախ	լարը	Ձախ սլաքների դաս
arrowRightText	հաջորդ	լարը	Աջ սլաքի տեքստ
arrowLeftText	նախորդ	լարը	Ձախ սլաքի տեքստ
նավ	ճիշտ	bool/string	Ցուցադրել / թաքցնել / ամրացնել սլայդների նավարկությունը: Ճիշտ է ցուցադրել: Սխալ է թաքցնել
navCenter	ճիշտ	բուլ	Նավիգացիա կենտրոնով
navClass	slider-nav	լարը	Նավիգացիոն կոնտեյների դաս
navItemClass	slider-nav__item	լարը	Դաս նավարկության տարրի համար
navCurrentItemClass	slider-nav__item-- ընթացիկ	լարը	Դաս՝ ընթացիկ նավիգացիոն տարրի համար
ստեղնաշար	ճիշտ	բուլ	Ոլորեք սլայդը, երբ սեղմում եք ձախ/աջ կոճակները
touch Հեռավորություն	60	int/bool	Հպման աջակցություն: Այս գործառույթն անջատելու համար սխալ է:
նախքան Init	ֆունկցիա () ()	ֆունկցիան	Հետզանգ, որը կաշխատի նախքան plugin-ի սկզբնավորումը
afterInit	ֆունկցիա () ()	ֆունկցիան	Հետզանգ, որը կաշխատի plugin-ի սկզբնավորումից հետո
անցումից առաջ	ֆունկցիա () ()	ֆունկցիան	Հետզանգ, որը կաշխատի նախքան սահիչը ոլորելը
անցումից հետո	ֆունկցիա () ()	ֆունկցիան	Հետադարձ զանգ, որը կաշխատի սահիչը ոլորելուց հետո

API

API-ն օգտագործելու համար գրեք glide փոփոխականի վրա:

Var glide = $(".slider").glide().data ("api_glide");

API մեթոդներն այժմ հասանելի են ձեզ:

Glide.jump (3, console.log ("Woooo!"));

.current() - Վերադարձեք ընթացիկ կողմի համարը
.play() - Սկսեք ավտոմատ ոլորումը
.pause() - Դադարեցրեք ավտոմատ ոլորումը
.next(callback) - Ոլորեք սահիչը առաջ
.prev(callback) - Ոլորեք սահիչը հետ
.jump(distance, callback) - Անցում կոնկրետ սլայդի
.nav(target) - Կցեք նավիգացիան որոշակի տարրի (օրինակ՝ «body», «.class», «#id»)
.arrows(target) - Կցեք սլաքները որոշակի տարրի վրա (օրինակ՝ «body», «.class», «#id»)

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

Եվ հիմա այն կետին, ոչ այնքան վաղուց ես պետք է տեղադրեի սլայդերը մեկ կայքում, բայց պատրաստի սցենարներ ինտերնետում փնտրելուց հետո ես ոչ մի օգտակար բան չգտա, քանի որ ոմանք չաշխատեցին այնպես, ինչպես ինձ անհրաժեշտ էր, իսկ մյուսները ընդհանրապես չէին սկսվում առանց մխիթարիչում սխալների: Ինձ շատ անհետաքրքիր թվաց jQuery պլագինները սլայդերի համար օգտագործելը, քանի որ... Թեև սա կլուծի խնդիրը, ես չեմ հասկանա, թե ինչպես է աշխատում այս մեխանիզմը, և միայն մեկ սլայդերի համար պլագին օգտագործելն այնքան էլ օպտիմալ չէ: Ես նույնպես չէի ցանկանում հասկանալ ծուռ սցենարները, ուստի որոշեցի գրել իմ սեփական սցենարը սլայդերի համար, որը ես ինքս կնշեմ ըստ անհրաժեշտության:

Նախ, մենք պետք է որոշենք ինքնին սլայդերի տրամաբանությունը, այնուհետև անցնենք իրականացմանը Այս փուլում շատ կարևոր է այս մեխանիզմի աշխատանքի հստակ ըմբռնումը, քանի որ առանց դրա մենք չենք կարող գրել կոդ, որն աշխատում է ճիշտ այնպես, ինչպես մենք ենք: ցանկանում.

Մեր հիմնական օբյեկտը կլինի տեսադաշտը, այսինքն՝ մի բլոկ, որում մենք կտեսնենք, թե ինչպես են պտտվում մեր նկարները, դրա մեջ կունենանք սլայդեր, սա կլինի մեր բլոկը, որը պարունակում է բոլոր պատկերները մեկ տողով շարված, և որը կփոխվի։ դրա դիրքը հենց դիտակետի ներսում:

Հաջորդը, տեսադաշտի ներսում գտնվող կողմերում, ուղղահայաց մեջտեղում, կլինեն ետ և առաջ կոճակներ, սեղմելիս մենք նաև կփոխենք մեր սլայդապատման դիրքը տեսադաշտի համեմատ՝ դրանով իսկ առաջացնելով նկարների միջով ոլորելու էֆեկտ: Եվ վերջապես, վերջին օբյեկտը կլինի մեր նավիգացիոն կոճակները, որոնք գտնվում են տեսադաշտի ստորին մասում:

Երբ մենք սեղմում ենք դրանց վրա, մենք պարզապես կնայենք այս կոճակի սերիական համարին և այն կտեղափոխենք մեզ անհրաժեշտ սլայդը՝ կրկին տեղաշարժելով սլայդապատիչը (հերթափոխը կկատարվի փոխակերպման css հատկությունը փոխելով, որի արժեքը կլինի. անընդհատ հաշվարկված):

Կարծում եմ, որ տրամաբանությունը, թե ինչպես է այս ամբողջը աշխատում, պետք է պարզ լինի վերևում նշածիցս հետո, բայց եթե ինչ-որ տեղ դեռ թյուրիմացություններ առաջանան, ապա ստորև բերված օրենսգրքում ամեն ինչ ավելի պարզ կդառնա, պարզապես մի փոքր համբերություն է պետք։

Հիմա գրենք! Նախ, եկեք բացենք մեր ինդեքսային ֆայլը և այնտեղ գրենք մեզ անհրաժեշտ նշագրումը.

Ինչպես տեսնում եք, ոչ մի բարդ բան չկա, բլոկ-ի դիմաց սլայդերը ծառայում է որպես միայն այն բլոկը, որում կտեղադրվի մեր սլայդը, դրա ներսում հենց դիտակետն է, որում գտնվում է մեր սլայդերի փաթաթումը, ինչպես նաև՝ ներդիր ցուցակը, այստեղ կան. սլայդները, իսկ img-ը նկարներ են դրանց ներսում: Խնդրում ենք ուշադրություն դարձնել այն հանգամանքին, որ բոլոր նկարները պետք է լինեն նույն չափի կամ առնվազն համամասնությամբ, հակառակ դեպքում սլայդը ծուռ տեսք կունենա, քանի որ դրա չափերը ուղղակիորեն կախված են պատկերի համամասնություններից:

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

մարմին ( լուսանցք՝ 0; լիցք՝ 0; ) #block-for-slider ( լայնությունը՝ 800px; լուսանցք՝ 0 ավտոմատ; լուսանցք՝ վերև՝ 100px; թաքնված - օգտատերերի ընտրություն - ms-user-select: none; 1s -անցում-ժամկետային ֆունկցիա. ( լուսանցք՝ 0; լիցքավորում՝ 0; ) #slidewrapper li ( լայնությունը՝ calc(100%/4); ցուցակի ոճը՝ ոչ մեկը; ցուցադրում՝ ներդիր; float՝ ձախ; ) .slide-img ( լայնությունը՝ 100%; )

Սկսենք «block-for-slider»-ից, սա կրկին մեր բլոկն է էջի վրա, որը մենք կհատկացնենք սլայդերի համար, դրա բարձրությունը կախված կլինի լայնությունից և մեր պատկերի համամասնություններից, քանի որ. Viewport-ը զբաղեցնում է բլոկի համար սլայդերի ամբողջ լայնությունը, այնուհետև սլայդն ինքնին ունի նույն լայնությունը, և, համապատասխանաբար, դրա ներսում պատկերը փոխում է իր բարձրությունը կախված լայնությունից (համամասնությունները պահպանվում են): Ես այս տարրը տեղադրեցի իմ էջի վրա՝ հորիզոնական՝ մեջտեղում, վերևից 100px-ով թեքված՝ դրա դիրքն ավելի հարմար դարձնելով օրինակի համար։

Viewport տարրը, ինչպես արդեն նշվեց, զբաղեցնում է մեր block-for-slider-ի ողջ լայնությունը, այն ունի overflow:hidden հատկությունը, ինչը թույլ կտա մեզ թաքցնել մեր պատկերի հոսքը, որը տարածվում է տեսադաշտից այն կողմ:

Հաջորդ CSS հատկությունը user-select:none է, որը թույլ է տալիս ազատվել առանձին սլայդերի տարրերի կապույտ ընդգծումից, երբ կոճակները մի քանի անգամ սեղմում եք:

Անցնելով slidewrapper-ին, ինչո՞ւ դիրք՝ հարաբերական և ոչ բացարձակ: Ամեն ինչ շատ պարզ է, քանի որ... եթե ընտրենք երկրորդ տարբերակը, ապա viewport overflow:hidden հատկությամբ մեզ բացարձակապես ոչինչ չի հայտնվի, քանի որ. տեսադաշտն ինքնին չի հարմարվի սլայդերի բարձրությանը, այդ իսկ պատճառով այն կունենա բարձրություն:0: Ինչու է լայնությունը կարևոր և ինչու ենք մենք այն ընդհանրապես դնում: Բանն այն է, որ մեր սլայդները կունենան տեսադաշտի 100%-ին հավասար լայնություն, և դրանք շարելու համար մեզ անհրաժեշտ է մի տեղ, որտեղ նրանք կկանգնեն, այնպես որ սլայդապատման լայնությունը պետք է հավասար լինի տեսադաշտի լայնության 100%-ին: բազմապատկած սլայդների քանակով (իմ դեպքում՝ 4): Ինչ վերաբերում է անցումային և անցումային-ժամկետային ֆունկցիային, ապա այստեղ 1s-ը նշանակում է, որ սլայդերի դիրքի փոփոխությունը տեղի կունենա 1 վայրկյանի ընթացքում, և մենք կդիտարկենք այն, իսկ ease-in-out-ը անիմացիայի տեսակ է, որտեղ այն սկզբում դանդաղ է ընթանում և արագանում է մինչև կեսը, այնուհետև նորից դանդաղում է, այստեղ կարող եք արժեքները սահմանել ձեր հայեցողությամբ:

Հատկությունների հաջորդ բլոկը սահմանում է սլայդերի և նրա երեխաների զրոյական լիցքավորումը, այստեղ մեկնաբանություններ պետք չեն:

Այնուհետև մենք ոճավորում ենք մեր սլայդները, դրանց լայնությունը պետք է հավասար լինի տեսադաշտի լայնությանը, բայց քանի որ... դրանք գտնվում են սլայդփաթաթայի մեջ, որի լայնությունը հավասար է տեսադաշտի լայնությանը բազմապատկած սլայդների քանակով, այնուհետև դիտակետի լայնությունը կրկին ստանալու համար մենք պետք է բաժանենք սլայդփաթաթայի լայնության 100%-ը սլայդների քանակի վրա (իմ դեպքում՝ կրկին. 4-ով): Այնուհետև մենք դրանք կվերածենք ներգծային տարրերի՝ օգտագործելով display:inline և կդնենք float-ը դեպի ձախ՝ ավելացնելով float:left հատկությունը: List-style:none-ի մասին Կարող եմ ասել, որ ես այն օգտագործում եմ li-ից լռելյայն նշիչը հեռացնելու համար, շատ դեպքերում դա մի տեսակ ստանդարտ է:

Slide-img-ի հետ ամեն ինչ պարզ է, պատկերը կզբաղեցնի սլայդի ողջ լայնությունը, սլայդը կհարմարվի իր բարձրությանը, սլայդապատիչը կհարմարվի սլայդի բարձրությանը, իսկ տեսադաշտի բարձրությունն իր հերթին կընդունի բարձրության արժեքը: slidewrapper-ի համար, ուստի մեր սլայդերի բարձրությունը կախված կլինի պատկերի համամասնություններից և բլոկի չափից, որը նախատեսված է սահիկի համար, որի մասին ես արդեն գրել եմ վերևում:

Կարծում եմ, այս պահին մենք պարզել ենք ոճերը, եկեք պատրաստենք պարզ սլայդ շոու՝ առանց կոճակների առայժմ, և երբ համոզվենք, որ այն ճիշտ է աշխատում, մենք կավելացնենք և ոճավորենք դրանք:

Եկեք բացենք մեր js ֆայլը, որը կպարունակի սլայդերի կոդը, մի մոռացեք միացնել jQuery-ն, քանի որ Մենք կգրենք՝ օգտագործելով այս շրջանակը։ Ի դեպ, այս հոդվածը գրելու պահին ես օգտագործում եմ jQuery 3.1.0 տարբերակը։ Սցենարով ֆայլն ինքնին պետք է ներառվի մարմնի պիտակի ամենավերջում, քանի որ մենք կաշխատենք DOM տարրերի հետ, որոնք նախ պետք է սկզբնավորվեն:

Առայժմ մենք պետք է հայտարարենք մի քանի փոփոխական, մեկը կպահի այն սլայդի թիվը, որը մենք տեսնում ենք ժամանակի որոշակի կետում, տեսադաշտում, ես այն անվանեցի slideNow, իսկ երկրորդը կպահի այս նույն սլայդների թիվը, սա slideCount-ն է:

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

SlideNow փոփոխականը պետք է սահմանվի 1 սկզբնական արժեքի, քանի որ Երբ էջը բեռնվում է, մեր նշագրման հիման վրա, մենք կտեսնենք առաջին սլայդը տեսադաշտում:

SlideCount-ում մենք կտեղադրենք slidewrapper-ի մանկական տարրերի քանակը, այստեղ ամեն ինչ տրամաբանական է:
Հաջորդը, դուք պետք է ստեղծեք գործառույթ, որը պատասխանատու կլինի սլայդները աջից ձախ փոխելու համար, եկեք հայտարարենք.

ֆունկցիան nextSlide() ()

Մենք այն կանվանենք մեր կոդի հիմնական բլոկում, որին կհասնենք ավելի ուշ, բայց առայժմ մենք կասենք մեր գործառույթին, թե ինչ պետք է անի.

ֆունկցիա nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ($("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else (translateWidth = -$("#viewport").width() * (slideNow) $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-); transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)", )); slideNow++; ) )

Սկզբում մենք ստուգում ենք, արդյոք մենք ներկայումս գտնվում ենք մեր թարմացվող բովանդակության վերջին սլայդում: Դա անելու համար մենք վերցնում ենք մեր բոլոր սլայդների թիվը՝ օգտագործելով $("#slidewrapper").children().length և ստուգում ենք այն մեր սլայդի թվի հետ, եթե դրանք հավասար են, ապա դա նշանակում է, որ մենք պետք է սկսենք ցույց տալ: թարմացվող բովանդակությունը նորից՝ 1 սլայդից, ինչը նշանակում է, որ մենք փոխում ենք slidewrapper-ի CSS փոխակերպման հատկությունը translate(0, 0)՝ այդպիսով տեղափոխելով այն իր սկզբնական դիրքի, որպեսզի առաջին սլայդը լինի մեր տեսադաշտում, չմոռանանք նաև: մասին –webkit-ը և –ms-ը բրաուզերի համարժեք ցուցադրման համար (տես. css հատկությունների հղում): Դրանից հետո մի մոռացեք թարմացնել slideNow փոփոխականի արժեքը՝ ասելով, որ 1-ին սլայդը դիտվում է՝ slideNow = 1;

Նույն պայմանը ներառում է ստուգել, որ մեր տեսած սլայդի թիվը մեր սլայդների քանակի մեջ է, բայց եթե ինչ-որ կերպ դա չկատարվի, ապա մենք նորից կվերադառնանք 1-ին սլայդին:

Եթե առաջին պայմանը չի կատարվում, ապա դա նշանակում է, որ մենք ներկայումս ոչ վերջին սլայդում ենք, ոչ էլ գոյություն չունեցող սլայդում, ինչը նշանակում է, որ մենք պետք է անցնենք հաջորդին, մենք դա կանենք՝ սլայդփաթաթը տեղափոխելով ձախ։ տեսադաշտի լայնությանը հավասար արժեքով, տեղաշարժը կրկին տեղի կունենա translate-ի ծանոթ հատկության միջոցով, որի արժեքը հավասար կլինի «translate(» + translateWidth + «px, 0)», որտեղ translateWidth այն հեռավորությունն է, որով մեր slidewrapper-ը տեղաշարժված է: Ի դեպ, եկեք հայտարարենք այս փոփոխականը մեր կոդի սկզբում.

var translateWidth = 0;

Հաջորդ սլայդին անցնելուց հետո մեր slideNow-ին ասենք, որ տեսնում ենք հաջորդ սլայդը՝ slideNow++;

Այս պահին որոշ ընթերցողներ կարող են հետաքրքրվել. ինչու՞ մենք չենք փոխարինել $("#viewport").width() որոշ փոփոխականով, ինչպիսին է slideWidth-ը, որպեսզի միշտ ձեռքի տակ ունենանք մեր սլայդի լայնությունը: Պատասխանը շատ պարզ է, եթե մեր կայքը հարմարվողական է, ապա, համապատասխանաբար, սլայդերի համար հատկացված բլոկը նույնպես հարմարվողական է, դրա հիման վրա մենք կարող ենք հասկանալ, որ առանց էջը վերաբեռնելու պատուհանի լայնությունը չափափոխելիս (օրինակ՝ հեռախոսը միացնելը. դրա կողմը), տեսադաշտի լայնությունը կփոխվի, և, համապատասխանաբար, մեկ սլայդի լայնությունը կփոխվի: Այս դեպքում, մեր սլայդը կտեղափոխվի ի սկզբանե եղած լայնության արժեքին, ինչը նշանակում է, որ պատկերները կցուցադրվեն մասերով կամ ընդհանրապես չեն ցուցադրվի տեսադաշտում: Մեր ֆունկցիայի մեջ գրելով $("#viewport").width() slideWidth-ի փոխարեն, մենք ստիպում ենք նրան հաշվարկել տեսադաշտի լայնությունը ամեն անգամ, երբ մենք փոխում ենք սլայդները, դրանով իսկ ապահովելով, որ երբ էկրանի լայնությունը կտրուկ փոխվի, այն ոլորվի դեպի մեզ անհրաժեշտ սլայդը:

Այնուամենայնիվ, մենք գրել ենք ֆունկցիա, այժմ պետք է այն կանչել որոշակի ժամանակային ընդմիջումից հետո, կարող ենք նաև պահել ինտերվալը փոփոխականում, որպեսզի եթե ցանկանում ենք փոխել այն, կարող ենք փոխել միայն մեկ արժեք կոդի մեջ.

var slideInterval = 2000;

js-ում ժամանակը նշված է միլիվայրկյաններով:

Այժմ գրենք հետևյալ շինարարությունը.

$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));

Այստեղ ամեն ինչ չի կարող ավելի պարզ լինել $(document).ready(function () ()) կառուցման միջոցով, մենք ասում ենք, որ հետևյալ գործողությունները պետք է կատարվեն փաստաթղթի ամբողջական բեռնումից հետո: Հաջորդը, մենք պարզապես կանչում ենք nextSlide ֆունկցիան slideInterval-ին հավասար ընդմիջումով՝ օգտագործելով ներկառուցված setInterval ֆունկցիան։

Վերևում կատարած բոլոր քայլերից հետո մեր սլայդը պետք է կատարյալ պտտվի, բայց եթե ինչ-որ բան սխալ է, ապա խնդիրը կարող է լինել կամ jQuery տարբերակում կամ որևէ ֆայլի սխալ միացման մեջ: Կարիք չկա նաև բացառելու, որ դուք կարող էիք ինչ-որ տեղ սխալ թույլ տալ կոդի մեջ, ուստի կարող եմ միայն խորհուրդ տալ ձեզ կրկնակի ստուգել ամեն ինչ։

Միևնույն ժամանակ, եկեք առաջ շարժվենք, մեր սահիկին ավելացնենք այնպիսի գործառույթ, ինչպիսին է կուրսորը սավառնելիս ոլորումը դադարեցնելը Դա անելու համար մենք պետք է գրենք հետևյալը կոդի հիմնական բլոկում ($(document).ready(-ի ներսում: ֆունկցիա () ()) կառուցվածք:

$("#viewport").hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Այս կոդը վերլուծելու համար մենք պետք է իմանանք, թե ինչ է switchInterval-ը: Նախ, սա փոփոխական է, որը պահում է հերթական զանգը nextSlide ֆունկցիային, պարզ ասած, մենք ունենք կոդի այս տողը. setInterval(nextSlide, slideInterval); , վերածվեց սրա՝ switchInterval = setInterval(nextSlide, slideInterval); . Այս մանիպուլյացիաներից հետո մեր կոդի հիմնական բլոկը ստացավ հետևյալ ձևը.

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").սավառնել(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval);

Այստեղ ես օգտագործում եմ սավառնող իրադարձությունը, որը նշանակում է «սավերի վրա», այս իրադարձությունն ինձ թույլ է տալիս հետևել այն պահին, երբ ես սավառնում եմ կուրսորը օբյեկտի, այս դեպքում՝ դիտակետի վրա:

Սավառնելուց հետո ես մաքրում եմ այն ինտերվալը, որը նշում եմ փակագծերում (սա մեր switchInterval-ն է), այնուհետև, բաժանված ստորակետերով, գրում եմ, թե ինչ կանեմ, երբ կուրսորը հետ տեղափոխեմ, այս բլոկում ես կրկին վերագրում եմ մեր switchInterval-ը պարբերականի։ զանգահարել nextSlide ֆունկցիային:

Այժմ, եթե փորձարկենք, մենք կարող ենք տեսնել, թե ինչպես է մեր սլայդը արձագանքում սավառնելիս՝ կանգնեցնելով սլայդի անցումը:

Այժմ ժամանակն է կոճակներ ավելացնել մեր սահիկին, սկսենք առաջ և հետ կոճակներից:

Նախ նշենք դրանք.

Սկզբում այս նշումը կարող է անհասկանալի լինել, ես անմիջապես կասեմ, որ ես այս երկու կոճակները փաթաթել եմ մեկ div-ի մեջ prev-next-btns դասի հետ հենց ձեր հարմարության համար, դուք պետք չէ դա անել, արդյունքը չի լինի: փոխել, հիմա մենք կավելացնենք նրանց ոճերը, և ամեն ինչ լավ կլինի Պարզ է.

#prev-btn, #next-btn ( դիրքը՝ բացարձակ; լայնությունը՝ 50px; բարձրությունը՝ 50px; ֆոնի գույնը՝ #fff; եզրագծի շառավիղը՝ 50%, վերև՝ հաշվարկ (50% - 25px); ) #prev- btn:shover, #next-btn:hover ( կուրսորը՝ ցուցիչ; ) #prev-btn (ձախ՝ 20px; ) #next-btn (աջ՝ 20px; )

Նախ, մենք տեղադրում ենք մեր կոճակները՝ օգտագործելով position:absolute, դրանով իսկ ազատորեն վերահսկելով դրանց դիրքը մեր տեսադաշտում, այնուհետև մենք կճշգրտենք այս կոճակների չափերը և կօգտագործենք եզրագծի շառավիղը՝ անկյունները կլորացնելու համար, որպեսզի այդ կոճակները վերածվեն շրջանակների: Դրանց գույնը կլինի սպիտակ, այսինքն՝ #fff, և տեսադաշտի վերին եզրից նրանց շեղումը հավասար կլինի այս տեսադաշտի բարձրության կեսին՝ հանած բուն կոճակի բարձրության կեսը (իմ դեպքում՝ 25px), այնպես որ մենք կարող ենք։ դրանք ուղղահայաց տեղադրեք կենտրոնում: Այնուհետև մենք կնշենք, որ երբ սավառնում ենք դրանց վրա, մեր կուրսորը կվերածվի ցուցիչի, և վերջապես մենք առանձին-առանձին կասենք մեր կոճակներին, որ դրանք պետք է լինեն 20px հեռավորության վրա իրենց եզրերից, որպեսզի կարողանանք տեսնել դրանք մեզ հարմար ձևով: .

Կրկին, դուք կարող եք ոճավորել էջի տարրերը այնպես, ինչպես ցանկանում եք, ես պարզապես օրինակ եմ բերում այն ոճերը, որոնք ես որոշեցի օգտագործել:

Ոճավորելուց հետո մեր սահիկը պետք է նման լինի.

Հաջորդը, նորից գնացեք մեր js ֆայլը, որտեղ մենք նկարագրելու ենք մեր կոճակների աշխատանքը: Դե, եկեք ավելացնենք ևս մեկ գործառույթ, այն մեզ ցույց կտա նախորդ սլայդը.

ֆունկցիա prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ))

Այն կոչվում է prevSlide և կկանչվի միայն այն դեպքում, երբ սեղմվի prev-btn: Սկզբում մենք ստուգում ենք՝ 1-ին սլայդում ենք, թե ոչ, այստեղ նաև ստուգում ենք, թե արդյոք մեր slideNow-ը դուրս է եկել մեր սլայդների իրական տիրույթից և, եթե պայմաններից որևէ մեկը ճիշտ է, մենք կտեղափոխվենք դեպի վերջին սլայդը՝ շարժելով սլայդփաթաթը։ այն արժեքին, որը մեզ անհրաժեշտ է: Մենք հաշվարկելու ենք այս արժեքը՝ օգտագործելով բանաձևը՝ (մեկ սլայդի լայնությունը) * (սլայդների թիվը՝ 1), այս ամենը վերցնում ենք մինուս նշանով, քանի որ. մենք այն տեղափոխում ենք ձախ, պարզվում է, որ տեսադաշտն այժմ մեզ ցույց կտա վերջին սլայդը։ Այս բլոկի վերջում մենք նաև պետք է ասենք slideNow փոփոխականին, որ վերջին սլայդն այժմ մեր տեսադաշտում է:

Եթե մենք առաջին սլայդում չենք, ապա մենք պետք է հետ գնանք 1, դրա համար մենք կրկին փոխում ենք slidewrapper-ի փոխակերպման հատկությունը: Բանաձևը հետևյալն է՝ (մեկ սլայդի լայնությունը) * (ընթացիկ սլայդի թիվը՝ 2), նորից այս ամենը վերցնում ենք մինուս նշանով։ Բայց ինչո՞ւ -2, և ոչ թե -1, պետք է ընդամենը 1 սահիկով հետ շարժվենք: Փաստն այն է, որ եթե մենք գտնվում ենք, ասենք, 2-րդ սլայդում, ապա մեր սլայդապատման վերափոխման:translate(x,0) հատկության x փոփոխականն արդեն հավասար է մեկ սլայդի լայնությանը, եթե ասենք, որ մեզ անհրաժեշտ է. ընթացիկ սլայդի թվից հանելու համար 1-ը, այնուհետև մենք նորից կստանանք մեկը, որով սլայդապատողն արդեն տեղաշարժված է, ուստի մեզ պետք կլինի նույն տեսադաշտի լայնությունները տեղափոխել 0-ով, ինչը նշանակում է slideNow - 2-ում:

Այժմ մենք պարզապես պետք է ավելացնենք այս տողերը կոդի հիմնական բլոկին.

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() (prevSlide(); ));

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

Այժմ եկեք ավելացնենք սլայդ նավիգացիոն կոճակները և նորից վերադառնանք նշագրմանը.

Ինչպես տեսնում եք, տեսադաշտի ներսում հայտնվել է ներդիր ցուցակ, եկեք նրան տանք նույնացուցիչը nav-btns, դրա ներսում կան մեր նավիգացիոն կոճակները, մենք նրանց կվերագրենք slide-nav-btn դասը, սակայն կարող ենք ավարտել. նշագրումը, եկեք անցնենք ոճերին.

#nav-btns (դիրքը՝ բացարձակ; լայնությունը՝ 100%, ներքևում՝ 20px; լիցք՝ 0; լուսանցք՝ 0; տեքստի հավասարեցում՝ կենտրոն; ) .slide-nav-btn (դիրքը՝ հարաբերական; ցուցադրում՝ inline-block; list-style. ոչ մի լայնություն՝ 20px, ֆոնային գույն՝ #fff.

Մենք nav-btns բլոկին, որի մեջ գտնվում են մեր կոճակները, տալիս ենք հատկության դիրքը:absolute, որպեսզի այն չձգվի տեսադաշտը բարձրությամբ, քանի որ. slidewrapper-ն ունի դիրք:հարաբերական հատկություն, մենք սահմանում ենք լայնությունը 100%, որպեսզի կոճակները հորիզոնական կենտրոնացնենք տեսադաշտի նկատմամբ՝ օգտագործելով text-align:center, այնուհետև օգտագործելով ներքևի հատկությունը՝ մենք հայտնում ենք, որ այն պետք է լինի հեռավորության վրա: 20px ստորին եզրից:

Կոճակներով մենք անում ենք նույնը, ինչ սլայդների հետ, բայց հիմա նրանց տալիս ենք display:inline-block, քանի որ հետ display:inline նրանք չեն արձագանքում լայնությանը և բարձրությանը, քանի որ գտնվում են բացարձակապես դիրքավորված բլոկում: Դարձնենք դրանք սպիտակ և, օգտագործելով արդեն ծանոթ սահման-շառավիղը, շրջանագծի տեսք տանք։ Երբ մենք սավառնում ենք դրանց վրա, մենք կփոխենք մեր կուրսորի տեսքը սովորական ցուցադրման համար:

Այժմ եկեք իջնենք jQuery մասի վրա.
Նախ, եկեք հայտարարենք navBtnId փոփոխական, որը կպահի մեր սեղմած կոճակի ինդեքսը.

var navBtnId = 0;
$(".slide-nav-btn"): սեղմեք (function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) (translateWidth = -$("#viewport"): width() * (navBtnId) $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth); + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)", ));

Այստեղ, երբ սեղմում ենք մեր slide-nav-btn-ի վրա, կանչում ենք մի ֆունկցիա, որն առաջին հերթին վերագրում է navBtnId փոփոխականին սեղմված կոճակի ինդեքսը, այսինքն՝ դրա սերիական համարը, քանի որ հետհաշվարկը սկսվում է զրոյից, ապա եթե մենք. սեղմում ենք երկրորդ կոճակը, այնուհետև գրվում է navBtnId արժեքը 1: Այնուհետև մենք ստուգում ենք, որտեղ կոճակի սերիական համարին ավելացնում ենք մեկը, որպեսզի ստանանք թիվ, կարծես հետհաշվարկը սկսվել է ոչ թե 0-ից, այլ 1-ից. Համեմատեք այս թիվը ընթացիկ սլայդի թվի հետ, եթե դրանք համընկնում են, ապա մենք որևէ գործողություն չենք ձեռնարկի, քանի որ ցանկալի սլայդն արդեն տեսադաշտում է:

Եթե մեզ անհրաժեշտ սլայդը տեսադաշտում չէ, ապա մենք հաշվարկում ենք այն հեռավորությունը, որով պետք է տեղափոխենք սլայդփաթաթը դեպի ձախ, այնուհետև փոխենք CSS փոխակերպման հատկության արժեքը թարգմանելու համար (նույն հեռավորությունը պիքսելներով, 0: ) Մենք դա արդեն արել ենք ավելի քան մեկ անգամ, ուստի հարցեր չպետք է լինեն: Վերջում մենք կրկին պահում ենք ընթացիկ սլայդի արժեքը slideNow փոփոխականում, այս արժեքը կարելի է հաշվարկել սեղմված կոճակի ինդեքսին ավելացնելով:

Այսքանն է, իրականում, եթե ինչ-որ բան պարզ չէ, ապա ես հղում կթողնեմ jsfiddle-ին, որտեղ կտրամադրվի նյութում գրված ամբողջ կոդը:

Շնորհակալություն ուշադրության համար!

Պիտակներ. Ավելացնել պիտակներ

1. Գերազանց jQuery Slideshow

Մեծ, տպավորիչ սլայդ շոու՝ օգտագործելով jQuery տեխնոլոգիաները:

2. jQuery plugin «Scale Carousel»

Scalable Slideshow՝ օգտագործելով jQuery: Դուք կարող եք սահմանել սլայդերի ցուցադրման չափերը, որոնք լավագույնս համապատասխանում են ձեզ:

3. jQuery plugin «slideJS»

Պատկերի սահիչ տեքստի նկարագրությամբ:

4. Plugin “JSliderNews” 5. CSS3 jQuery սահիչ

Երբ սավառնում եք նավիգացիոն սլաքների վրա, հայտնվում է հաջորդ սլայդի շրջանաձև մանրապատկերը:

6. Գեղեցիկ jQuery «Ներկայացման ցիկլ» սահիչ

jQuery սլայդեր պատկերի բեռնման ցուցիչով: Տրամադրվում է սլայդի ավտոմատ փոփոխություն:

7. jQuery plugin «Parallax Slider»

Slider ծավալային ֆոնային էֆեկտով: Այս սլայդերի ուշագրավը ֆոնի շարժումն է, որը բաղկացած է մի քանի շերտերից, որոնցից յուրաքանչյուրը պտտվում է տարբեր արագությամբ։ Արդյունքը ծավալային էֆեկտի իմիտացիա է։ Շատ գեղեցիկ տեսք ունի, կարող եք ինքներդ տեսնել։ Էֆեկտն ավելի սահուն է ցուցադրվում այնպիսի բրաուզերներում, ինչպիսիք են Opera, Google Chrome, IE:

8. Թարմ, թեթև jQuery սահիչ «bxSlider 3.0»

«Օրինակներ» բաժնում ցուցադրական էջում կարող եք գտնել այս հավելվածի բոլոր հնարավոր օգտագործման հղումները:

9. jQuery պատկերի սլայդեր, «slideJS» փլագին

Նորաոճ jQuery սլայդերը, անշուշտ, կարող է զարդարել ձեր նախագիծը:

10. jQuery slideshow plugin «Easy Slides» v1.1

Հեշտ օգտագործվող jQuery պլագին սլայդերի ստեղծման համար:

11. jQuery Slidy plugin

Թեթև jQuery plugin տարբեր տարբերակներով: Տրամադրվում է սլայդի ավտոմատ փոփոխություն:

12. jQuery CSS պատկերասրահ՝ սլայդի ավտոմատ փոփոխմամբ

Եթե այցելուն որոշակի ժամանակում չսեղմի «Առաջ» կամ «Հետ» սլաքները, պատկերասրահը կսկսի ինքնաբերաբար ոլորել:

13. jQuery սլայդեր «Nivo Slider»

Շատ պրոֆեսիոնալ, բարձրորակ, թեթև հավելված՝ վավեր կոդով: Կան բազմաթիվ տարբեր սլայդների անցումային էֆեկտներ:

14. jQuery սլայդեր «MobilySlider»

Թարմ սահիկ: jQuery սլայդեր՝ տարբեր պատկերների փոփոխման էֆեկտներով:

15. jQuery Plugin «Slider²»

Թեթև սահիչ՝ ավտոմատ սլայդ փոխարկիչով:

16. Թարմ javascript սլայդեր

Սլայդեր՝ պատկերի ավտոմատ փոփոխությամբ:

Փլագին սլայդ շոուների իրականացման համար՝ սլայդների ավտոմատ փոփոխմամբ: Հնարավոր է կառավարել էկրանը՝ օգտագործելով պատկերների մանրապատկերները:

jQuery CSS պատկերի սահիչը՝ օգտագործելով NivoSlider հավելվածը:

19. jQuery սլայդ «jShowOff»

Պլագին բովանդակության ռոտացիայի համար: Օգտագործման երեք տարբերակ՝ առանց նավարկության (սլայդ շոուի ձևաչափի ավտոմատ փոփոխությամբ), կոճակների տեսքով նավիգացիա, պատկերի մանրապատկերների տեսքով նավիգացիա։

20. Shutter Effect Portfolio հավելված

Թարմ jQuery հավելված՝ լուսանկարչի պորտֆոլիոյի նախագծման համար: Պատկերասրահը պատկերները փոխելու հետաքրքիր էֆեկտ ունի: Լուսանկարները հաջորդում են միմյանց՝ ոսպնյակի կափարիչի աշխատանքին նման էֆեկտով:

21. Թեթև javascript CSS սահիչ «TinySlider 2»

Պատկերի սլայդերի ներդրում Javascript-ի և CSS-ի միջոցով:

22. Հրաշալի սահիչ «Tinycircleslider»

Նորաձև կլոր սահիկ: Պատկերների միջև անցումը կատարվում է սահիկը շրջագծի շուրջ կարմիր շրջանագծի տեսքով քաշելով: Այն հիանալի կտեղավորվի ձեր կայքի մեջ, եթե ձեր դիզայնում օգտագործեք կլոր տարրեր:

23. Պատկերի սլայդեր jQuery-ով

Թեթև սահիչ «Slider Kit»: Սլայդերը հասանելի է տարբեր դիզայնով՝ ուղղահայաց և հորիզոնական: Իրականացվում են նաև պատկերների միջև նավիգացիայի տարբեր տեսակներ՝ օգտագործելով «Առաջ» և «Հետ» կոճակները, օգտագործելով մկնիկի անիվը, օգտագործելով մկնիկի սեղմումը սլայդի վրա:

24. Պատկերասրահ մանրանկարներով «Slider Kit»

Պատկերասրահ «Slider Kit». Մանրապատկերների ոլորումն իրականացվում է ինչպես ուղղահայաց, այնպես էլ հորիզոնական: Պատկերների միջև անցումը կատարվում է օգտագործելով՝ մկնիկի անիվը, մկնիկի սեղմումը կամ կուրսորը սավառնելը մանրապատկերի վրա:

25. jQuery բովանդակության սահիչ «Slider Kit»

Ուղղահայաց և հորիզոնական բովանդակության սահիչ՝ օգտագործելով jQuery:

26. jQuery սլայդշոու «Slider Kit»

Սլայդերի ցուցադրում սլայդի ավտոմատ փոփոխմամբ:

27. Թեթև պրոֆեսիոնալ javascript CSS3 սահիչ

jQuery և CSS3 կոկիկ սլայդեր, որը ստեղծվել է 2011 թվականին:

jQuery սլայդերի ցուցադրում մանրապատկերներով:

29. Պարզ jQuery սլայդշոու

Սլայդերի ցուցադրում նավիգացիոն կոճակներով:

30. Հրաշալի jQuery «Skitter» սլայդշոու

jQuery Skitter հավելված՝ ցնցող սլայդ շոուներ ստեղծելու համար: Պլագինը աջակցում է 22 (!) տեսակի տարբեր անիմացիոն էֆեկտների պատկերները փոխելու ժամանակ: Կարող է աշխատել սլայդների նավիգացիայի երկու տարբերակների հետ՝ օգտագործելով սլայդների համարներ և օգտագործելով մանրապատկերներ: Համոզվեք, որ դիտեք ցուցադրությունը, շատ բարձր որակի գտածո: Օգտագործված տեխնոլոգիաներ՝ CSS, HTML, jQuery, PHP:

31. Սլայդ շոու «Անհարմար»

Ֆունկցիոնալ սլայդ շոու: Սլայդները կարող են լինել՝ պարզ պատկերներ, մակագրություններով պատկերներ, գործիքների հուշումներով պատկերներ, տեսանյութեր։ Նավարկելու համար կարող եք օգտագործել սլաքները, սլայդների համարների հղումները և ստեղնաշարի ձախ/աջ ստեղները: Սլայդ շոուն գալիս է մի քանի տարբերակով՝ մանրապատկերներով և առանց մանրապատկերների: Բոլոր տարբերակները դիտելու համար հետևեք Դեմո #1 - Դեմո #6 հղումներին, որոնք գտնվում են ցուցադրական էջի վերևում:

Շատ օրիգինալ դիզայն պատկերի սլայդերի համար, որը հիշեցնում է երկրպագու: Անիմացիոն սլայդների անցում: Նկարների միջև նավարկությունն իրականացվում է սլաքների միջոցով: Կա նաև ավտոմատ հերթափոխ, որը կարելի է միացնել և անջատել՝ օգտագործելով Play/Pause կոճակը, որը գտնվում է վերևում:

Անիմացիոն jQuery սլայդեր: Ֆոնային պատկերները ավտոմատ կերպով մեծանում են, երբ դիտարկիչի պատուհանի չափը փոխվում է: Յուրաքանչյուր պատկերի համար հայտնվում է նկարագրությամբ բլոկ:

34. «Flux Slider» սահիչը՝ օգտագործելով jQuery և CSS3

Նոր jQuery սլայդեր: Մի քանի զով անիմացիոն էֆեկտներ սլայդները փոխելիս:

35. jQuery plugin «jSwitch»

Անիմացիոն jQuery պատկերասրահ:

Հեշտ jQuery սլայդ շոու՝ սլայդերի ավտոմատ փոփոխմամբ:

37. «SlideDeck 1.2.2» հավելվածի նոր տարբերակը

Պրոֆեսիոնալ բովանդակության սլայդեր: Կան տարբերակներ՝ սլայդների ավտոմատ փոփոխմամբ, ինչպես նաև մկնիկի անիվով սլայդների միջև տեղաշարժվելու տարբերակ:

38. jQuery slider «Sudo Slider»

Թեթև պատկերի սահիչ՝ օգտագործելով jQuery: Իրականացման բազմաթիվ տարբերակներ կան՝ պատկերների հորիզոնական և ուղղահայաց փոփոխություն, սլայդի համարի հղումներով և առանց դրանց, պատկերի ենթագրերով և առանց, պատկերների փոփոխման տարբեր էֆեկտներ: Կա սլայդի փոփոխման ավտոմատ գործառույթ: Կատարման բոլոր օրինակների հղումները կարելի է գտնել ցուցադրական էջում:

39. jQuery CSS3 սլայդշոու

Սլայդերի ցուցադրումը մանրապատկերներով աջակցում է սլայդների փոփոխման ավտոմատ ռեժիմը:

40. jQuery slider «Flux Slider»

Սլայդեր բազմաթիվ պատկերների փոփոխման էֆեկտներով:

41. Պարզ jQuery սլայդեր

Նորաձև պատկերի սահիչ՝ օգտագործելով jQuery: