უფასო 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 აპრილი
იყენებს მორგებული დიაპაზონის შეყვანას სლაიდერისთვის.
დამზადებულია დადლი სტორის მიერ
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 ივნისი
სლაიდერის ურთიერთქმედება, რომელიც იყენებს სიჩქარისა და სიჩქარის ეფექტებს (UI Pack) ანიმაციის გასაუმჯობესებლად. ანიმაცია ამოქმედდება ისრიანი ღილაკების, ნავიგაციის დაწკაპუნების ან გადახვევის ჯეკის საშუალებით. ეს ვერსია მოიცავს საზღვრებს, როგორც ურთიერთქმედების ნაწილს.
დამზადებულია სტივენ სკაფის მიერ
2017 წლის 11 მაისი
მარტივი სლაიდერი მინიმალურ სტილში სურათების გამოსაჩენად. სურათის ნაწილი გამოდის თითოეულ სლაიდზე.
დამზადებულია ნათან ტეილორის მიერ
2017 წლის 22 იანვარი
რამ არის საკმაოდ მარტივი კონფიგურირებადი. თქვენ შეგიძლიათ უსაფრთხოდ შეცვალოთ შრიფტი, შრიფტის ზომა, შრიფტის ფერი, ანიმაციის სიჩქარე. JS-ში მასივის ახალი სტრიქონის პირველი ასო გამოჩნდება ახალ სლაიდზე. მარტივი შექმნა (ან წაშლა) ახალი სლაიდი: 1. დაამატეთ ახალი ქალაქი მასივში JS-ში. 2. შეცვალეთ ცვლადის სლაიდების რაოდენობა და ჩადეთ ახალი სურათი scss სიაში CSS-ში.
დამზადებულია რუსლან პივოვაროვის მიერ
2016 წლის 8 ოქტომბერი
2016 წლის 7 ოქტომბერი
ეს დახრილი სლაიდერი გადახვევით, რომელიც დაფუძნებულია სუფთა JS-სა და CSS-ზე (ბიბლიოთეკების გარეშე).
დამზადებულია ვიქტორ ბელოზიოროვის მიერ
2016 წლის 3 სექტემბერი
სლაიდერის ანიმაცია Pokemon-ის დიზაინით.
დამზადებულია ფამ მიკუნის მიერ
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 + Slick სლაიდერი წინა/შემდეგი სლაიდების გადახედვით.
დამზადებულია კარლო ვიდეკის მიერ
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
საპასუხო: დიახ
დამოკიდებულებები: -
კოდის შესახებ Stacked Flexible Slides Layoutეს მაგალითი გვიჩვენებს, თუ როგორ უნდა შევქმნათ ერთმანეთზე დაწყობილი სლაიდების განლაგება (განსაკუთრებით გამოსადეგია fade in/out გადასვლებისთვის). ეს მიიღწევა მათი სიმაღლის დაყენების და პოზიციის თავიდან აცილების გარეშე: აბსოლუტური; ამიტომ ისინი სრულიად მოქნილები არიან და ადვილად ინახება გვერდების ნორმალურ ნაკადში.
თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari
საპასუხო: დიახ
დამოკიდებულებები: -
საპასუხო სლაიდერის კოდის შესახებანიმაციური საპასუხო სლაიდერი HTML, CSS და JavaScript-ში.
თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari
საპასუხო: დიახ
დამოკიდებულებები: animate.css
კოდის Slider With Masked Text-ის შესახებმხოლოდ CSS სლაიდერი ნიღბიანი ტექსტით.
თავსებადი ბრაუზერები: Chrome, Edge (ნაწილობრივი), Firefox, Opera, Safari
საპასუხო: დიახ
დამოკიდებულებები: -
კოდის შესახებ სურათი და შინაარსი პარალაქსის ეფექტით.
კოდის შესახებმხოლოდ CSS სლაიდ გალერეა.
თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari
საპასუხო: დიახ
დამოკიდებულებები: -
Pure HTML/CSS Slider კოდის შესახებსუფთა 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 დეკემბერი
პატარა სლაიდერი აგებულია flexbox-ით. გარკვეულწილად რეაგირებს და შეიძლება ჰქონდეს ფიქსირებული ელემენტები სლაიდერის ზონასთან ერთად.
დამზადებულია რობერტის მიერ
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 სექტემბერი
ისიამოვნეთ 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 ივნისი
IN ეს გაკვეთილიჩვენ გავაკეთებთ შესანიშნავ CSS3 სლაიდერს. ის გამოიყენებს გაცვეთილ ეფექტს სლაიდებს შორის. გარდა ამისა, შეგიძლიათ გამოიყენოთ აღწერა თითოეული სურათისთვის. ინფორმაციის ორგანიზებისთვის გამოყენებული იქნება დაუგეგმავი სია. სლაიდები ავტომატურად შეიცვლება CSS3 ანიმაციების გამოყენებით.
HTML მარკირებაHTML მარკირება ძალიან მარტივია. მაგალითს აქვს ოთხი სლაიდი. თითოეული შედგება გამოსახულების (როგორც ფონის) და აღწერის ტექსტისგან div ელემენტში. ძალიან მარტივია დამატებითი სლაიდების ჩასმა.
აღწერა #1
აღწერა #2
აღწერა #3
აღწერა #4
სლაიდერი იყენებს 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: ხაზოვანი - ანიმაცია - უსასრულო - ანიმაცია - ანიმაცია - ანიმაცია; 24.0s -moz-animation-timing-function: linear; -moz-ანიმაცია-მიმართულება: ნორმალური; -moz-ანიმაცია-დაყოვნება: 0; -moz-animation-play-state: გაშვებული; -moz-animation-fill-mode: წინსვლა; ) /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) 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 ჩასმული; ფერი:#FFFFFF; შრიფტის ზომა:26px; მარცხენა:10%; ზღვარი: 0 ავტო; padding: 20px; პოზიცია:აბსოლუტური; ზედა:50%; სიგანე: 200px; /* Css3 ანიმაცია */ -webkit-animation-name: anim_titles; -ვებკიტი-ანიმაცია-ხანგრძლივობა: 24.0წ; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: უსასრულო; -ვებკიტი-ანიმაცია-მიმართულება: ნორმალური; -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: წინსვლა; )
Სალამი ყველას. მინდა თქვენს ყურადღებას წარმოგიდგინოთ ძალიან მაგარი სლაიდერი. ოოო... ვხედავ, სულ დამივიწყე. დიახ, დიახ, მე უკვე გავქრი, ალბათ ექვსი თვის ან ერთი წლის განმავლობაში, და აბსოლუტურად არ ვიცი როგორ ვაიძულო თავი დავდო ყოველდღე სტატია (თუმცა ეს სრულიად შესაძლებელია). კარგი, ახლა ამაზე არ ვსაუბრობთ. სლაიდერი მოწოდებულია Tympanus Codrops-ის მიერ და მუშაობს HTML5, CSS3 და TweenMax.js-ზე.
სლაიდერი არ ბრუნავს მარცხნიდან მარჯვნივ ან ზემოდან ქვემოდან, არამედ დიაგონალზე. ნავიგაციის ისრები მდებარეობს ზედა მარცხენა კუთხეში და ქვედა მარჯვენა კუთხეში. ნავიგაცია ასევე ხორციელდება მინიატურაზე მარჯვნივ და მარცხნივ დაწკაპუნებით. ყველა ანიმაცია ძალიან გლუვია და ყველაში გამართულად მუშაობს თანამედროვე ბრაუზერები. თითოეულ ცალკეულ სლაიდერის ელემენტს აქვს საკუთარი გვერდი, რომელიც იხსნება გადახედვისას დაწკაპუნებისას. გვერდს აქვს ფოტო, სათაური და ტექსტი.
სლაიდერი შესანიშნავია მხატვრის, ფოტოგრაფის, მოქანდაკის გალერეისთვის, პორტფოლიოსთვის, მოკლედ, ნებისმიერი ადამიანისთვის, რომელიც შემოქმედებით საქმიანობას ეწევა და აქვს ნამუშევრები, რომელთა ჩვენებაც სურს საიტზე. მუზეუმის ან გამოფენის ვებსაიტზე გალერეა კარგად გამოიყურება.
გალერეის დაკავშირებაგალერეის დაკავშირება მარტივია
ფაილების ჩამოტვირთვაპირველ რიგში, თქვენ უბრალოდ უნდა ჩამოტვირთოთ საწყისი კოდი ჩემი ვებსაიტიდან პირდაპირი ბმულის გამოყენებით. არქივიდან თქვენ უნდა ატვირთოთ img, css და js საქაღალდეები საიტის ძირში
ჩვენ ვაკავშირებთ css და js ფაილებსშემდეგ ჩვენ ვაკავშირებთ სკრიპტებს და სტილებს. სტილები შედის ტეგში შემდეგი კოდის დამატებით
და სკრიპტები ქვემოთ გვერდიდან დახურვის ტეგამდე
სლაიდერის დამატება საიტზე
პირველ რიგში, ჩვენ დავამატებთ ნავიგაციას საიტის ზედა ნაწილში.
arrow drop longarrow navarrow
შემდეგ კი თავად სლაიდერი
მოგონებები და აზრები 1 ავტომატიზაცია შემთხვევითი გასეირნება 2 მანქანა თვითნებური სიტყვები 3 თანაცხოვრება ერთადერთი მეგზურია შენი გული Haunted Drift 4 Bellamio გართობა Diverge 5 საძოვრები იმედები და ოცნებები 6 ფოკუსირება 1 ავტომატიზაცია ხე უნდა იყოს შენი მეგობარი, თუ მის დახატვას აპირებ მოდით, ეს მოხდეს ჩვენი გონებიდან. ეს ძალიან ცივი სურათია, შეიძლება მომიწიოს ჩემი ქურთუკის ასაღებად. ის გაყინავს. შეუძლია იმდენი. იმუშავეთ ერთ რამეზე ერთდროულად. ნუ გატაცებთ - ჩვენ გვაქვს ბევრი დრო. ჩადეთ თქვენი გრძნობები, თქვენს გულში, ეს თქვენი სამყაროა. ეს ხეები ძალიან სახალისოა. ვიწყებ მათ და მიჭირს გაჩერება. 2 მანქანები ეს არის ალბათ ყველაზე დიდი რამ, რაც ხდება ჩემს ცხოვრებაში. ჩვენ არ ვცდილობთ გასწავლოთ რაიმეს კოპირება. ჩვენ უბრალოდ აქ ვართ, რომ გასწავლოთ ტექნიკა, შემდეგ კი გაგათავისუფლოთ სამყარო. ახლა ჩვენ ვაპირებთ ამ ღრუბლის ფუმფულას. ჩვენ აქ არაფერი გვაქვს გარდა ბედნიერი ხეების. მოდით, ეს კიდევ ერთხელ გამოვიყენოთ, რასაც ხედავთ, ნუ დაგეგმავთ. მოდით, ავიდეთ აქ და დავიწყოთ გართობა, ცოტას მაინც შეუძლია ამდენი რამის გაკეთება. იმუშავეთ ერთ რამეზე ერთდროულად. ნუ გაიტაცებთ - ჩვენ გვაქვს ბევრი დრო. ჩადეთ თქვენი გრძნობები მასში, თქვენს გულში, ეს თქვენი სამყაროა. ეს ხეები ძალიან სახალისოა. მე დავიწყებ მათზე მუშაობას და მიჭირს გაჩერება. 3 თანაცხოვრება ერთადერთი გზამკვლევი არის შენი გული. მოდით ავიდეთ აქ და დაიწყე გართობა, ცოტას მაინც შეუძლია ამდენი. იმუშავეთ ერთ რამეზე ერთდროულად. ნუ გატაცებთ - ჩვენ გვაქვს ბევრი დრო. ჩადეთ თქვენი გრძნობები, თქვენს გულში, ეს თქვენი სამყაროა. ეს ხეები ძალიან სახალისოა. ვიწყებ მათ და მიჭირს გაჩერება. მაგრამ ჩვენ ჯერ იქ არ ვართ, ამიტომ არ გვჭირდება ამაზე ფიქრი. ახლა მოდით დავდოთ რამდენიმე ბედნიერი პატარა ღრუბელი ეშმაკი. თხელი საღებავი სქელ საღებავს ეწებება. მე ვაპირებ ცოტა ფერს ავურიო. 4 Bellamio ერთადერთი წინაპირობაა, რომ ის გახარებდეს ნახე. ჩვენ ვიღებთ ფუნჯის კუთხეს და ვუშვებთ მას წინ და უკან თამაში. ეს დაუგეგმავია, ეს ნამდვილად ხდება. მე "რაღაც რბილი ვარ, ბამბის გადაღება არ შემეძლო გარდა კამერით. ვფიქრობ, ცოტა უცნაური ვარ. მე მიყვარს ხეებთან და ცხოველებთან საუბარი. არაუშავს, მე უფრო მეტად ვხალისობ, ვიდრე ადამიანების უმეტესობა. არ იცოდი, რომ ამხელა ძალა გქონდა, მთების გადაადგილება შეგიძლია, ავიდეთ აქ და ცოტა რამის გაკეთება შეგვიძლია. იმუშავეთ ერთ რამეზე ერთდროულად. ნუ გატაცებთ - ჩვენ გვაქვს ბევრი დრო. ჩადეთ თქვენი გრძნობები, თქვენს გულში, ეს თქვენი სამყაროა. ეს ხეები ძალიან სახალისოა. ვიწყებ მათ და მიჭირს გაჩერება. 5 საძოვრები მოდით ავიდეთ აქ და დავიწყოთ გართობა. ასე რომ, ხშირად ვერიდებით გამდინარე წყალს და გამდინარე წყალი ძალიან სახალისოა. ყველა განსხვავებულად დაინახავს ყველაფერს - და ასეც უნდა იყოს. დიდ ძლიერ ხეს დიდი ძლიერი ფესვები სჭირდება. სტივს სურს ასახვა, ასე რომ მოდით მივცეთ მას ასახვა. ჩვენ არ უნდა ვიყოთ ვალდებულნი. ჩვენ უბრალოდ აქ ვთამაშობთ. ყველა იმ პატარა ფუმფულას დამზადება, რომელიც ღრუბლებში ცხოვრობს. მოდით, ავიდეთ აქ და დავიწყოთ გართობა, ცოტას მაინც შეუძლია ამდენი რამის გაკეთება. იმუშავეთ ერთ რამეზე ერთდროულად. ნუ გაიტაცებთ - ჩვენ გვაქვს ბევრი დრო. ჩადეთ თქვენი გრძნობები მასში, თქვენს გულში, ეს თქვენი სამყაროა. ეს ხეები ძალიან სახალისოა. მე ვიწყებ მათ და მიჭირს გაჩერება. 6 ფოკუსირება ეს დაუგეგმავია, ეს ნამდვილად ხდება, მაგრამ ჩვენ იქ არ ვართ ასე რომ, ჩვენ არ გვჭირდება ამაზე ფიქრი. ახლა მოდით აქ რამდენიმე ბედნიერი პატარა ღრუბელი ჩავდოთ. რა ეშმაკი. თხელი საღებავი სქელ საღებავს ეწებება. მე ვაპირებ ცოტა ფერს ავურიო. ჩვენ გამოვიყენებთ ვან დიკის ყავისფერს, მუდმივ წითელს და ცოტა პრუსიულ ლურჯს. მოდით, ავიდეთ აქ და დავიწყოთ გართობა. ბევრი. იმუშავეთ ერთ რამეზე ერთდროულად. ნუ გატაცებთ - ჩვენ გვაქვს ბევრი დრო. ჩადეთ თქვენი გრძნობები, თქვენს გულში, ეს თქვენი სამყაროა. ეს ხეები ძალიან სახალისოა. ვიწყებ მათ და მიჭირს გაჩერება.
Სულ ეს არის. სლაიდერი მზად არის! წარმატებები სამსახურში
Ერთ - ერთი ეფექტური გზებივებსაიტის გვერდზე მომხმარებლების ყურადღების მიქცევა არის მოძრავი ანიმაციის შექმნა. ანიმაციური ელემენტები გვეხმარება უფრო მკაფიოდ თქვან და აჩვენონ მომხმარებლებს თქვენი პროდუქტის შესახებ. ცოტა ხნის წინ, მოცურების პანელები გახდა ძალიან პოპულარული, ისევე როგორც მთელი რიგი სხვა ეფექტები, რომლებიც ჩნდება სურათზე გადახვევისას ან დაწკაპუნებისას. ისინი ასევე ცნობილია როგორც სლაიდერები, კარუსელები და ამომხტარი პანელები. ამ სტატიაში ვისაუბრებთ ადაპტური კარუსელის სლაიდერის შექმნაზე გლუვი ავტომატური გადახვევის ეფექტით.
დღეს ინტერნეტში ასობით მიმოხილვაა მზა გადაწყვეტილებების ბმულებით, მაგრამ მათი უმეტესობა შეიცავს ბევრ გამოუყენებელ ფუნქციას, რაც მნიშვნელოვნად ამცირებს სლაიდერის მუშაობას, ასევე ანელებს მთლიანად საიტის დატვირთვას. პროფესიონალი ვებ დეველოპერები ყოველთვის ცდილობდნენ შეექმნათ მოქნილი და კონფიგურირებადი პროგრამული პროდუქტები, დაბალი შესვლის ბარიერით დამატებითი ბიბლიოთეკებისთვის და დანამატებისთვის. სწორედ ამიტომ, ჩვენი სკრიპტი იყენებს მინიმალურ მოთხოვნებს ასეთი სლაიდერის ორგანიზებისთვის. ფუნქციონალობა საშუალებას გაძლევთ დააყენოთ გადართვის ინტერვალი, სიჩქარე, ასევე კონკრეტული სლაიდის არჩევანი. ქვემოთ მოცემულია რამდენიმე ცვლადი, რომელიც არეგულირებს თავად სლაიდერის მუშაობას.
timeList - სლაიდების გადართვის სიჩქარე
TimeView - დროის ჩვენება
RadioBut - ღილაკები სლაიდის ქვეშ სწრაფი ნავიგაციისთვის. ნაგულისხმევი მნიშვნელობა არის true, თუ თქვენ იყენებთ false ღილაკები გაქრება.
ახლა დავიწყოთ! შევქმნათ და გავხსნათ ფაილი index.htm
როგორც ვხედავთ, წარმოდგენილ კოდში არაფერია რთული; აქტიური სლაიდის პარამეტრი ადგენს გამოსახულების ზომასა და სიმაღლეს მისი სიგრძის მიხედვით. და სლაიდერი აჩვენებს მხოლოდ აქტიურ სურათს.
ახლა მოდით შევქმნათ და გავხსნათ style.css ფაილი და დავამატოთ იქ საჭირო მარკირება:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); სხეული ( ფერი: #4f4f5a; შრიფტი-ოჯახი: "Roboto", sans-serif; შრიფტის ზომა: 16 პიქსელი; padding: 0; ზღვარი: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; user-select: none -o-user-select: none; padding: 0 -webkit-transition: 1s -webkit-transition-timing-function: ease-in-out-function: ease-in-out .slide(სიგანე: calc; list-style: none; ctrl-არჩევა ( margin:2px; ჩვენება:inline-block; სიგანე:16px; სიმაღლე:16px; overflow :დამალული; text-indent:-9999px; background:url(radioBg.png) ცენტრის ქვედა ბოლოში არ განმეორება; ) .Radio-But .ctrl-select:hover (კურსორი:pointer; background-position:center center;) .Radio-But .ctrl-select.active (back-position:center top;) #prewbutton, #nextbutton ( ჩვენება :block:100% overflow:background: url("arrowBg.png") მარცხნივ; შემდეგი ღილაკი (მარჯვნივ: 10 პიქსელი; ფონი: url(arrowBg.png) მარჯვენა ცენტრი, არ განმეორდება; ) #prewbutton:hover, # nextbutton:hover (გაუმჭვირვალობა:1; )
Slider-wrap style თვისებაში შეიყვანეთ სიგანე – მაქსიმალური სიგრძეშენი სურათები.
#სლაიდერის ( სიგანე: calc(100% * 4); ) და .slide ( სიგანე: calc(100%/4); ) სტილის თვისებებში მიუთითეთ სურათების რაოდენობა თქვენს სლაიდერში. ჩვენს მაგალითში არის 4 მათგანი.
თუ წინ/უკან ისრები ხელს უშლის თქვენი სლაიდერის ხილვადობას, ისინი შეიძლება გახდეს უხილავი და გამოჩნდებიან, როდესაც თქვენ მათზე გადახვალთ. ამისათვის, prewBut და nextBut პარამეტრებში დააყენეთ opacity თვისება 0-ზე.
ახლა შევქმნათ და გავხსნათ ჩვენი slider.js ფაილი, რომელიც შეიცავს სლაიდერის კოდს. არ დაგავიწყდეთ jQuery ბიბლიოთეკის ჩართვა.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = ფუნქცია(ისარი)(clearTimeout(slideTime); if(arrow == "შემდეგი")(if(slideNum == slideCount) (slideNum=1;) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1).css(("transform": "translate(" + translateWidth + "px, 0)")); ") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" # სლაიდერი").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = ისარი; translateWidth = -$("#active-slide").width( ) * (slideNum -1).css(("transform": "translate(" + translateWidth + "px, 0)")); removeClass("active"); -სლაიდი"); $("#nextbutton").click(function())(animSlide("შემდეგი"); დაბრუნება false; )) $("#prewbutton").click(function())(animSlide("prew"); დაბრუნება false )) ) var adderSpan = ""; $(".slide").each(function(index) (adderSpan += "" + index + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("აქტიური"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = ფუნქცია())( if(!pause)(slideTime = setTimeout(function())(animSlide("შემდეგი")), TimeView);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pause = true;), function()(pause = false; rotator(); )); var დაწკაპუნება = false; var prevX; $(".slide").mousedown(function(e)(clicing = true; prevX = e.clientX; )); $(".slide").mouseup(function() (დაწკაპუნება = false; )); $(დოკუმენტი).mouseup(function())(დაწკაპუნება = false; )); $(".slide").mousemove(function(e)( if(დაწკაპუნება == true) (if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) დაწკაპუნება = false; ))); $(".slide").hover().css("კურსორი", "მაჩვენებელი"); rotator(); ));
animSlide ფუნქცია იღებს სამი ტიპის მნიშვნელობას: შემდეგი, prew, რიცხვითი მნიშვნელობა. შემდეგი პარამეტრი ცვლის შემდეგ სლაიდს, prew აბრუნებს წინას, ხოლო რიცხვითი მნიშვნელობა არის კონკრეტული სლაიდი, რომელიც არჩეულია რადიო ღილაკის მეშვეობით სლაიდის ქვემოთ.
წარმოდგენილი სლაიდერი იყენებდა სურათებს ვებ რესურსიდან https://pixabay.com/.
თუ თქვენ გჭირდებათ jQuery გამოსახულების მაღალი ხარისხის სლაიდერის დამატება თქვენს საიტზე, მაშინ ამ სტატიაში ნახავთ საჭირო დანამატების აღწერას. მიუხედავად იმისა, რომ JQuery-მ ბევრად გააადვილა JavaScript-თან მუშაობა, ჩვენ მაინც გვჭირდება დანამატები ვებ დიზაინის პროცესის დასაჩქარებლად.
ჩვენ შეგვიძლია შევიტანოთ ცვლილებები ზოგიერთ ამ დანამატში და შევქმნათ ახალი სლაიდერები, რომლებიც ბევრად უფრო შესაფერისია ჩვენი საიტის მიზნებისთვის.
სხვა სლაიდერებისთვის, თქვენ უბრალოდ დაამატეთ სათაურები, სურათები და აირჩიეთ სლაიდების გადასვლის ეფექტები, რომლებიც მოყვება სლაიდერს. ყველა ამ დანამატს ახლავს დეტალური დოკუმენტაცია, ამიტომ ახალი ეფექტების ან ფუნქციების დამატება არ იქნება რთული. თქვენ შეგიძლიათ შეცვალოთ მოვლენებზე დაფუძნებული ტრიგერები, თუ გამოცდილი JQuery პროგრამისტი ხართ.
უახლესი ტენდენციები, როგორიცაა საპასუხო დიზაინი, ძალიან მნიშვნელოვანია ვებ პროექტებისთვის, მიუხედავად იმისა, ახორციელებთ დანამატს თუ სკრიპტს. ყველა ეს ელემენტი თითოეულ ამ დანამატს ძალიან მოქნილს ხდის. ამ სიაში შედის ყველაფერი, რაც 2014 წელს გამოვიდა.
JQuery გამოსახულების სლაიდერები Jssor Responsive Sliderახლახან შევხვდი ამ მძლავრ jQuery სლაიდერს და შევძელი თავიდანვე დავინახე, რომ ის თავის საქმეს ძალიან კარგად ასრულებს. ის შეიცავს უსაზღვრო შესაძლებლობებს, რომლებიც შეიძლება გაფართოვდეს სლაიდერის ღია კოდის საშუალებით:
- ადაპტაციური დიზაინი;
- პერსონალიზაციის 15-ზე მეტი ვარიანტი;
- 15-ზე მეტი სურათის შეცვლის ეფექტი;
- სურათების გალერეა, კარუსელი, სრული ეკრანის ზომის მხარდაჭერა;
- ვერტიკალური ბანერის მბრუნავი, სლაიდების სია;
- ვიდეო მხარდაჭერა.
დემო | ჩამოტვირთვა
PgwSlider - საპასუხო სლაიდერი JQuery / Zepto-ზე დაფუძნებულიამ მოდულის ერთადერთი ამოცანაა სურათების სლაიდების ჩვენება. ის ძალიან კომპაქტურია, რადგან JQuery ფაილები მხოლოდ 2.5 კბ ზომისაა, რაც საშუალებას აძლევს მას მართლაც სწრაფად ჩაიტვირთოს:
- ადაპტური განლაგება;
- SEO ოპტიმიზაცია;
- სხვადასხვა ბრაუზერების მხარდაჭერა;
- მარტივი გამოსახულების გადასვლები;
- არქივის ზომა არის მხოლოდ 2.5 KB.
დემო | ჩამოტვირთვა
Jquery ვერტიკალური ახალი ამბების სლაიდერიმოქნილი და სასარგებლო JQuery სლაიდერი, რომელიც შექმნილია ახალი ამბების რესურსებისთვის, მარცხენა მხარეს პუბლიკაციების სიით და მარჯვნივ ნაჩვენები სურათით:
- ადაპტაციური დიზაინი;
- ვერტიკალური სვეტი ახალი ამბების გადართვისთვის;
- გაფართოებული სათაურები.
დემო | ჩამოტვირთვა
Wallop Sliderეს სლაიდერი არ შეიცავს jQuery-ს, მაგრამ მინდა წარმოგიდგინოთ ის, რადგან ის ძალიან კომპაქტურია და შეუძლია მნიშვნელოვნად შეამციროს გვერდის ჩატვირთვის დრო. გამაგებინეთ თუ მოგწონთ:
- ადაპტური განლაგება;
- მარტივი დიზაინი;
- სლაიდების შეცვლის სხვადასხვა ვარიანტები;
- მინიმალური JavaScript კოდი;
- ზომა მხოლოდ 3KB.
დემო | ჩამოტვირთვა
ბრტყელი სტილის პოლაროიდის გალერეასამუშაო მაგიდაზე გაფანტული დოკუმენტური გალერეა მოქნილი განლაგებით და ლამაზი დიზაინით ბევრი თქვენგანისთვის საინტერესო უნდა იყოს. უფრო შესაფერისი ტაბლეტებისა და დიდი ეკრანებისთვის:
- ადაპტაციური სლაიდერი;
- ბრტყელი დიზაინი;
- სლაიდის შემთხვევითი ცვლილება;
- სრული წვდომა საწყის კოდზე.
დემო | ჩამოტვირთვა
A-სლაიდერიდემო | ჩამოტვირთვა
HiSlider – HTML5, jQuery და WordPress გამოსახულების სლაიდერიHiSlider-მა წარმოადგინა ახალი უფასო მოდული JQuery სლაიდერი, რომლითაც შეგიძლიათ შექმნათ სხვადასხვა სურათების გალერეები ფანტასტიკური გადასვლებით:
- ადაპტაციური სლაიდერი;
- არ საჭიროებს პროგრამირების ცოდნას;
- რამდენიმე საოცარი შაბლონი და სკინი;
- ლამაზი გარდამავალი ეფექტები;
- სხვადასხვა პლატფორმის მხარდაჭერა;
- თავსებადია WordPress, Joomla, Drupal-თან;
- შინაარსის ჩვენების უნარი განსხვავებული ტიპები: სურათები, YouTube ვიდეოდა Vimeo ვიდეოები;
- მოქნილი დაყენება;
- სასარგებლო დამატებითი ფუნქციები;
- ნაჩვენები შინაარსის შეუზღუდავი რაოდენობა.
დემო |ჩამოტვირთვა
ვაა სლაიდერი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 დასტის სლაიდერიექსპერიმენტული სლაიდერი, რომელიც გადახვევს სურათებს 3D-ში. ორი დასტა წააგავს ქაღალდის დასტას, საიდანაც გადახვევისას გამოსახულებები ნაჩვენებია სლაიდერის ცენტრში:
- ადაპტაციური დიზაინი;
- Flip - გარდამავალი;
- 3D ეფექტები.
დემო |ჩამოტვირთვა
Fullscreen Slit Slider დაფუძნებული JQuery-სა და CSS3 + ტუტორიალზეეს გაკვეთილი გაჩვენებთ, თუ როგორ უნდა შექმნათ სლაიდერი მობრუნებით: იდეა არის „გაჭრა“ და გამოაჩინოთ მიმდინარე სლაიდი, როდესაც გახსნით შემდეგ ან წინა სურათს. JQuery და CSS ანიმაციის გამოყენებით, ჩვენ შეგვიძლია შევქმნათ უნიკალური გარდამავალი ეფექტები:
- ადაპტაციური დიზაინი;
- გაყოფილი გადასვლა;
- სრული ეკრანის სლაიდერი.
დემო |ჩამოტვირთვა
Unislider - ძალიან პატარა jQuery სლაიდერიარ არის ზედმეტი ზარები და სასტვენები, 3KB-ზე ნაკლები ზომის. გამოიყენეთ ნებისმიერი 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 გადასვლები;
- სენსორული მოწყობილობების მხარდაჭერა;
- მარტივი დაყენება.
დემო | ჩამოტვირთვა
BX Jquery Sliderეს არის უფასო საპასუხო jQuery სლაიდერი:
- სრულად რეაგირებს - ადაპტირდება ნებისმიერ მოწყობილობაზე;
- ჰორიზონტალური, ვერტიკალური სლაიდის შეცვლა;
- სლაიდები შეიძლება შეიცავდეს სურათებს, ვიდეოებს ან HTML შინაარსს;
- გაფართოებული მხარდაჭერა სენსორული მოწყობილობებისთვის;
- CSS გადასვლების გამოყენება სლაიდების ანიმაციისთვის (ტექნიკის აჩქარება);
- Callback API და სრულად საჯარო მეთოდები;
- ფაილის მცირე ზომა;
- მარტივი განხორციელება.
დემო |ჩამოტვირთვა
FlexSlider 2საუკეთესო საპასუხო სლაიდერი. ახალი ვერსიაშეიცვალა სიჩქარისა და კომპაქტურობის გაზრდის მიზნით.
დემო | ჩამოტვირთვა
Galleria - JavaScript-ზე დაფუძნებული საპასუხო ფოტო გალერეაGalleria გამოიყენება მილიონობით საიტზე სურათების გალერეების შესაქმნელად მაღალი ხარისხი. მისი ნამუშევრების შესახებ დადებითი მიმოხილვების რაოდენობა უბრალოდ არ არის ჩარტებში:
- სრულიად უფასო;
- სრული ეკრანის ნახვის რეჟიმი;
- 100% ადაპტირებული;
- არ არის საჭირო პროგრამირების გამოცდილება;
- iPhone, iPad და სხვა სენსორული მოწყობილობების მხარდაჭერა;
- Flickr, Vimeo, YouTube და სხვა;
- რამდენიმე თემა.
დემო | ჩამოტვირთვა
Blueberry - მარტივი საპასუხო jQuery გამოსახულების სლაიდერიწარმოგიდგენთ jQuery გამოსახულების სლაიდერს, რომელიც სპეციალურად არის დაწერილი საპასუხო ვებ დიზაინი. Blueberry არის ექსპერიმენტული ღია კოდის გამოსახულების სლაიდერის მოდული საწყისი კოდი, რომელიც სპეციალურად დაიწერა საპასუხო შაბლონებთან მუშაობისთვის.
