Html - Ֆոնային պատկերի սահիչ՝ օգտագործելով սահուն սահիչը - Stack Overflow ռուսերեն: Տեսախցիկի հարմարվողական սլայդերների ընտրանի՝ անվճար JQuery սլայդեր

Ժամանակը կանգ չի առնում, և դրա հետ մեկտեղ առաջընթացը: Սա ազդեց նաև ինտերնետի վրա։ Դուք արդեն կարող եք տեսնել, թե ինչպես է փոխվում վեբկայքերի արտաքին տեսքը հատկապես տարածված. Եվ այս առումով բավականին նորեր են հայտնվել հարմարվողական jquery սլայդերներ, պատկերասրահներ, կարուսելներ կամ նմանատիպ հավելումներ։
1. Պատասխանատու Հորիզոնական Գրառումների Slider

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

2. Slider Glide.js-ում

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

3. Թեքված բովանդակության սլայդշոու

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

4. Slider օգտագործելով HTML5 կտավ

Շատ գեղեցիկ և տպավորիչ սահիկ՝ ինտերակտիվ մասնիկներով: Այն պատրաստված է HTML5 կտավով,

5. Image Morphing Slider

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

6. Շրջանաձև սահիկ

Սահեցրեք շրջանակի տեսքով՝ պատկերը շրջելու էֆեկտով։

7. Լղոզված ֆոնով սլայդեր

Հարմարվող սահիչ՝ անջատիչով և ֆոնի պղտորմամբ:

8. Արձագանքող նորաձեւության սլայդեր

Պարզ, հեշտ և հարմարվողական սահիչկայքի համար։

9. Slicebox - jQuery 3D պատկերի սահիչ(ԹԱՐՄԱՑՎԱԾ)

Slicebox slider-ի թարմացված տարբերակը՝ ուղղումներով և նոր հնարավորություններով:

10. Անվճար անիմացիոն արձագանքող պատկերների ցանց

JQuery հավելված՝ պատկերների ճկուն ցանց ստեղծելու համար, որը կփոխի նկարները՝ օգտագործելով տարբեր անիմացիաներ և ժամանակացույցեր: Սա կարող է լավ տեսք ունենալ որպես կայքի ֆոն կամ դեկորատիվ տարր, քանի որ մենք կարող ենք ընտրողաբար ցուցադրել նոր պատկերներ և դրանց անցումները: Փլագինը գալիս է մի քանի տարբերակներով:

11.Flex slider

Համընդհանուր անվճար հավելված ձեր կայքի համար: Այս փլագինը գալիս է մի քանի սլայդերի և կարուսելի տարբերակներով:

12. Լուսանկարների շրջանակ

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

P.S.Ես մի քանի անգամ տեղադրել եմ սլայդերը և կարծում եմ, որ այն լավագույններից է

13. Անվճար և հարմարվողական 3D սլայդեր պատկերասրահ՝ մանրապատկերներով:

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

14. Slider css3-ում

Հարմարվողական սլայդերը պատրաստված է css3-ի միջոցով՝ բովանդակության հարթ տեսքով և թեթև անիմացիայով:

15. WOW Slider

WOW Sliderզարմանալի տեսողական էֆեկտներով պատկերի սլայդեր է:

17. Էլաստիկ

Էլաստիկ սահիչ՝ լիարժեք արձագանքողությամբ և սլայդների մանրապատկերներով:

18. Ճեղք

Սա ամբողջ էկրանով արձագանքող սլայդեր է՝ օգտագործելով css3 անիմացիա: Սլայդերը պատրաստված է երկու տարբերակով. Անիմացիան արված է բավականին անսովոր և գեղեցիկ։

19. Հարմարվողական լուսանկարների պատկերասրահ գումարած

Պարզ անվճար պատկերասրահի սահիչ՝ պատկերի բեռնմամբ:

20. Պատասխանատու սլայդեր WordPress-ի համար

Հարմարվողական անվճար սահիչ WP-ի համար:

21. Parallax Content Slider

Slider պարալաքսի էֆեկտով և յուրաքանչյուր տարրի կառավարմամբ օգտագործելով CSS 3.

22. Երաժշտական ​​հղմամբ սլայդեր

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

23. Slider jmpress.js-ով

Պատասխանող սլայդերը հիմնված է jmpress.js-ի վրա և, հետևաբար, թույլ կտա ձեզ ավելացնել մի քանի հետաքրքիր 3D էֆեկտներ ձեր սլայդներին:

24. Fast Hover Slideshow

Սլայդ շոու սլայդերի արագ փոխարկմամբ: Սլայդները միացնում են սավառնումը:

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

Պատկերի ակորդեոն՝ օգտագործելով css3:

26. A Touch Optimized Gallery Plugin

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

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

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

28. Սլայդեր՝ էջադրությամբ

Պատասխանող սահիչ՝ էջադրմամբ՝ օգտագործելով JQuery UI սահիչը: Գաղափարը պարզ նավիգացիոն հայեցակարգ օգտագործելն է: Հնարավոր է բոլոր պատկերները հետ շրջել կամ սլայդ առ սլայդ անցնել:

29.Image Montage jQuery-ով

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

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

Պարզ 3D շրջանաձև սահիչ՝ օգտագործելով css3 և jQuery:

31. Ամբողջ էկրանով ռեժիմ՝ 3D էֆեկտով՝ օգտագործելով css3 և jQuery

Գեղեցիկ անցումով լիաէկրան պատկերներ դիտելու ունակությամբ սլայդեր:

Այս սլայդը հեշտ է տեղադրվում, և եթե այն հասկանաք, կարող եք հեշտությամբ կարգավորել այն և հասնել ցանկալի արդյունքի: Որպեսզի այս սլայդը աշխատի, ձեզ հարկավոր է ընդամենը մի քանի տարր, որոնք մենք այժմ կդիտարկենք ըստ հերթականության:

HTML նշում

Այստեղ ամեն ինչ շատ պարզ է, պարզապես անհրաժեշտ է ավելացնել UL ցուցակը հենց սկզբում պիտակից անմիջապես հետո մարմինը.

Ցանկում ընդամենը երեք տող կա լի, այսինքն՝ սլայդերը նախատեսված է 3 պատկերի համար, եթե ավելին է պետք, ապա առաջին քայլը անհրաժեշտ թվով տողերի ավելացումն է։ Անցնենք առաջ։

CSS ոճեր

Սա, հավանաբար, աշխատանքի ամենակարևոր մասն է, քանի որ մեր սլայդը ինչպես կաշխատի, կախված է CSS-ից: Բացեք ձեր կայքի ոճային ֆայլը և դրան ավելացրեք հետևյալ կոդը.

Body_slides( list-style: none; margin:0; padding:0; z-index:-2; background:#000;) վերև:0px;) .body_slides:after (բովանդակություն:""; ֆոն. թափանցիկ url(images/pattern.png) կրկնել վերևի ձախ;).body_slides li(լայնություն:100%;բարձրություն:100%; position:absolute:0;none -webkit-animation: 18s գծային 0s գծային անսահման 0s; 1.jpg) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2. jpg) ) body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) ) @-webkit -հիմնական կադրեր anim_slides ( 0% (անթափանցություն:0;) 6% (անթափանցություն:1;) 24% (անթափանցություն:1;) 30% (անթափանցություն:0;) 100% (անթափանցություն:0;) ) @-moz-keyframes anim_slides ( 0% (անթափանցություն:0;) 6% (անթափանցություն:1;) 24% (անթափանցություն:1;) 30% (անթափանցություն:0;) 100% (անթափանցություն:0;) )

Եթե ​​հասկանում եք CSS-ը, ապա ձեզ համար դժվար չի լինի հասկանալ, թե ինչի համար է պատասխանատու։ Ես ձեզ կասեմ նվազագույնը, քանի որ CSS դասավանդելը իմաստ չունի:

Սլայդներով մեր ցուցակն ունի դաս body_slides. Դրա համար տրված են ոճեր տեսքըև ընդհանուր պարամետրեր:

Հաջորդը մենք ունենք կեղծ տարր. :հետո, որը սահմանում է լրացուցիչ շերտ և ֆոնի վերևում դրված է կետերի ձևով նախշ: Դա արվում է օգտագործելով այն պատկերը, որի ուղին նշված է images/pattern.png. Եթե ​​դուք այլ ճանապարհ ունեք, խնդրում ենք ճիշտ նշել այն:

.body_slides li:nth-child(1)- սա հերթականությամբ առաջին սլայդն է և ունի ֆոնային պատկեր: Հաջորդը գալիս է nth-child(2), բացի նկարից տրվում է մեկ այլ ժամանակ և հավասար է 6 վայրկյանի։ Այսինքն՝ այն կհայտնվի առաջին սլայդից 6 վայրկյան հետո։ Հաջորդը nth-child(3) է, այն կհայտնվի ևս վեց վայրկյանից, ուստի այն ունի 12 վայրկյան ժամանակ: Եթե ​​Ձեզ անհրաժեշտ է ավելացնել 4-րդ սլայդը, ապա ավելացրեք nth-child(4) և այն արդեն պետք է ունենա 18 վայրկյան ժամանակ: Կարծում եմ՝ սա պարզ է։

Հաջորդը դուք պետք է նշեք անիմացիայի ամբողջական ժամանակը, այն այժմ դրված է body_slidesև հավասար է 18 վայրկյանի: Եթե ​​ավելացնեք 4 սլայդ, այն հավասար կլինի 24-ի և այլն։ Եթե ​​դուք լավ եք մաթեմատիկայից, ապա պետք է կարողանաք գլուխ հանել դրանից, գլխավորը սխալներ թույլ չտաք, քանի որ սլայդերը ընդհանրապես չի աշխատի: Ցանկության դեպքում կարող եք արագացնել կամ դանդաղեցնել արագությունը՝ սահմանելով ցանկալի ժամանակը:

առանցքային կադրեր anim_slides- սա սլայդի տեսքն ու անհետացումն է: Սկզբում սլայդը թափանցիկ է, և նրան տրվում է պայման. անթափանցիկություն:0;. Երբ հերթը հասնում է սլայդներից որևէ մեկին, այն սկզբում հայտնվում է, իսկ հետո նորից սկսում է թափանցիկ դառնալ և ամբողջովին անհետանում է, իսկ տեղում հայտնվում է նորը։ Եթե ​​ցանկանում եք փոխել տեսքի կամ անհետացման արագությունը, փոխեք տոկոսը՝ սա ընդհանուր ժամանակի տոկոսն է:

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

Այսքանը, շնորհակալություն ուշադրության համար: 🙂

Եթե ​​Ձեզ անհրաժեշտ է ձեր կայքում ավելացնել jQuery պատկերի բարձրորակ սլայդեր, ապա այս հոդվածում դուք կգտնեք անհրաժեշտ պլագինների նկարագրությունը։ Թեև JQuery-ն շատ ավելի դյուրին է դարձրել JavaScript-ի հետ աշխատանքը, մեզ դեռ պետք են պլագիններ՝ վեբ դիզայնի գործընթացը արագացնելու համար:

Մենք կարող ենք փոփոխություններ կատարել այս պլագիններից որոշներում և ստեղծել նոր սլայդերներ, որոնք շատ ավելի հարմար են մեր կայքի նպատակների համար:

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

Վերջին միտումները, ինչպիսիք են ռեսպոնսիվ դիզայնը, շատ կարևոր են վեբ նախագծերի համար՝ անկախ նրանից՝ դուք պլագին եք իրականացնում, թե սկրիպտ։ Այս բոլոր տարրերը այս պլագիններից յուրաքանչյուրը դարձնում են շատ ճկուն: Այն ամենը, ինչ դուրս եկավ 2014 թվականին, ներառված է այս ցանկում։

jQuery պատկերի սլայդերներ

Jssor արձագանքող Slider

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

• Հարմարվողական դիզայն;
• Անհատականացման ավելի քան 15 տարբերակներ;
• Ավելի քան 15 պատկեր փոխելու էֆեկտներ;
• Պատկերասրահ, կարուսել, ամբողջական էկրանի չափի աջակցություն;
• Ուղղահայաց դրոշի պտույտ, սլայդների ցանկ;
• Տեսանյութերի աջակցություն:

Դեմո | Բեռնել

PgwSlider - արձագանքող սահիչ, որը հիմնված է JQuery / Zepto-ի վրա

Այս հավելվածի միակ խնդիրը պատկերների սլայդներ ցուցադրելն է: Այն շատ կոմպակտ է, քանի որ JQuery ֆայլերը ունեն ընդամենը 2,5 ԿԲ չափ, ինչը թույլ է տալիս այն շատ արագ բեռնել.

• Հարմարվողական դասավորություն;
• SEO օպտիմիզացում;
• Աջակցություն տարբեր բրաուզերների համար;
• Պատկերի պարզ անցումներ;
• Արխիվի չափն ընդամենը 2,5 ԿԲ է:

Դեմո | Բեռնել

Jquery Vertical News Slider

Ճկուն և օգտակար JQuery սլայդեր, որը նախատեսված է լրատվական ռեսուրսների համար՝ ձախ կողմում հրապարակումների ցանկով և աջ կողմում ցուցադրվող պատկերով.

• Հարմարվողական դիզայն;
• Ուղղահայաց սյունակ նորությունների փոխանակման համար;
• Ընդլայնված վերնագրեր:

Դեմո | Բեռնել

Wallop Slider

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

• Հարմարվողական դասավորություն;
• Պարզ դիզայն;
• Սլայդների փոփոխման տարբեր տարբերակներ;
• Նվազագույն JavaScript կոդ;
• Չափն ընդամենը 3 ԿԲ է։

Դեմո | Բեռնել

Flat ոճով Polaroid պատկերասրահ

Փաստաթղթերով ցրված գրասեղանի ոճով պատկերասրահը ճկուն դասավորությամբ և գեղեցիկ դիզայնով պետք է հետաքրքրի ձեզանից շատերին: Ավելի հարմար պլանշետների և մեծ էկրանների համար.

• Հարմարվողական սահիչ;
• Հարթ դիզայն;
• Սլայդի պատահական փոփոխություն;
• Ամբողջական մուտք դեպի աղբյուրի կոդը:

Դեմո | Բեռնել

A-Slider

Դեմո | Բեռնել

HiSlider – HTML5, jQuery և WordPress պատկերի սահիչ

HiSlider-ը ներկայացրել է նոր անվճար jQuery slider plugin, որով կարող եք ստեղծել մի շարք պատկերասրահներ՝ ֆանտաստիկ անցումներով.

• Հարմարվողական սահիչ;
• Չի պահանջում ծրագրավորման գիտելիքներ;
• Մի քանի զարմանալի կաղապարներ և երեսվածքներ;
• Գեղեցիկ անցումային էֆեկտներ;
• Աջակցություն տարբեր հարթակների համար;
• Համատեղելի է WordPress-ի, Joomla-ի, Drupal-ի հետ;
• Բովանդակություն ցուցադրելու ունակություն տարբեր տեսակներ: պատկերներ, YouTube տեսանյութև Vimeo տեսանյութեր;
• Ճկուն կարգավորում;
• Օգտակար լրացուցիչ հնարավորություններ;
• Ցուցադրված բովանդակության անսահմանափակ քանակություն:

Դեմո |Ներբեռնում

Wow Slider

WOW Slider-ն է արձագանքող jQuery- պատկերի սլայդեր զարմանալի տեսողական էֆեկտներով ( դոմինո, պտտել, լղոզել, շրջել և բռնկել, դուրս թռչել, շերտավարագույրներ) և մասնագիտական ​​կաղապարներ:

WOW Slider-ը գալիս է տեղադրման հրաշագործի հետ, որը թույլ է տալիս վայրկյանների ընթացքում ստեղծել ֆանտաստիկ սլայդերներ՝ առանց ծածկագիրը հասկանալու կամ պատկերները խմբագրելու: Joomla-ի և WordPress-ի համար հավելվածի տարբերակները հասանելի են նաև ներբեռնման համար.

• Լիովին արձագանքող;
• Աջակցում է բոլոր բրաուզերներին և բոլոր տեսակի սարքերին;
• Սենսորային սարքերի աջակցություն;
• Հեշտ տեղադրում WordPress-ում;
• Կազմաձևման ճկունություն;
• SEO-օպտիմիզացված:

Դեմո |Ներբեռնում

Nivo Slider – անվճար jQuery հավելված

Nivo Slider-ը հայտնի է ամբողջ աշխարհում որպես ամենագեղեցիկ և հեշտ օգտագործվող պատկերի սլայդերը: Nivo Slider հավելվածն անվճար է և թողարկվում է MIT լիցենզիայի ներքո.

• Պահանջում է JQuery 1.7 և ավելի բարձր;
• Գեղեցիկ անցումային էֆեկտներ;
• Պարզ և ճկուն կարգավորելու համար;
• Կոմպակտ և հարմարվողական;
• Բաց կոդով;
• Հզոր և պարզ;
• Մի քանի տարբեր ձևանմուշներ;
• Պատկերի ավտոմատ կտրում:

Դեմո |Ներբեռնում

Պարզ jQuery սլայդեր տեխնիկական փաստաթղթերով

Գաղափարը ոգեշնչվել է Apple-ի սլայդերներից, որոնցում մի քանի փոքր տարրեր կարող են դուրս թռչել տարբեր անիմացիոն էֆեկտներով: Մշակողները փորձել են իրականացնել այս հայեցակարգը՝ հաշվի առնելով նվազագույն պահանջներստեղծել առցանց խանութի պարզ դիզայն, որում «թռչող» տարրերը ներկայացնում են տարբեր կատեգորիաներ.

• Հարմարվողական դասավորություն;
• Մինիմալիստական ​​դիզայն;
• Դուրս գալու և սլայդների փոփոխման տարբեր էֆեկտներ:

Դեմո |Ներբեռնում

Ամբողջական չափի jQuery պատկերի սահիչ

Շատ պարզ սահիչ, որը զբաղեցնում է էջի լայնության 100%-ը և հարմարվում է էկրանի չափերին շարժական սարքեր. Այն աշխատում է CSS անցումներով, և պատկերները «դասավորվում» են խարիսխների հետ միասին: Խարիսխը կարող է փոխարինվել կամ հեռացվել, եթե դուք չեք ցանկանում հղում կցել պատկերին:

Տեղադրվելիս սահիկը ընդլայնվում է մինչև էկրանի լայնության 100%-ը: Այն կարող է նաև ավտոմատ կերպով նվազեցնել սլայդների պատկերների չափը.

• Հարմարվողական JQuery սահիչ;
• Ամբողջական չափս;
• Մինիմալիստական ​​դիզայն.

Դեմո |Ներբեռնում

Elastic Content Slider + ձեռնարկ

Elastic Content Slider-ը ավտոմատ կերպով կարգավորում է լայնությունը և բարձրությունը՝ հիմնվելով մայր տարրի չափսերի վրա: Սա պարզ jQuery սլայդեր է: Այն բաղկացած է վերևում գտնվող սլայդից, իսկ ներքևում՝ նավիգացիոն ներդիրից: Սահիկը կարգավորում է իր լայնությունը և բարձրությունը՝ ըստ մայր կոնտեյների չափսերի:

Փոքր անկյունագծային էկրանների վրա դիտելիս նավիգացիոն ներդիրները վերածվում են փոքր պատկերակների.

• Հարմարվողական դիզայն;
• Մկնիկի սեղմումով ոլորում:

Դեմո |Ներբեռնում

Անվճար 3D Stack Slider

Փորձարարական սահիկ, որը պտտվում է 3D պատկերների միջով: Երկու կույտերը հիշեցնում են թղթի կույտեր, որոնցից ոլորելիս պատկերները ցուցադրվում են սահիկի կենտրոնում.

• Հարմարվողական դիզայն;
• Շրջել - անցում;
• 3D էֆեկտներ.

Դեմո |Ներբեռնում

Ամբողջ էկրանով Slit Slider հիմնված JQuery-ի և CSS3 + ձեռնարկի վրա

Այս ձեռնարկը ցույց կտա ձեզ, թե ինչպես կարելի է շրջադարձով սահիկ ստեղծել. գաղափարն այն է, որ «կտրել» և ցուցադրել ընթացիկ սլայդը, երբ բացում եք հաջորդ կամ նախորդ պատկերը: Օգտագործելով JQuery և CSS անիմացիա, մենք կարող ենք ստեղծել եզակի անցումային էֆեկտներ.

• Հարմարվողական դիզայն;
• Պառակտման անցում;
• Ամբողջ էկրանով սահիչ:

Դեմո |Ներբեռնում

Unislider - շատ փոքր jQuery սլայդեր

Չկան ավելորդ զանգեր և սուլիչներ՝ 3 ԿԲ-ից պակաս չափով: Օգտագործեք ցանկացած HTML կոդ ձեր սլայդների համար, ընդարձակեք այն CSS-ով: Unslider-ի հետ կապված ամեն ինչ տեղակայված է GitHub-ում.

• Աջակցություն տարբեր բրաուզերների համար;
• Ստեղնաշարի աջակցություն;
• Բարձրության ճշգրտում;
• Հարմարվողական դիզայն;
• Հպման մուտքագրման աջակցություն:

Դեմո | Բեռնել

Նվազագույն արձագանքող սլայդներ

Պարզ և կոմպակտ հավելված ( չափը ընդամենը 1 ԿԲ է), որը ստեղծում է արձագանքող սահիկ՝ օգտագործելով տարայի ներսում գտնվող տարրերը: ResponsiveSLides.js-ն աշխատում է բրաուզերների լայն տեսականիով, ներառյալ IE6-ից և ավելի բարձր IE-ի բոլոր տարբերակները.

• Լիովին արձագանքող;
• Չափը 1 ԿԲ;
• CSS3 անցումներ JavaScript-ի միջոցով գործարկելու ունակությամբ;
• Պարզ նշում՝ օգտագործելով պարբերակավոր ցուցակները;
• Անցումային էֆեկտները հարմարեցնելու և մեկ սլայդի դիտման տևողությունը.
• Աջակցում է բազմաթիվ սլայդ շոուներ ստեղծելու կարողությանը.
• Ավտոմատ և ձեռքով ոլորում:

Դեմո |Ներբեռնում

Տեսախցիկ՝ անվճար jQuery սլայդեր

Տեսախցիկը բազմաթիվ անցումային էֆեկտներով և արձագանքող դասավորությամբ պլագին է: Հեշտ է կարգավորվում, շարժական սարքերի աջակցությամբ.

• Լիովին արձագանքող դիզայն;
• Ստորագրություններ;
• Տեսանյութեր ավելացնելու ունակություն;
• 33 տարբեր գույների պատկերակներ:

Դեմո |Ներբեռնում

SlidesJS, արձագանքող jQuery պլագին

SlidesJS-ը JQuery-ի (1.7.1 և ավելի բարձր) համար պատասխանատու պլագին է՝ սենսորային սարքերի և CSS3 անցումների աջակցությամբ: Փորձեք դրա հետ, փորձեք մի քանի պատրաստի օրինակներ, որոնք կօգնեն ձեզ պարզել, թե ինչպես ավելացնել SlidesJS ձեր նախագծին.

• Հարմարվողական դիզայն;
• CSS3 անցումներ;
• Սենսորային սարքերի աջակցություն;
• Հեշտ է կարգավորել:

Դեմո | Բեռնել

BX Jquery Slider

Սա անվճար արձագանքող jQuery սլայդեր է.

• Լիովին արձագանքող - հարմարվում է ցանկացած սարքի;
• Հորիզոնական, ուղղահայաց սլայդի փոփոխություն;
• Սլայդները կարող են պարունակել պատկերներ, տեսանյութեր կամ HTML բովանդակություն;
• Ընդլայնված աջակցություն սենսորային սարքերի համար;
• Օգտագործելով CSS անցումներ սլայդների անիմացիայի համար ( ապարատային արագացում);
• API-ի հետ կանչեր և ամբողջովին հրապարակային մեթոդներ;
• Փոքր ֆայլի չափ;
• Հեշտ է իրականացնել:

Դեմո |Ներբեռնում

FlexSlider 2

Լավագույն արձագանքող սլայդերը: Նոր տարբերակփոփոխվել է արագությունն ու կոմպակտությունը բարձրացնելու համար:

Դեմո | Բեռնել

Galleria - JavaScript-ի վրա հիմնված արձագանքող լուսանկարների պատկերասրահ

Galleria-ն օգտագործվում է միլիոնավոր կայքերում՝ պատկերասրահներ ստեղծելու համար բարձր որակ. Նրա աշխատանքի մասին դրական ակնարկների թիվը պարզապես դուրս է գծապատկերներից.

• Լիովին անվճար;
• Ամբողջ էկրանով դիտման ռեժիմ;
• 100% հարմարվողական;
• Ծրագրավորման փորձ չի պահանջվում;
• Աջակցություն iPhone-ի, iPad-ի և այլ սենսորային սարքերի համար;
• Flickr, Vimeo, YouTube և այլն;
• Մի քանի թեմաներ.

Դեմո | Բեռնել

Blueberry - պարզ արձագանքող jQuery պատկերի սահիչ

Ես ձեզ եմ ներկայացնում jQuery պատկերի սլայդերը, որը գրված է հատուկ վեբ-դիզայնի համար: Blueberry-ն բաց կոդով պատկերի սլայդերի փորձնական հավելված է աղբյուր կոդը, որը գրվել է հատուկ արձագանքող կաղապարների հետ աշխատելու համար։

Առանձին օգտագործման դեպքում CSS3-ը և jQuery-ն ապահովում են հնարավորությունների լայն շրջանակ: Բայց եթե միասին օգտագործվեն... Այդ դեպքում դրանք կարող են էֆեկտները իսկապես տպավորիչ դարձնել: Երբեմն խնդիր է առաջանում, թե ինչպես ավելի լավ և ստեղծագործաբար դասավորել ընդհանուր թեմայով մի քանի պատկեր կամ լուսանկար մեկ տեղում: Որպես տարբերակ, դուք կարող եք ստեղծել սլայդեր (հատկապես, քանի որ դրանք հսկայական են): Բայց այս ձեռնարկում մենք կստեղծենք ինտերակտիվ 3D պատկերասրահ՝ օգտագործելով CSS3 և jQuery: Դա արագ պարզելու և ձեր կայքում սլայդերը կիրառելու համար խորհուրդ եմ տալիս ներբեռնել ցուցադրական տարբերակը (այն հասանելի է նաև ամբողջական նորություններում) և պարզապես դա անել օրինակի անալոգիայի միջոցով:

Իրական օրինակ կարելի է տեսնել այստեղ.

Բեռնել

HTML մաս - Հետաքրքիր jQuery սլայդեր

Տարա դասի հետ հիմնականկօգտագործվի ցուցադրելու համար ֆոն. Եվ հետո բլոկի ներսում immersive_slider-ի նույնացուցիչով կարող եք ավելացնել այնքան սլայդներ, որքան անհրաժեշտ է: Սլայդների միջով շարժվելու կոճակները կարող են հեռացվել, եթե դրանք ձեզ հարկավոր չեն.

jQuery մաս

Ինչպես նկատեցիք սլայդերի օրինակը դիտելիս, կան տարբեր: Այս անցումների բոլոր կարգավորումները վերը նշված գործառույթում են: Դիտարկենք այս կարգավորումները.

• անիմացիա— արժեք, որը որոշում է, թե ինչպես կփոխվեն սլայդները: Ընդունում է «fade», «slide» կամ «bounce» արժեքները: Իսկ սլայդների ուղղահայաց փոփոխություն կատարելու համար անհրաժեշտ է մուտքագրել «slideUp» կամ «bounceUp»:
• slideSelector— սլայդներով բլոկներ ընտրելու ընտրիչ:
• կոնտեյներ— այս հատկությունը սահմանում է հիմնական կոնտեյները, որի ֆոնը կփոխվի:
• cssBlurՍա փորձնական հատկանիշ է: Եթե ​​դուք չեք ցանկանում սահմանել blur, ապա մի սահմանեք այս հատկությունը:
• էջադրում— ակտիվացնում է նավիգացիան:
• autoStart— սլայդ շոուի ավտոմատ մեկնարկը: