ერთი საათი უძრავად დგომა და მასთან ერთად პროგრესი. იგი მოვიდა ინტერნეტში. თქვენ უკვე შეგიძლიათ ისწავლოთ როგორ შეცვალოთ გარეგანი სახევებსაიტები, ადაპტური დიზაინი განსაკუთრებით პოპულარულია. და კავშირში ბევრი ახალი გამოჩნდა ადაპტური jquery სლაიდერები, გალერეები, კარუსელები ან მსგავსი დანამატები.
1. საპასუხო ჰორიზონტალური პოსტების სლაიდერი

ადაპტაციური ჰორიზონტალური კარუსელი დეტალური ინსტრუქციებიინსტალაციისგან. Vikonana-ს აქვს მარტივი სტილი, მაგრამ თქვენ შეგიძლიათ მისი სტილი თქვენთვის.

2. სლაიდერი Glide.js-ზე

ეს სლაიდერი შესაფერისია ნებისმიერი საიტისთვის. Glide.js ღია კოდით განიხილება აქ. სლაიდერის ფერები ადვილად შეიცვლება.

3. დახრილი შინაარსის სლაიდშოუ

ადაპტაციური სლაიდერი შინაარსით. ამ სლაიდერის მთავარი მახასიათებელია 3D ეფექტი, ისევე როგორც სხვადასხვა ანიმაციები, რომლებიც გამოჩნდება შემთხვევითი თანმიმდევრობით.

4. სლაიდერი Wikoristanny HTML5 ტილოთი

ძალიან ლამაზი და მიმზიდველი სლაიდერი ინტერაქტიული ნაწილებით. Vikonany დახმარებისთვის HTML5 ტილო,

5. სლაიდერი „სურათის მორფირება“

სლაიდერი მორფინგის ეფექტით (გლუვი ტრანსფორმაცია ერთი ობიექტიდან მეორეზე). რომელი სლაიდერი შეეფერება ვებ დეველოპერის ან ვებ სტუდიის პორტფოლიოს, რომელიც პორტფოლიოს ჰგავს?

6. წრის სლაიდერი

სლაიდერი ხედზე ახდენს გამოსახულების გადაბრუნების ეფექტს.

7. სლაიდერი ფონით

ადაპტაციური სლაიდერი მიქსისა და მატჩის ფონით.

8. ადაპტური მოდის სლაიდერი

მარტივი, მსუბუქი და ადაპტირებული სლაიდერი საიტისთვის.

9. Slicebox - jQuery 3D გამოსახულების სლაიდერი(განახლებები)

Slicebox სლაიდერის ვერსია განახლებულია შესწორებებით და ახალი ფუნქციებით.

10. უფასო ანიმაციური საპასუხო გამოსახულების ბადე

JQuery მოდული მოქნილი გამოსახულების ბადის შესაქმნელად, რომელიც საშუალებას გაძლევთ გადააკეთოთ ფოტოები, აირჩიოთ სხვადასხვა ანიმაცია და დრო. ეს შეიძლება ჩაითვალოს, როგორც ფონი ან დეკორატიული ელემენტი საიტზე, ასე რომ, ჩვენ შეგვიძლია შევცვალოთ ახალი სურათების შერჩევითი გარეგნობა და მათი გადასვლები. ვიკი დანამატს აქვს მრავალი ვარიანტი.

11.Flex სლაიდერი

უნივერსალური, უფასო დანამატი თქვენი ვებსაიტისთვის. ეს მოდული ხელმისაწვდომია მრავალი სლაიდერის და კარუსელის ვარიანტში.

12. ფოტო ჩარჩო

ფოტორამა- ეს არის უნივერსალური დანამატი. მას აქვს უამრავი პერსონალიზაცია, ყველაფერი მუშაობს სწრაფად და მარტივად და შეგიძლიათ ნახოთ სლაიდები მთელ ეკრანზე. სლაიდერის კონფიგურაცია შესაძლებელია როგორც ფიქსირებული ზომის ან ადაპტაციური, ესკიზებით ან მის გარეშე, წრიული გადახვევით ან მის გარეშე და მრავალი სხვა.

P.S.რამდენჯერმე დავაყენე სლაიდერი და პატივს ვცემ, რომ ის ერთ-ერთი საუკეთესოა

13. უფასო და ადაპტირებული 3D სლაიდერის გალერეა ესკიზებით.

ექსპერიმენტული გალერეის სლაიდერი 3DPanelLayoutბადით ცენტრალური ეფექტებიანიმაციები.

14. CSS3 სლაიდერი

ადაპტირებული ვიკი სლაიდერი დამატებითი css3-ის გამოყენებით გლუვი შინაარსით და მარტივი ანიმაციით.

15. WOW სლაიდერი

WOW სლაიდერი- ეს სლაიდერი გაფუჭებულად აჩვენებს ვიზუალური ეფექტები.

17. ელასტიური

ელასტიური სლაიდერი სრული ადაპტირებით და სლაიდების ესკიზებით.

18. ჭრილი

ეს არის სრულ ეკრანზე ადაპტირებული სლაიდერი CSS3 ანიმაციის გამოყენებით. Viconano სლაიდერს აქვს ორი ვარიანტი. ანიმაცია შექმნილია უნიკალური და ლამაზი.

19. ადაპტური ფოტო გალერეა პლუს

მარტივი, უფასო გალერეის სლაიდერი უნიკალური სურათებით.

20. საპასუხო სლაიდერი WordPress-ისთვის

ადაპტური სლაიდერი WP-სთვის.

21. Parallax Content Slider

სლაიდერი პარალაქსის ეფექტით და კანის ელემენტის კონტროლით მე დაგეხმარები CSS-ში 3.

22. სლაიდერი მუსიკის ბმულით

სლაიდერი ფარული JPlayer გამომავალი კოდიდან. ეს სლაიდერი პროგნოზირებს პრეზენტაციას მუსიკით.

23. სლაიდერი jmpress.js-დან

ადაპტური სლაიდერი დაფუძნებულია jmpress.js-ზე და საშუალებას გაძლევთ გამოიყენოთ 3D ეფექტები სლაიდებზე.

24. Fast Hover Slideshow

სლაიდ შოუ სლაიდების სწრაფი ნაზავით. სლაიდები ციმციმებენ კურსორზე გადასვლისას.

25. გამოსახულების აკორდეონი CSS3-ით

აკორდეონის სურათი css3-ის გამოყენებით.

26. შეხებით ოპტიმიზებული გალერეის დანამატი

ცე საპასუხო გალერეარომელიც ოპტიმიზებულია სენსორული მოწყობილობებისთვის.

27. 3D გალერეა

3D კედლის გალერეა- შექმნილია Safari ბრაუზერი 3D ეფექტი გამოჩნდება. თუ სხვა ბრაუზერს იყენებთ, ფუნქციონირება კარგი იქნება, მაგრამ 3D ეფექტი არ ჩანს.

28. სლაიდერი პაგინაციიდან

ადაპტური სლაიდერი გვერდითი ნუმერაციით დამატებითი JQuery UI სლაიდერის უკან. იდეა არის ნავიგაციის მარტივი კონცეფციის გამოყენება. შესაძლებელია ყველა სურათის გადახვევა ან სლაიდების რემიქსი.

29. გამოსახულების მონტაჟი jQuery-ით

ავტომატურად გააფართოვეთ სურათი, რათა მოერგოს ეკრანის სიგანეს. ძალიან მაგარია, როცა ვებსაიტზე ამუშავებ პორტფელს.

30. 3D გალერეა

მარტივი 3D წრის სლაიდერი css3 და jQuery გამოყენებით.

31. Სრული ეკრანის რეჟიმი 3D ეფექტით css3-ზე და jQuery-ზე

სლაიდერი სრულ ეკრანზე ნახვის საშუალებას იძლევა წინა გადასვლის ჩვენების.

უფასო კოლექცია HTML და CSS სლაიდერიკოდის მაგალითები: ბარათი, შედარება, სრულეკრანიანი, საპასუხო, მარტივიდა ა.შ. 2018 წლის ივნისის კოლექციების განახლება. 7 ახალი ელემენტი.

Სარჩევი

დაკავშირებული სტატიები

კოდის შესახებ

საბორტო ეკრანების ნაკრები HTML/CSS/JS-ში. პირადი ექსპერიმენტი PNG ხატების ფენით, CSS3 გადასვლებით და flexbox.

HTML, CSS და JavaScript საინფორმაციო ბარათის სლაიდერი.
დამზადებულია ენდი ტრანის მიერ
2015 წლის 23 ნოემბერი

ფოტო სლაიდერი მუშაობს დესკტოპზე და მობილურ ბრაუზერებზე.
დამზადებულია ტარონის მიერ
2014 წლის 29 სექტემბერი

შედარება (ადრე/შემდეგ) სლაიდერები

კოდის შესახებ

ძლიერი და სუფთა გამოსახულების შედარების სლაიდერი, სრულად რეაგირებადი და შეხებით მზად არის CSS და jQuery.

კოდის შესახებ

მხოლოდ html და css კოპირებამდე და შემდეგ.

კოდის შესახებ

გაატარეთ ერთბაშად ახალი იდეით, vikorystyuchi ჩემი ორი ასო ადრე/სურათის სურათი. მისი მინიმალური შენარჩუნება. ვანილის შენახვა. მოიწონეთ თუ სასარგებლოა :)

Vanilla JS, მინიმალური, სასიამოვნო შესახედაობა.
დამზადებულია Huw-ის მიერ
2017 წლის 3 ივლისი

კოდის შესახებ

"გაყოფილი ეკრანის" სლაიდერის ელემენტი JavaScript-ით.

მალიას ექსპერიმენტი სლაიდერის წინ და შემდეგ SVG-ის შიგნით. ნიღაბი საკმაოდ მარტივს ხდის. იმის გამო, რომ ეს ყველაფერი SVGა, სურათები და ბმულები კარგად ეხებიან ერთმანეთს. GreenSock-ის Draggable და ThrowProps დანამატები კონტროლერისთვის.
დამზადებულია კრეიგ რობლევსკის მიერ
2017 წლის 17 აპრილი

მორგებული დიაპაზონის შეყვანა სლაიდერისთვის.
დამზადებულია დადლი სტორის მიერ
2016 წლის 14 ოქტომბერი

საპასუხო სურათების შედარების სლაიდერი HTML, CSS და JavaScript-ით.
დამზადებულია Ege Görgülü-ს მიერ
2016 წლის 3 აგვისტო

HTML5, CSS3 და JavaScript ვიდეო შედარების სლაიდერი.
დამზადებულია დადლი სტორის მიერ
2016 წლის 24 აპრილი

კარგი გადასატანი სლაიდერი 2 სურათის სწრაფად შესადარებლად, CSS3 და jQuery-ის საშუალებით.
დამზადებულია CodyHouse-ის მიერ
2014 წლის 15 სექტემბერი

სრულეკრანიანი სლაიდერები

კოდის შესახებ

მარტივი სლაიდერი ეფუძნება რადიოს შეყვანას. 100% სუფთა HTML + CSS. მუშაობს ასევე ისრიანი ღილაკებით.

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

ლამაზი გადასვლის ეფექტი სრულეკრანიანი სლაიდერისთვის.

კოდის შესახებ

ჰორიზონტალური პარალაქსის მოცურების სლაიდერი Swiper.js-ით.

კოდის შესახებ

საპასუხო გლუვი 3D პერსპექტივის სლაიდერი მაუსის მოძრაობაზე.

სრულეკრანიანი გმირის გამოსახულების სლაიდერი (ახალი თემებით) HTML, CSS და JavaScript-ით.
დამზადებულია ტობიას ბოგლიოლოს მიერ
2017 წლის 25 ივნისი

Vikorist ხაზი vzaimini, skoristovuyu სიჩქარის და სიჩქარის ეფექტები (UI Pack) გაზრდილი ანიმაციისთვის. ანიმაცია ამოქმედდება ისრიანი ღილაკების, ნავიგაციის დაწკაპუნების ან გადახვევის ჯეკის საშუალებით. ეს ვერსია მოიცავს საზღვრებს, როგორც ურთიერთქმედების ნაწილს.
დამზადებულია სტივენ სკაფის მიერ
2017 წლის 11 მაისი

მარტივი სლაიდერი მინიმალურ სტილში სურათების ჩვენებამდე. სურათის ნაწილი ნაჩვენებია ერთ-ერთ მათგანზე.
დამზადებულია ნათან ტეილორის მიერ
2017 წლის 22 იანვარი

ნივთი საკმაოდ მარტივად მოსარგებადია. თქვენ შეგიძლიათ უსაფრთხოდ შეცვალოთ შრიფტი, შრიფტის ზომა, შრიფტის ფერი, ანიმაციის სიჩქარე. Პირველი JS-ში მასივის ახალი სტრიქონის ასო გამოჩნდება ახალ სლაიდზე. მარტივი შექმნა (ან წაშლა) ახალი სლაიდი: 1. დაამატეთ ახალი ქალაქი მასივში JS-ში. 2. სურათის ნომრის ცვლადის შეცვლა და aw სურათის ჩასმა scss სიაში CSS-ში.
დამზადებულია რუსლან პივოვაროვის მიერ
2016 წლის 8 ოქტომბერი

1. კლიპის გზა გამოსახულების მართკუთხედის საზღვრების დასაფარად (მხოლოდ ვებ ნაკრები).
2. Blend-mode ამ ნიღბისთვის.
3. ჭკვიანი ფერის სისტემა, უბრალოდ ჩადეთ თქვენი ფერის სახელი და მნიშვნელობა sass რუკაზე და შემდეგ დაამატეთ ქონების კლასი ამ ფერის სახელით ელემენტებს და ყველაფერი იმუშავებს!
4. მაგარი კრედიტების გვერდითი მენიუ (დააწკაპუნეთ პატარა ღილაკზე დემოს ცენტრში).
5. Vanilla js მხოლოდ< 200 lines of code (basically it’s just adds/removes classes).

დამზადებულია ნიკოლაი ტალანოვის მიერ
2016 წლის 7 ოქტომბერი

ეს არის გრეხილი თმის სამაგრი, რომელიც დაფუძნებულია სუფთა JS-სა და CSS-ზე (ბიბლიოთეკების გარეშე).
დამზადებულია ვიქტორ ბელოზიოროვის მიერ
2016 წლის 3 სექტემბერი

სლაიდერის ანიმაცია პოკემონის დიზაინით.
დამზადებულია ფამ მიკუნის მიერ
2016 წლის 18 აგვისტო

HTML, CSS და JavaScritp სლაიდერი რთული ანიმაციით და ნახევრად ფერადი დახრილი ტექსტით.
დამზადებულია რუსლან პივოვაროვის მიერ
2016 წლის 13 ივლისი

სლაიდერის პარალაქსის ეფექტი HTML, CSS და JavaScript-ით.
დამზადებულია მანუელ მადეირას მიერ
2016 წლის 28 ივნისი

HTML, CSS და JavaScript სლაიდერი ტალღოვანი ეფექტით.
დამზადებულია პედრო კასტროს მიერ
2016 წლის 21 მაისი

Clip-Path-ის გამოვლენის სლაიდერი HTML, CSS და JavaScript-ით.
დამზადებულია ნიკოლაი ტალანოვის მიერ
2016 წლის 16 მაისი

GSAP+ გლუვი სლაიდერიწინა/შემდეგი სლაიდების გადახედვით.
დამზადებულია კარლო ვიდეკის მიერ
2016 წლის 27 აპრილი

HTML, CSS და JavaScript სრული გვერდის სლაიდერი.
დამზადებულია ჯოზეფ მარტუჩის მიერ
2016 წლის 28 თებერვალი

სრული სლაიდერის პროტოტიპი HTML, CSS და JavaScript-ით.
დამზადებულია გლუბერ სამპაიოს მიერ
2016 წლის 6 იანვარი

სრულეკრანიანი, დალაგების საპასუხო, სლაიდშოუ ანიმაციური Greensocks TweenLite/Tweenmax-ით.
დამზადებულია არდენის მიერ
2015 წლის 12 დეკემბერი

დამზადებულია არდენის მიერ
2015 წლის 5 დეკემბერი

სრულეკრანიანი სლაიდერი (GSAP Timeline) #1 HTML, CSS და JavaScript-ით.
დამზადებულია Diaco M.Lotfollahi-ის მიერ
2015 წლის 23 ნოემბერი

HTML და CSS სლაიდერი მორგებული ეფექტებით.
დამზადებულია ნიკოლაი ტალანოვის მიერ
2015 წლის 12 ნოემბერი

სრულეკრანიანი დრაგ-სლაიდერი პარალაქსით HTML, CSS და JavaScript-ით.
დამზადებულია ნიკოლაი ტალანოვის მიერ
2015 წლის 12 ნოემბერი

მბრუნავი სლაიდერის კონცეფციის დადასტურება. დამატებითი დახმარებისთვის კლიპის გზა და ბევრი მათემატიკა.
დამზადებულია ტაილერ ჯონსონის მიერ
2015 წლის 16 აპრილი

მარტივი სრულეკრანიანი CSS & jQuery სლაიდერი translateX და translate3d სიგლუვეს!
დამზადებულია ჯოზეფის მიერ
2014 წლის 19 აგვისტო

საპასუხო სლაიდერები

კოდის შესახებ

სურათების გამჭვირვალობის სლაიდერი

სურათების გამჭვირვალობის სლაიდერი HTML და CSS-ში.

თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

დაწყობილი მოქნილი სლაიდების განლაგება

ეს მაგალითები გვიჩვენებს, თუ როგორ უნდა შევქმნათ ტერმინების სია, რომლებიც ვრცელდება ყველა სხვაზე (განსაკუთრებით იმ ტერმინებზე, რომლებიც შეიძლება იქნას მიღებული ამ პერიოდის განმავლობაში). ეს ასე არ არის ყოველგვარი ღრმა და ღრმა გაგების გარეშე: აბსოლუტურად იმიტომ, რომ სუნი არის მოქნილი და მისაღები, რათა შეიწოვება ორიგინალური გვერდის ნაკადში.

თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

საპასუხო სლაიდერი

ანიმაციური საპასუხო სლაიდერი HTML, CSS და JavaScript-ში.

თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: animate.css

კოდის შესახებ

სლაიდერი ნიღბიანი ტექსტით

CSS არის მხოლოდ სლაიდერი ნიღბიანი ტექსტით.

თავსებადი ბრაუზერები: Chrome, Edge (ნაწილობრივი), Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

სურათი და შინაარსი პარალაქსის ეფექტით.

კოდის შესახებ

მხოლოდ CSS სლაიდ გალერეა.

თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

სუფთა HTML/CSS სლაიდერი

სუფთა HTML/CSS სლაიდერი წრიული SVG პროგრესის ზოლით.

თავსებადი ბრაუზერები: Chrome, Edge (ნაწილობრივი), Firefox (ნაწილობრივი), Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: font-awesome.css

კოდის შესახებ

მე ვმუშაობ უნიკალური ვერტიკალური სლაიდერის შექმნაზე ესკიზებით მხოლოდ CSS-ის გამოყენებით და სურათების ასპექტის თანაფარდობის შენარჩუნებაზე.

კოდის შესახებ

მარტივი Flexbox გამოსახულების სლაიდერი/კარუსელი, რომელიც დამზადებულია ვანილის JavaScript-ით.

კოდის შესახებ

ეს არის ექსპერიმენტი, რომელიც სიმულაციას უკეთებს მოძრაობის დაბინდვის ეფექტს ყოველ ჯერზე, როდესაც სლაიდი იცვლება. ამდენი SVG Gaussian Blur ფილტრები და CSS საკვანძო კადრების ანიმაცია არსებობს. ეფექტების უმეტესობა არ საჭიროებს Javascript-ს მთლიანობაში მუშაობისთვის, რომელშიც Javascript აპლიკაცია მხოლოდ მალსახმობია ფუნქციონერებისთვის.

კოდის შესახებ

მაგარი ანიმაციის სლაიდერი JS-ით.

კოდის შესახებ

ეს არის ექსპერიმენტი იმის შესახებ, თუ როგორ დაგვეხმარება SVG შაბლონები შევქმნათ ნიღბიანი სურათები მხოლოდ CSS გამოსახულების სლაიდერისთვის.

სლაიდერის გადასვლების შესწავლა. Swiper slider პარალაქსის ოფციით ჩართული. აქ საუკეთესოა CSS ფილტრებით თამაში.
დამზადებულია მირკო ზორიჩის მიერ
2017 წლის 12 ივნისი

მარტივი GSAP სლაიდერი რამდენიმე დახვეწილი tween ანიმაციით.
დამზადებულია გორან ვრბანის მიერ
2017 წლის 9 ივნისი

სლაიდერის ინტერფეისი HTML, CSS და JavaScript-ით.
დამზადებულია მერგიმ უჯკანის მიერ
2017 წლის 6 ივნისი

სლაიდერი GSAP 2.
დამზადებულია Em An
2017 წლის 4 მაისი

პატარა ფრაგმენტული გადასვლის სლაიდერი მარტივი დამატება კლასის გარიგების გამოყენებით. სუნი ღრმად ხვდება ფარულ ბრძოლაში და ეკიდა უმოკლეს მოწყობილობას მობილურისთვის (უბრალოდ დაწყობა, რეკლამა მოვლენებს შეეხოთ, სურათების სრული ხედის პორტის შექმნა და ა.შ.) შექმნას სურათის ხედის პორტი ამ უცნობ მდგომარეობაში, რაც კარგია, როგორც კარგი. .
დამზადებულია სტივენ სკაფის მიერ
2017 წლის 3 იანვარი

CSS საზღვრის გამოსახულების და კლიპის ბილიკის ბერკეტი კრეატიული ანიმაციის ეფექტისთვის.
დამზადებულია ემილი ჰეიმანის მიერ
2016 წლის 31 დეკემბერი

ფლექსბოქსით აშენებული პატარა სლაიდერი. ფაქტობრივი და შეიძლება დაფიქსირდეს ელემენტები სლაიდერის ზონამდე.
დამზადებულია რობერტის მიერ
2016 წლის 28 ნოემბერი

HTML, CSS ტილოს სლაიდერი.
დამზადებულია ნვაგელისის მიერ
2016 წლის 29 ოქტომბერი

HTML, CSS და JavaScript 3D გლუვი სლაიდერი.
დამზადებულია ედუარდო ალეგრინის მიერ
2016 წლის 19 ოქტომბერი

HTML და CSS კექსის სლაიდერი შპრიცებით!
დამზადებულია ჯეიმი კულტერის მიერ
2016 წლის 14 ოქტომბერი

დამზადებულია mario s maselli-ს მიერ
2016 წლის 12 ოქტომბერი

UI ანიმაციის #2 შესწავლა HTML, CSS და JavaScript-ით.
დამზადებულია mario s maselli-ს მიერ
2016 წლის 22 სექტემბერი

UI ანიმაციის #3 შესწავლა HTML, CSS და JavaScript-ით.
დამზადებულია mario s maselli-ს მიერ
2016 წლის 22 სექტემბერი

Ecommerce Slider v2.0 HTML, CSS და JavaScript-ით.
დამზადებულია პედრო კასტროს მიერ
2016 წლის 17 სექტემბერი

HTML, CSS და JavaScript სუფთა სლაიდერი მოხრილი ფონით.
დამზადებულია რუსლან პივოვაროვის მიერ
2016 წლის 13 სექტემბერი

UI ანიმაციის #1 შესწავლა HTML, CSS და JavaScript-ით.
დამზადებულია mario s maselli-ს მიერ
2016 წლის 8 სექტემბერი

ისიამოვნეთ Power CSS: მაღლა და ქვევით თითოეული შუა სურათი და გვერდითი სლაიდერი ლაითბოქსით.
დამზადებულია ქსესოს მიერ
2016 წლის 15 აგვისტო

ორმაგი ექსპოზიცია არის ფოტოგრაფიული ტექნიკა, რომელიც აერთიანებს 2 სხვადასხვა სურათს ერთ სურათში.
დამზადებულია მისაკი ნაკანოს მიერ
2016 წლის 3 აგვისტო

სლაიდერი CSS3 თვისების კლიპის გამოყენებით.
დამზადებულია პედრო კასტროს მიერ
2016 წლის 1 მაისი

საპასუხო CSS სლაიდერი.
დამზადებულია geekwen-ის მიერ
2016 წლის 19 აპრილი

ეს არის მარტივი სლაიდერის ექსპერიმენტი, რომელშიც ნაჩვენებია ლამაზი მნიშვნელობის მქონე სიტყვები, რომელთა პირდაპირ თარგმნა შეუძლებელია. ფოკუსი: ელეგანტური ტიპოგრაფია და მარტივი, მაგრამ მიმზიდველი გადასვლები.
დამზადებულია ჯო ჰარის მიერ
2016 წლის 5 აპრილი

ანიმაციის იდეა არის CSS კლიპის ბილიკის მნიშვნელობის შეცვლა, რაც იწვევს ეფექტის გაქრობას.
დამზადებულია ბჰაკტი ალ აკბარის მიერ
2016 წლის 31 მარტი

წერტილოვანი სლაიდერი HTML, CSS და JavaScript-ით.
დამზადებულია დერეკ ნგუენის მიერ
2016 წლის 16 მარტი

პრიზმის ეფექტის სლაიდერი HTML, CSS და JavaScript-ით.
დამზადებულია ვიქტორის მიერ
2016 წლის 12 მარტი

მოცურების ფონის გალერეა HTML, CSS და JavaScript-ით.
დამზადებულია რონ გიერლახის მიერ
2015 წლის 30 ნოემბერი

HTML, CSS და JavaScript სლაიდერის გადაწყვეტა.
დამზადებულია იურგენ გენსერის მიერ
2015 წლის 30 სექტემბერი

პროდუქტის სლაიდერი, რომელიც აღჭურვილია Sequence.js-ით. Sequence.js - საპასუხო CSS ანიმაციური ჩარჩო უნიკალური სლაიდერების, პრეზენტაციების, ბანერების და სხვა Step-ზე დაფუძნებული აპლიკაციების შესაქმნელად.
დამზადებულია იან ლუნის მიერ
2015 წლის 15 სექტემბერი

პატარა წრის მორგებული სლაიდერი.
დამზადებულია ბრამ დე ჰაანის მიერ
2015 წლის 11 აგვისტო

საპასუხო GTA V სლაიდერი HTML, CSS და JavaScript-ით.
დამზადებულია ედუარდ მაიერის მიერ
2014 წლის 24 იანვარი

ის სლაიდერის მსგავსია, მაგრამ უცნობი მიზეზების გამო ბრუნავს კუბებად.
დამზადებულია ერიკ ბრიუერის მიერ
2013 წლის 4 დეკემბერი

დამზადებულია უგო დარბიბრაუნის მიერ
2013 წლის 28 აგვისტო

მარტივი სლაიდერები

სურათის გადაფარვის სლაიდერი HTML, CSS და ვანილის JavaScript-ით.
დამზადებულია Yugam-ის მიერ
2017 წლის 7 ივნისი

HTML და CSS გამორჩეული გამოსახულების სლაიდერი.
დამზადებულია ჯოშუა ჰიბერტის მიერ
2016 წლის 16 ივნისი

მრავალ ღერძიანი გამოსახულების სლაიდერი

მრავალ ღერძიანი გამოსახულების სლაიდერი HTML, CSS და JavaScript-ით.
დამზადებულია ბურაკ ქანის მიერ
2013 წლის 22 ივლისი

კუბის სლაიდერი, პატარა ექსპერიმენტი HTML5/CSS3 3D ტრანსფორმაციებით.
დამზადებულია ილია კ.
2013 წლის 26 ივნისი

თუ თქვენ გჭირდებათ JQuery სლაიდერის დამატება თქვენს საიტზე, მაშინ ამ სტატიაში ნახავთ საჭირო დანამატების აღწერას. მიუხედავად იმისა, რომ JQuery-მ მთლიანად ჩაანაცვლა JavaScript, ჩვენ მაინც გვჭირდება დანამატები ვებ დიზაინის პროცესის დასაჩქარებლად.

ჩვენ შეგვიძლია შევიტანოთ ცვლილებები ზოგიერთ ამ დანამატში და შევქმნათ ახალი სლაიდერები, რომლებიც უკეთ ასახავს ჩვენი საიტის მიზნებს.

სხვა სლაიდერებისთვის, თქვენ უბრალოდ უნდა დაამატოთ სათაურები, სურათები და აირჩიოთ ეფექტები, რათა შეცვალოთ სლაიდები, რომლებიც ერთდროულად გამოჩნდება სლაიდერიდან. ყველა ამ დანამატს თან ახლავს დამხმარე დოკუმენტაცია, ამიტომ მათში ახალი ეფექტების ან ფუნქციების დამატება არ არის დიდი საქმე. თქვენ ასევე შეგიძლიათ შეცვალოთ ტრიგერები, რომლებიც შედის ქვესტრუქტურაში, როგორიცაა JQuery-ის შესრულების პროგრამა.

დარჩენილი ტენდენციები, როგორიცაა საპასუხო დიზაინი, კიდევ უფრო მნიშვნელოვანია ვებ პროექტებისთვის, მიუხედავად იმისა, დანერგავთ თუ არა დანამატს ან სკრიპტს. ყველა ეს ელემენტი ამოიღებს კანს ამ დანამატებიდან, კიდევ უარესი. ყველაფერი, რაც გამოვიდა 2014 წლის გამოცემიდან, შედის ამ სიაში.

jQuery სლაიდერის სურათი

Jssor საპასუხო სლაიდერი

მე ცოტა ხნის წინ გამოვიყენე ფუნქციური jQuery სლაიდერი ამ ერთზე და მივხვდი, რომ ის თავის საქმეს ძალიან კარგად აკეთებს. არსებობს გაუთავებელი შესაძლებლობები, რომელთა გაფართოება შესაძლებელია ღია სლაიდერის გამომავალი კოდის გამოყენებით:

• ადაპტაციური დიზაინი;
• 15-ზე მეტი რეგულირების პარამეტრი;
• სურათის მოდიფიკაციის 15-ზე მეტი ეფექტი;
• სურათების გალერეა, კარუსელი, სრული ეკრანის ზომის მხარდაჭერა;
• ვერტიკალური ბანერის მბრუნავი; სლაიდების სია;
• ვიდეო მხარდაჭერა.

დემო | მოზიდვა

PgwSlider - ადაპტური სლაიდერი JQuery / Zepto-ზე დაფუძნებული

ამ მოდულის ერთ-ერთი ამოცანაა სურათების სლაიდების დემონსტრირება. ის კიდევ უფრო კომპაქტურია, რადგან jQuery ფაილების ზომა არის მხოლოდ 2.5 KB, რაც საშუალებას გაძლევთ ეფექტურად გაზარდოთ იგი.

• ადაპტური განლაგება;
• SEO ოპტიმიზაცია;
• სხვადასხვა ბრაუზერის მხარდაჭერა;
• უბრალოდ გადადით სურათზე;
• არქივის ზომა 2,5 კბ-ზე ნაკლებია.

დემო | მოზიდვა

Jquery ვერტიკალური ახალი ამბების სლაიდერი

პატარა და ყავისფერი JQuery-სლაიდერი, დავალებები ახალი რესურსებისთვის პუბლიკაციების ნაკადით მარცხენა მხრიდან და სურათები ნაჩვენებია მარჯვენა ხელში:

• ადაპტაციური დიზაინი;
• ახალი ელემენტების ვერტიკალური სვეტი;
• გაფართოებული სათაურები.

დემო | მოზიდვა

Wallop Slider

ეს სლაიდერი არ ჰგავს JQuery-ს, მაგრამ მინდა შემოგთავაზოთ, რადგან ის კიდევ უფრო კომპაქტურია და საშუალებას გაძლევთ მნიშვნელოვნად შეცვალოთ გვერდების ჩვენების დრო. გამაგებინე, რას იმსახურებ:

• ადაპტური განლაგება;
• მარტივი დიზაინი;
• სლაიდების შეცვლის სხვადასხვა ვარიანტები;
• მინიმალური JavaScript კოდი;
• ზომა მხოლოდ 3KB.

დემო | მოზიდვა

ბრტყელი სტილის პოლაროიდის გალერეა

მაგიდაზე მიმოფანტული დოკუმენტების გალერეის სტილმა კომპაქტური განლაგებითა და დახვეწილი დიზაინით შესაძლოა დიდი ყურადღება მიიპყროს თქვენგან. უფრო შესაფერისი ტაბლეტებისა და დიდი ეკრანებისთვის:

• ადაპტაციური სლაიდერი;
• ბრტყელი დიზაინი;
• ვიპადკოვა სლაიდების შეცვლა;
• ახალი წვდომა გასასვლელ კოდზე.

დემო | მოზიდვა

A-სლაიდერი

დემო | მოზიდვა

HiSlider – HTML5, jQuery და WordPress გამოსახულების სლაიდერი

HiSlider-მა წარმოადგინა ახალი, უფასო jQuery სლაიდერის მოდული, რომელიც საშუალებას გაძლევთ შექმნათ სხვადასხვა სურათების გალერეები ფანტასტიკური გადასვლებით:

• ადაპტაციური სლაიდერი;
• არ საჭიროებს პროგრამირების ცოდნას;
• ათეული საოცარი შაბლონები და სკინები;
• გარნის გარდამავალი ეფექტები;
• სხვადასხვა პლატფორმების მხარდაჭერა;
• მდგრადობა WordPress, Joomla, Drupal-დან;
• შინაარსის ჩვენების შესაძლებლობა განსხვავებული ტიპები: სურათი, YouTube ვიდეოდა Vimeo ვიდეო;
• გნუჩკას დაყენება;
• ძირითადი დამატებითი ფუნქციები;
• არ არის აუცილებელი ავალდებულოთ ნაჩვენები შინაარსი.

დემო |

ვაა სლაიდერი

WOW Slider არის ადაპტური JQuery სლაიდერი, რომელიც აჩვენებს საოცარ ვიზუალურ ეფექტებს ( დომინო, მხრივ, rozmittya, რევოლუცია და შპალები, ჩანგალი, ჟალუზები) და პროფესიონალური შაბლონები.

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 ავტომატურად არეგულირებს სიგანეს და სიმაღლეს ორიგინალური ელემენტის ზომების მიხედვით. ეს არის მარტივი jQuery სლაიდერი. იგი შედგება სლაიდ ზონისგან ზედა და ნავიგაციის ჩანართის პანელის ქვედა ნაწილში. სლაიდერი არეგულირებს მის სიგანეს და სიმაღლეს, რათა შეესაბამებოდეს ორიგინალური კონტეინერის ზომებს.

პატარა დიაგონალურ ეკრანებზე ნახვისას ნავიგაციის ჩანართები იქცევა პატარა ხატებად:

• ადაპტაციური დიზაინი;
• გადაახვიეთ მაუსის დაწკაპუნებით.

დემო |

უფასო 3D დასტის სლაიდერი

ექსპერიმენტული სლაიდერი, რომელიც წვავს სურათებს 3D-ში. ორი დასტა მიუთითებს ქაღალდის ღირებულებაზე, ასე რომ, როდესაც სურათი ამოღებულია, ის გამოჩნდება სლაიდერის ცენტრში:

• ადაპტაციური დიზაინი;
• Flip გადასვლა;
• 3D ეფექტები.

დემო |

Fullscreen Slit Slider დაფუძნებული JQuery და CSS3 + საცნობარო წიგნზე

თქვენ შეისწავლით თუ როგორ უნდა შექმნათ სლაიდერი სლაიდერიდან: იდეა არის "მოჭრა" და გამოჩნდეს გადინებული სლაიდი ამ ფორმით, როდესაც ხსნით გამოსახულების წინა ან წინა მხარეს. JQuery და CSS ანიმაციის გამოყენებით, ჩვენ შეგვიძლია შევქმნათ უნიკალური გარდამავალი ეფექტები:

• ადაპტაციური დიზაინი;
• გაყოფილი გადასვლა;
• სრული ეკრანის სლაიდერი.

დემო |

Unislider – ძალიან პატარა jQuery სლაიდერი

ყველა არასაჭირო ზარი და სასტვენი და განლაგება, ზომა 3KB-ზე ნაკლებია. Vikorize ნებისმიერი HTML კოდი თქვენი სლაიდებისთვის, გააფართოვეთ იგი დამატებითი CSS-ით. Unslider-თან დაკავშირებული ყველაფერი განთავსებულია GitHub-ზე:

• სხვადასხვა ბრაუზერის მხარდაჭერა;
• კლავიატურის მხარდაჭერა;
• სიმაღლის მიხედვით რეგულირება;
• ადაპტაციური დიზაინი;
• სენსორული შეყვანის მხარდაჭერა.

დემო | მოზიდვა

მინიმალური საპასუხო სლაიდები

უკაცრავად, კომპაქტური დანამატი ( ყველაფრის ზომაა 1 კბ), რომელიც ქმნის ადაპტირებულ სლაიდერს, ვიკორის ელემენტებს კონტეინერის შუაში. ResponsiveSLides.js მუშაობს ბრაუზერების დიდ რაოდენობასთან, მათ შორის IE-ს ყველა ვერსია IE6-მდე და ზემოთ:

• საერთო ადაპტაციური;
• ზომა 1 KB;
• CSS3 შეიძლება გაშვებული იყოს JavaScript-ის საშუალებით;
• მარტივი მარკირება ბურთულიანი სიებიდან;
• გადასვლების ეფექტების რეგულირების უნარი და ერთი სლაიდის ყურების სირთულე;
• მხარს უჭერს მრავალი სლაიდ შოუს შექმნის შესაძლებლობას;
• ავტომატური და ხელით გადახვევა.

დემო |

კამერა – უფასო jQuery სლაიდერი

კამერა არის დანამატი უწყვეტი გადასვლის ეფექტებით და ადაპტური განლაგებით. ადვილია მასთან შეგუება, გამოიყენეთ მობილური მოწყობილობები:

• სრულად ადაპტირებული დიზაინი;
• ხელმოწერები;
• ვიდეოს დამატების შესაძლებლობა;
• 33 სხვადასხვა ფერის ხატები.

დემო |

SlidesJS, საპასუხო jQuery მოდული

SlidesJS არის პასუხისმგებელი დანამატი JQuery-სთვის (1.7.1 და ზემოთ) სენსორული მოწყობილობებისა და CSS3 გადასვლების მხარდაჭერით. ჩაატარეთ ექსპერიმენტი, სცადეთ რამდენიმე მზა აპლიკაცია, რომელიც დაგეხმარებათ გაიგოთ როგორ დაამატოთ SlidesJS თქვენს პროექტში:

• ადაპტაციური დიზაინი;
• CSS3 -go;
• სენსორული მოწყობილობების მხარდაჭერა;
• ბოდიშს გიხდით.

დემო | მოზიდვა

BX Jquery Slider

ეს არის უფასო ადაპტური JQuery სლაიდერი:

• სრულიად ადაპტირებადი - ადაპტირებადი ნებისმიერ მოწყობილობაზე;
• სლაიდების ჰორიზონტალური, ვერტიკალური ცვლილება;
• სლაიდები შეიძლება შეიცავდეს სურათებს, ვიდეოებს ან HTML შინაარსს;
• გაფართოებული მხარდაჭერა სენსორული მოწყობილობებისთვის;
• სასარგებლო CSS გადასვლები სლაიდების ანიმაციებისთვის ( აპარატურა);
• Gateway API და საჯარო მეთოდები;
• ფაილის მცირე ზომა;
• ბოდიშს გიხდით განხორციელებისთვის.

დემო |

FlexSlider 2

ყველაზე ლამაზი ადაპტური სლაიდერი. Ახალი ვერსიაკიდევ უფრო გაუმჯობესდა რობოტის სიჩქარისა და მისი კომპაქტურობის გაზრდის მიზნით.

დემო | მოზიდვა

Galleria – საპასუხო ფოტო გალერეა JavaScript-ზე დაფუძნებული

Galleria წარმოდგენილია მილიონობით საიტზე, რათა შეიქმნას სურათების გალერეა მაღალ დონეზე. მის ნამუშევრებზე დადებითი კომენტარების რაოდენობა უბრალოდ დიდია:

• სრულიად უკატალო;
• სრული ეკრანის ნახვის რეჟიმი;
• 100% ადაპტირებული;
• არ არის საჭირო პროგრამირების დამადასტურებელი საბუთი;
• iPhone, iPad და სხვა სენსორული მოწყობილობების მხარდაჭერა;
• Flickr, Vimeo, YouTube და მრავალი სხვა;
• დეკილკას თემები.

დემო | მოზიდვა

Blueberry – მარტივი საპასუხო jQuery გამოსახულების სლაიდერი

წარმოგიდგენთ JQuery გამოსახულების სლაიდერს, რომელიც სპეციალურად არის დაწერილი საპასუხო ვებ დიზაინისთვის. Blueberry არის ექსპერიმენტული გამოსახულების სლაიდერის დანამატი ხილვადობით გამომავალი კოდი, yaka bula დაიწერა სპეციალურად რობოტებისთვის ადაპტაციური შაბლონებით.

ამ გაკვეთილში ჩვენ შევქმენით მშვენიერი CSS3 სლაიდერი. განსაკუთრებით შესამჩნევია სლაიდებს შორის გაქრობის ეფექტი. Dodatkovo შეიძლება გამოყენებულ იქნას კანის გამოსახულების აღსაწერად. თქვენი ინფორმაციის ორგანიზებისთვის, არის დაუგეგმავი სია. სლაიდები ავტომატურად შერეული იქნება დამატებითი CSS3 ანიმაციით.

HTML განლაგება

HTML განლაგება ძალიან მარტივია. აპლიკაციას აქვს რამდენიმე სლაიდი. მათი კანი შედგება გამოსახულებისგან (როგორც ფონი) და ტექსტის აღწერილობა div ელემენტში. შეგიძლიათ უბრალოდ ჩასვათ დამატებითი სლაიდები.

CSS

სლაიდერისთვის, ანიმაციები არის CSS3 anim_slides და anim_titles. პირველ რიგში, ეს ეხება სლაიდებს, მეორე კი აღწერის ტექსტს. აღწერილობისთვის, პოზიცია და გამჭრიახობაც იცვლება.

/* სლაიდერი */ .სლაიდები ( სიმაღლე: 300 პიქსელი; ზღვარი: 50 პიქსელი ავტო; გადადინება: დამალული; პოზიცია: შედარებითი; სიგანე: 900 პიქს; ) .სლაიდები ul ( სია-სტილი: არცერთი; პოზიცია: შედარებითი; ) /* ანიმაციის ჩარჩოები # anim_slides */ @-webkit-keyframes 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;)). სლაიდები ul li (გაუმჭვირვალობა:0; პოზიცია:აბსოლუტური; ზედა:0; /* ანიმაცია css3 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear;-webkit-imation-count: უსასრულო -webkit-animation-state:-name: anim_slides: -moz-ანიმაცია; მიმართულება: ნორმალური; (2) div ( -webkit-animation-delay: 6.0 s; -moz-animation-delay: 6.0 s; .slides ul li :nth-child(3) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( ჩვენება:ბლოკი; ) /* ანიმაციური ჩარჩოები #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( მარცხნივ:100%; გაუმჭვირვალობა:0; ) 5% ( მარცხნივ:10%; გაუმჭვირვალობა:1; ) 20% ( მარცხნივ: 10%; გაუმჭვირვალობა:0) 5% (მარცხნივ:10%; გამჭვირვალობა:1;) 20% (მარცხნივ:10%;) 25% (მარცხნივ:100%;) 100% (მარცხნივ;) :100% გაუმჭვირვალობა:0) .სლაიდები ul li div (ფონის ფერი:#000000; საზღვრები-რადიუსი:10px 10px; box-shadow:0 0 5px #FFFFFF ჩასმული; ფერი:#FFF FFF; font; ზომა: 26px: აბსოლუტური: 50% ანიმაცია: 24.0s - ანიმაცია - უსასრულო; -ანიმაცია-მიმართულება: ნორმალური; -webkit-ანიმაცია-დაყოვნება: 0; -webkit-animation-play-state: გაშვებული; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-ანიმაცია-ხანგრძლივობა: 24.0წ; -moz-ანიმაცია-დროის ფუნქცია: ხაზოვანი; -moz-animation-iteration-count: უსასრულო; -moz-ანიმაცია-მიმართულება: ნორმალური; -moz-ანიმაცია-დაყოვნება: 0; -moz-animation-play-state: გაშვებული; -moz-animation-fill-mode: წინსვლა; )