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

Სარჩევი

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

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

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

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

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

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

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

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

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

სლაიდერი ადრე და შემდეგ მხოლოდ html და css-ით.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML, CSS და Javascript სლაიდერი რთული ანიმაციით და ნახევრად ფერადი დახრილი ტექსტით.
დამზადებულია რუსლან პივოვაროვის მიერ
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 დეკემბერი

სრულეკრანიანი სლაიდერი (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

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

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

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

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

ეს მარაგი ილუსტრაციაა იმ სლაიდების შესახებ, რომლებიც ქმნიან სლაიდებს, რომლებიც მოჭრილია ყველა დანარჩენზე (განსაკუთრებით მათზე, რომლებიც ჩარჩენილია სროლისთვის). Tse "გამარჯვება nashtuvannya їх სიღრმისა და აგრესიული პოზიციის გარეშე: აბსოლუტური; სუნის მსგავსი, მოქნილი და ადვილად შესანახი გვერდის ნორმალურ ნაკადში.

თავსებადი ბრაუზერები: 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-ით.

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

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

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

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

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

Tse ექსპერიმენტი იმის შესახებ, თუ როგორ დაგვეხმარება 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 დეკემბერი

პატარა სლაიდერი აგებულია flexbox-ით. Deyaky, hto vіdpovidaє, და შეიძლება იყოს დაფიქსირებული ელემენტების ბოლოში conjurer.
დამზადებულია რობერტის მიერ
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 ანიმაციური ჩარჩო უნიკალური სლაიდერების, პრეზენტაციების, ბანერების და სხვა ნაბიჯებზე დაფუძნებული აპლიკაციების შესაქმნელად.
დამზადებულია იან ლუნის მიერ
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 ივნისი

ამ გაკვეთილს აქვს შესანიშნავი CSS3 სლაიდერი. Vіn vikoristovuvatime ეფექტი ქრებოდა სლაიდებს შორის. დოდატკოვო შესაძლებელია კანის გამოსახულების აღწერილობის დაწერა. ინფორმაციის გამარჯვებულთა ორგანიზებისთვის, არსებობს შეუკვეთავი სია. სლაიდები ავტომატურად შეიქმნება დამატებითი CSS3 ანიმაციებისთვის.

HTML მარკირება

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

css

CSS3 ანიმაციები anim_slides და anim_titles მონიშნულია სლაიდერისთვის. პირველი zastosovuєtsya okremih სლაიდები, მეგობარი - ინვენტარის ტექსტისთვის. აღწერისთვის შეცვლილია ამ გამჭვირვალობის პოზიციაც.

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

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

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

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

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

jQuery გამოსახულების სლაიდერი

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

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

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

დემო | ისარგებლეთ

PgwSlider - საპასუხო სლაიდერი, რომელიც დაფუძნებულია jQuery/Zepto-ზე

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

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

დემო | ისარგებლეთ

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

Gnuchkiy i korisny jQuery - სლაიდერი, დავალებები ახალი ამბების რესურსებისთვის პუბლიკაციების მარცხენა მხრიდან გადაადგილებით და მარჯვენა გამოსახულების ჩვენებით:

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

დემო | ისარგებლეთ

Wallop Slider

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

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

დემო | ისარგებლეთ

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

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

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

დემო | ისარგებლეთ

A-სლაიდერი

დემო | ისარგებლეთ

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

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

• საპასუხო სლაიდერი;
• არ არის საჭირო პროგრამირების ცოდნა;
• Dekіlka საოცარი შაბლონები და სკინები;
• გარნის გარდამავალი ეფექტები;
• სხვადასხვა პლატფორმის მხარდაჭერა;
• Sumіsnіst іz WordPress, Joomla, Drupal;
• შინაარსის ჩვენების უნარი განსხვავებული ტიპები: სურათი, YouTube ვიდეორომ Vimeo ვიდეო;
• გნუჩკას მელოდია;
• ძირითადი დამატებითი ფუნქციები;
• Nebmezheniya obsyag vіdobrazhuvanogo შინაარსი.

დემო |

wow სლაიდერი

WOW სლაიდერი - ცე საპასუხო jQuery- სლაიდერისურათი საოცარი ვიზუალური ეფექტებით ( დომინო, მხრივ, rozmittya, გადატრიალება და ძილის, wilt, ბლაინდები) და პროფესიული შაბლონები.

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

• სრულად ადაპტირებადი;
• ყველა ბრაუზერის და ყველა ტიპის დანართების მხარდაჭერა;
• პიდტრიმკა სენსორული შენობები;
• მარტივი ინსტალაცია WordPress-ზე;
• Gnuchkіst აქვს nalashtuvanni;
• SEO-ოპტიმიზაცია.

დემო |

Nivo Slider - jQuery მოდული ფასის გარეშე

Nivo Slider არის ყველაზე ლამაზი და მარტივი გამოსახულების სლაიდერი მსოფლიოში. Nivo Slider მოდული უფასოა და ლიცენზირებულია MIT ლიცენზიით:

• საჭირო jQuery 1.7 და უფრო მაღალი;
• შესანიშნავი გარდამავალი ეფექტები;
• უბრალო და ლურსმნებიანი;
• კომპაქტური და ადაპტირებული;
• ღია კოდი;
• ბიძგი და მარტივი;
• სხვადასხვა შაბლონების დეკილკა;
• სურათის ავტომატური ამოჭრა.

დემო |

მარტივი jQuery სლაიდერი ტექნიკური დოკუმენტაციიდან

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

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

დემო |

JQuery გამოსახულების სლაიდერის ზომის შეცვლა

თუნდაც უბრალო სლაიდერი, რომელიც იკავებს გვერდის სიგანის 100%-ს და ეტევა მობილური მოწყობილობების ეკრანის ზომას. ჩვენ ვმუშაობთ CSS გადასვლებით და სურათები ერთდროულად „ჯდება“ წამყვანებთან. წამყვანი შეიძლება იყოს ჩანაცვლება ან ჩანაცვლება, ასე რომ თქვენ არ გჭირდებათ თქვენს მიერ გაგზავნილ სურათზე ბმული.

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

• საპასუხო jQuery სლაიდერი
• პოვნოროზმირნი;
• მინიმალისტური დიზაინი.

დემო |

ელასტიური შინაარსის სლაიდერი + დახმარება

Elastic Content Slider ავტომატურად არეგულირებს ნაკვეთის სიგანეს და სიმაღლეს მამის ელემენტის გაფართოებისას. ეს არის მარტივი jQuery სლაიდერი. მთებში არის 3 სლაიდ-ზონა, ხოლო ბოლოში ნავიგაციის ჩანართების პანელები. სლაიდერი არეგულირებს მის სიგანეს და სიმაღლეს, რათა მოერგოს Batkiv-ის კონტეინერის გაფართოებას.

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

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

დემო |

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

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

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

დემო |

Fullscreen Slit Slider დაფუძნებული jQuery-ზე და CSS3 + Cursing-ზე

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

• საპასუხო დიზაინი;
• გაყოფა-გარდამავალი;
• ზემოდან ქვემოთ სლაიდერი.

დემო |

Unislider - მართლაც პატარა jQuery სლაიდერი

არცერთი შეუსაბამო ზარი და სასტვენი და rozmіtki, rozmіr ნაკლები 3KB. შექმენით ნებისმიერი HTML კოდი თქვენი სლაიდებისთვის, გააფართოვეთ იოგა დახმარება CSS. Unslider-თან დაკავშირებული ყველაფერი მასპინძლობს GitHub-ზე:

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

დემო | ისარგებლეთ

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

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

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

დემო |

კამერა - jquery-ის გარეშე jquery სლაიდერი

კამერა არის დანამატი ხილული გარდამავალი ეფექტების გარეშე, ადაპტირებული განლაგება. მარტივი ინსტალაცია, მხარდაჭერილი მობილური შენობების მიერ:

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

დემო |

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

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

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

დემო | ისარგებლეთ

BX Jquery Slider

ძვირადღირებული საპასუხო jQuery სლაიდერი:

• Povnіstyu ადაპტური - pіdlashtovuєtsya pіd არის თუ არა ეს pristriy;
• სლაიდების ჰორიზონტალური, ვერტიკალური ცვლილება;
• სლაიდი შეიძლება შეიცავდეს სურათებს, ვიდეოებს ან HTML შინაარსს;
• გაფართოებული მხარდაჭერა სენსორული მიმაგრებისთვის;
• CSS გარდამავალი ბიბლიოთეკა სლაიდების ანიმაციისთვის ( აპარატურა უფრო სწრაფად);
• საპასუხო ზარების API და მეტი საჯარო მეთოდები;
• ფაილის მცირე ზომა;
• მარტივი განხორციელება.

დემო |

Flex Slider 2

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

დემო | ისარგებლეთ

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

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

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

დემო | ისარგებლეთ

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

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

ფოთოლცვენა 4, 2019 წელი პოსტი განახლდა

იური ნიმეცი

სლაიდერი ჩართულია სუფთა CSS+ ბონუსის სლაიდერი

CSS სლაიდერებს შეუძლიათ უპირატესობა მიანიჭონ Javascript სლაიდერებს. ერთი ასეთი pervag tse shvidkіst zavantazhennya. არა მხოლოდ ეს, სლაიდერების სურათები უკრავს დიდი ზომებით (რადგან არ არის ოპტიმიზაცია სხვადასხვა ეკრანისთვის), არამედ ფაქტობრივი საათი ასევე გამოიყენება სკრიპტების გადასაღებად. Ale at statti V, უბრალოდ გამოიყენეთ სუფთა CSS სლაიდერები.

ღერძი, რაც მე ვიცი საიტზე სლაიდერების თემაზე:

1. CSS3 გამოსახულების სლაიდერი

CSS სლაიდერი, ერთგვარი რადიო ღილაკი სლაიდების ნავიგაციისთვის. რადიო ღილაკები განთავსებულია სლაიდერის ქვეშ. ყირიმის სანავიგაციო რადიო ღილაკები მდებარეობს მარჯვენა და მარჯვნივ ისრების უკან. მისდევდეს მას, თითქოს გამოსახულება ერთდროულად არის vіdobrazhati, vikoristovuyutsya ფსევდოკლასებში :შემოწმებული .

2. CSS3 გამოსახულების სლაიდერი მინიატურებით

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

3. CSS გალერეა

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

4. სლაიდერი CSS-ზე პოზილას გარეშე

მინდა შეგახსენოთ, რომ ეს სლაიდერი არ არის გამარჯვებული! წარწერის უკან, თავის გამოსახულების კრემი (სლაიდი), შეგიძლიათ ნახოთ კიდევ 2 სლაიდი. სუნი როზთაშოვანია მთავარი. სლაიდების ცვლილება ნაჩვენებია ლამაზ რეჟიმში: უკანა მხარეს ორი სლაიდია დახატული და ცენტრი ხდება ის სლაიდი, რომელიც შემდეგ გახდება მთავარი. შემდეგ სლაიდი უფრო დიდი ხდება და თავსდება სხვების წინ.

5. CSS3 საპასუხო სლაიდერი

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

*** ბონუს სლაიდერი ***

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

ვისნოვოკი

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

პუნქტები, რომლებიც განხილული იყო სტატიაში.