Ერთ - ერთი ეფექტური გზები საიტის გვერდზე მომხმარებლების ყურადღების მოზიდვა არის მოძრაობის ანიმაციის შექმნა. ანიმაციური ელემენტები უფრო ნათლად გვითხრათ და აჩვენე მომხმარებლებს თქვენი პროდუქტის შესახებ. ბოლო დროს, მოგზაურობის პანელები დიდი პოპულარობით სარგებლობდნენ, ისევე, როგორც რამდენიმე სხვა ეფექტი, რომელიც გამოჩნდება, როდესაც სურათზე სენსორული ან დაჭერით. ისინი ასევე ცნობილია, როგორც sliders, კარუსელები და ტოვებს პანელები. ეს სტატია განიხილავს ადაპტირებადი კარუსელის ტიპის სლაიდერის შექმნას, ავტომატური კონტრაქტის გლუვი ეფექტით.
დღეს, ქსელში ასობით მიმოხილვა შეიცავს რეკომენდაციებს მზა გადაწყვეტილებებს, თუმცა მათი უმრავლესობა შეიცავს ბევრ გამოუყენებელ ფუნქციას, რაც მნიშვნელოვნად შეამცირებს სლაიდერის შესრულებას, ისევე როგორც მთლიანად, როგორც მთლიანად. პროფესიული ვებ დეველოპერები ყოველთვის ცდილობდნენ შექმნას მოქნილი კონფიგურაცია პროგრამული პროდუქტები, დამატებითი ბიბლიოთეკებისა და დანამატების დაბალი ბარიერი. ამიტომაც ჩვენი სკრიპტის მუშაობა გულისხმობს მინიმალურ მოთხოვნებს ასეთი სლაიდერის ორგანიზებისათვის. სამუშაო ფუნქციონირება საშუალებას გაძლევთ დააყენოთ გადართვის ინტერვალი, სიჩქარე, ისევე როგორც კონკრეტული სლაიდის შერჩევა. ქვემოთ არის მუდმივი რიგის მუდმივი, მარეგულირებელი ნაწილის სლაიდერის მუშაობა.
timelist. - სლაიდ გადართვის სიჩქარე
Timeview. - ნაჩვენებია დრო
Radiobut. - ღილაკები ქვეშ slide, სწრაფი ნავიგაცია. ნაგულისხმევი, ნამდვილი ღირებულება, თუ ყალბი, ღილაკები გაქრება.
და ახლა მოდით დავიწყოთ! შექმნა და გახსნა ფაილი index.htm.
წარმოდგენილი კოდექსში, როგორც ჩვენ ვხედავთ არაფერს, სლაიდერი-გადატანა. განსაზღვრა საერთო და ხაზები სლაიდერი შუა ეკრანზე. Პარამეტრი აქტიური სლაიდი. ადგენს სურათის ზომას და სიმაღლეს მისი სიგრძის მიხედვით. და სლაიდერი. აჩვენებს მხოლოდ აქტიურ სურათს.
ახლა შექმნა და გახსნა ფაილი. style.css. და weeping მარკირების ჩვენ გვჭირდება:
@Import URL ("https://fonts.googleapis.com/css?family\u003dopen+sans :roboto"); სხეული (ფერი: # 4F4F5A; შრიფტის სახე: "რობოტო", სანს-სეიფი, შრიფტის ზომა: 16px; padding: 0;) # Slider-Wrap (MAX- სიგანე: 800px; ზღვარი: 0 ავტო; Margin-Top: 80px;) # აქტიური სლაიდი (სიგანე: 100%; ჩვენება: მაგიდა; პოზიცია: ნათესავი; overflow: დამალული; -Webkit- მომხმარებლის არჩევა: არაო-მომხმარებელი-მომხმარებელი - მომხმარებელი- Select: None;-მომხმარებლის მომხმარებელი - არჩევა: მომხმარებელი-არჩევა: არა;) #slider (პოზიცია: ნათესავი; სიგანე: Calc (100% * 4); ზედა: 0; ზღვარი: 0 ; padding: 0; -Webkit-transition: 1s; -2-transition: 1s; გარდამავალი: 1s; -Webkit-transition-timing-function: ease-in-out; -i-timing-timing-function: მარტივია გარდამავალი დრო-ფუნქცია: Ease-in-out;) .Slide (სიგანე: Calc (100% / 4); სიის სტილი: არა; ჩვენება: inloat; float: მარცხნივ;) .Slide IMG (სიგანე: 100%;) .Radio-Button (Margin-Top: 10px; ტექსტის გასწორება: ცენტრი;) .რადიო-მაგრამ .ctrl-select (ზღვარი: 2px; ჩვენება: inline- ბლოკი; სიგანე: 16px; სიმაღლე: 16px; overflow : დამალული; ტექსტური-ინტენსიური: -9999px; ფონის: URL (radiobg.P Ng) ცენტრის ქვედა არ განმეორებითი; ) .რადიო-მაგრამ .ctrl- არჩევა: Hover (Cursor: Pointer; ფონის პოზიცია: ცენტრის ცენტრი;) .რადიო-მაგრამ : ბლოკი; სიგანე: 40px; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზედა: 0; overflow: დამალული; ტექსტური -19px; ფონის: url ("arrowbg.png") ; Z- ინდექსი: 3; outline: არა! მნიშვნელოვანია) #prewbutton (მარცხნივ: 10px;) # Nextbutton (მარჯვენა: 10px; ფონის: URL (arrowbg.png) მარჯვენა ცენტრი არ განმეორებით;) #PrewButton: Hover, # Nextbutton: Hover (Opacity: 1;)
სტილის სტილში სლაიდერი-გადატანა. პროპაშელი სიგანე – მაქსიმალური სიგრძე თქვენი სურათები.
სტილის სტილში #Slider (სიგანე: Calc (100% * 4);) და .Slide (სიგანე: Calc (100% / 4);) მიუთითეთ სურათების რაოდენობა თქვენს სლაიდერში. ჩვენი მაგალითია ისინი 4.
თუ ისრები წინსვლა / უკან თქვენი სლაიდერის ხილვადობა შეიძლება იყოს უხილავი და ისინი გამოჩნდებიან, როდესაც თქვენ hover. ამის გაკეთება პარამეტრებში prewbut. და nextbut., დააყენეთ opacity ქონების ღირებულება 0.
ახლა შექმნა და გახსნა ჩვენი ფაილი. slider.js.რომელშიც იქნება სლაიდერი კოდი. არ უნდა დაგვავიწყდეს, რომ დააკავშიროთ jQuery ბიბლიოთეკა.
$ (დოკუმენტი) .რღე \u003d 700; var timeview \u003d 5000; var radiobut \u003d true; var slidenum \u003d 1; var slidetime \u003d slideCount \u003d $ $ ("Slider.Slide"). სიგრძე; var animslide \u003d ფუნქცია (arrow) (SlideTime); თუ (arrow \u003d\u003d "შემდეგი") (თუ (slidenum \u003d\u003d slidecount) (slidenum \u003d 1;) სხვა (Slidenum \u003d 1;) else (slidenum ++) translatewidth \u003d - $ ("აქტიური slide") .ვიდი () * (Slidenum - 1); $ ("სლაიდერი"). CSS ("ტრანსფორმაცია": "თარგმნა (" + TranslateWid + "PX, 0)"));) სხვა შემთხვევაში, თუ (arrow \u003d\u003d "PREW") (თუ (Slidenum \u003d\u003d 1) (Slider \u003d slidecount;) სხვა (sliderum- \u003d 1) translatewidth \u003d - $ (აქტიური სლაიდ "). სიგანე () * (slidenum - 1); $ (" #Slider "). CSS ("Transform": "+" + Translatewidth + "PX, 0)"));) სხვა (slidenum \u003d arrow; translatewid \u003d - $ ("აქტიური სლაიდ"). სიგანე () * (Slidenum - 1); $ ("სლაიდერი"). CSS ("ტრანსფორმაცია": "თარგმნა (" TranslateWidth + "PX, 0)"));) $ ("CTRL-SELECT.ACTION") .REMOVECLASS (" აქტიური "); $ (Ctrl-Select"). Eq (Slidenum - 1) .დამატებითი ("აქტიური");) თუ (radiobut) (var $ linkarrow \u003d $ ("<>") .პრაციონალური (" # Active-Slide "); $ (" Nextbutton "). დააჭირეთ (ფუნქცია (); დაბრუნება ყალბი;) $ (" # Prewbutton "). დაწკაპეთ (ფუნქცია () (ანიმაცია (" PRUW "); დაბრუნება ცრუ;))) Var Adderspan \u003d" "$ (" Slide "). თითოეული (ფუნქცია (ინდექსი) (Adderspan + \u003d" "+ ინდექსი +""; }); $("
ფუნქციონირება ანიმაცია. იღებს სამი ტიპის ღირებულებებს: შემდეგი, PRUR, რიცხვითი მნიშვნელობა. მომდევნო პარამეტრი გარდაიქმნება შემდეგ სლაიდზე, PRUW- ი დაბრუნდება წინა, და რიცხვითი მნიშვნელობა არის რადიო სლაიდების ღილაკებით შერჩეული სლაიდი.
წარმოდგენილი სლაიდერი გამოყენებული სურათები ვებ რესურსების https://pixabay.com/.
თუ თქვენ უნდა დაამატოთ მაღალი ხარისხის jQuery- სლაიდერი თქვენს საიტზე, მაშინ ამ სტატიაში თქვენ იხილავთ აღწერილობა საჭირო plugins. მიუხედავად იმისა, რომ JQuery მნიშვნელოვნად გამარტივდა JavaScript- თან მუშაობას. ჩვენ ჯერ კიდევ გვჭირდება დანამატები ვებ დიზაინის შექმნის პროცესის დასაჩქარებლად.
ჩვენ შეგვიძლია შევქმნათ ზოგიერთი ამ plugins და შევქმნათ ახალი sliders, რომ ბევრად უფრო პასუხობს ჩვენი საიტის ამოცანებს.
სხვა sliders, უბრალოდ დაამატოთ სათაურები, სურათები და შეარჩიეთ ეფექტი შეცვლის სლაიდები, რომ მოდის სლაიდერი. ყველა ეს plugins თან ახლავს დეტალური დოკუმენტაციაასე რომ, ახალი ეფექტი ან ფუნქციები მათთვის არ იქნება ბევრი სირთულე. თქვენც კი შეიცვლება იწვევს მოვლენების მიხედვით, თუ თქვენ ხართ გამოცდილი jQuery პროგრამისტი.
ბოლო ტენდენციები, როგორიცაა ადაპტური დიზაინი, ძალიან მნიშვნელოვანია ვებ-პროექტებისთვის, მიუხედავად იმისა, განახორციელოთ თუ არა მოდული ან სკრიპტი. ყველა ეს ელემენტი თითოეულ ამ დანამატებს ძალიან მოქნილია. ყველაფერი, რაც 2014 წელს მოხდა, ამ სიაში შედის.
JQuery-sliders სურათები
JSSOR Responsive Slider.
ცოტა ხნის წინ, მე მოვედი ამ ფუნქციური jQuery-overcolder, და მე ვერ დაარწმუნებ პირველი, რათა ის copes მისი მუშაობა ძალიან კარგად. იგი შეიცავს შეუზღუდავი შესაძლებლობებს, რომლებიც შეიძლება გაფართოვდეს სლაიდერის ღია კოდექსის ხარჯზე:
- ადაპტური დიზაინი;
- 15-ზე მეტი პარამეტრები;
- სურათის ცვლის 15-ზე მეტი ეფექტი;
- სურათების გალერეა, კარუსელი, სრულ ეკრანზე ზომის მხარდაჭერა;
- ვერტიკალური rotator ბანერები, სლაიდების სია;
- ვიდეო მხარდაჭერა.
დემო | ძლეებ
PGWSLider - ადაპტური jQuery / zepto დაფუძნებული სლაიდერი
ამ მოდულის ერთადერთი ამოცანაა სურათების სლაიდების დემონსტრირება. ეს არის ძალიან კომპაქტური, რადგან ზომის jQuery ფაილი მხოლოდ 2.5 KB, რომელიც საშუალებას გაძლევთ ჩატვირთვა მართლაც სწრაფად:
- ადაპტური განლაგება;
- SEO ოპტიმიზაცია;
- სხვადასხვა ბრაუზერების მხარდაჭერა;
- მარტივი გამოსახულების გადასვლები;
- არქივის ზომა მხოლოდ 2.5 კბ.
დემო | ძლეებ
JQuery ვერტიკალური ამბები სლაიდერი
მოქნილი და სასარგებლო jQuery-Slider, რომელიც განკუთვნილია საინფორმაციო რესურსებისათვის პუბლიკაციების სიაში მარცხენა მხარეს და გამოსახულების დასკვნა მარჯვნივ:
- ადაპტური დიზაინი;
- ვერტიკალური სიახლეების გადართვის სვეტი;
- გაფართოებული სათაურები.
დემო | ძლეებ
Wallop Slider.
ეს სლაიდერი არ შეიცავს jQuery, მაგრამ მინდა წარმოგიდგინოთ, რადგან ეს არის ძალიან კომპაქტური და საშუალებას გაძლევთ მნიშვნელოვნად შეამციროთ გვერდის ჩამოტვირთვის დრო. ნება მომეცით ვიცი, თუ მოგწონს:
- ადაპტური განლაგება;
- მარტივი დიზაინი;
- სლაიდების შეცვლის სხვადასხვა ვარიანტები;
- მინიმალური JavaScript კოდი;
- ზომა მხოლოდ 3KB.
დემო | ძლეებ
ბინა სტილის Polaroid გალერეა
გალერეა, რომელიც გაფანტულია დოკუმენტების მაგიდაზე მოქნილი განლაგებით ლამაზი დიზაინი ბევრი თქვენგანი უნდა დაინტერესდეს. უფრო შესაფერისი ტაბლეტები და დიდი მონიტორები:
- ადაპტური სლაიდერი;
- ბინა დიზაინი;
- სლაიდების შემთხვევითი ცვლილება;
- სრული ხელმისაწვდომობა კოდის.
დემო | ძლეებ
A-Slider.
დემო | ძლეებ
HISLIDER - HTML5, JQuery და WordPress Slider Image
HiRlider გააცნო ახალი უფასო jQuery სლაიდერი მოდული, რომელთანაც შეგიძლიათ შექმნათ მრავალფეროვანი გალერეა სურათები ფანტასტიკური გადასვლები:
- ადაპტური სლაიდერი;
- არ საჭიროებს პროგრამირების ცოდნას;
- რამდენიმე საოცარი შაბლონები და ტყავი;
- ლამაზი გარდამავალი ეფექტები;
- სხვადასხვა პლატფორმების მხარდაჭერა;
- თავსებადობა WordPress, Joomla, Drupal;
- შინაარსის ჩვენება Განსხვავებული ტიპები: სურათები, YouTube ვიდეოები და Videa ვიდეო;
- მოქნილი გარემო;
- სასარგებლო დამატებითი ფუნქციები;
- ნაჩვენები შინაარსის შეუზღუდავი მოცულობა.
დემო | ჩამოტვირთვა
Wow slider.
Wow Slider არის ადაპტური jQueryსაოცარი სურათები საოცარი ვიზუალური ეფექტები (domino, ჩართოთ, ბუნდოვანი, გადატრიალება და ფლეშ, გამგზავრება, ბლაინდები) და პროფესიული თარგები.
Wow Slider მოდის ინსტალაციის ოსტატი, რომელიც საშუალებას გაძლევთ შექმნათ ფანტასტიკური sliders საკითხი წამში გარეშე უნდა გვესმოდეს კოდი და რედაქტირება სურათები. ასევე ხელმისაწვდომია დანამატების ვერსიის ჩამოტვირთვისთვის Joomla და WordPress:
- სრულად ადაპტირება;
- ყველა ბრაუზერის მხარდაჭერა და ყველა სახის მოწყობილობა;
- სენსორული მოწყობილობების მხარდაჭერა;
- მარტივი ინსტალაცია WordPress- ზე;
- მოქნილობა კონფიგურაციაში;
- SEO- ოპტიმიზირებულია.
დემო | ჩამოტვირთვა
Nivo Slider - უფასო jQuery-plugin
Nivo სლაიდერი ცნობილია მთელ მსოფლიოში, როგორც ყველაზე ლამაზი და ადვილად გამოსაყენებელი სურათი სლაიდერი. Nivo Slider მოდული უფასოა და გამოვიდა MIT ლიცენზიით:
- JQuery 1.7 და ზემოთ;
- ლამაზი გარდამავალი ეფექტები;
- მარტივი და მოქნილი კონფიგურაციაში;
- კომპაქტური და ადაპტირება;
- ღია კოდი;
- ძლიერი და მარტივი;
- რამდენიმე სხვადასხვა თარგები;
- ავტომატური გამოსახულება trimming.
დემო | ჩამოტვირთვა
მარტივი jquery სლაიდერი ტექნიკური დოკუმენტაცია
იდეა შთაგონებული Apple Sliders, რომელშიც რამდენიმე პატარა ელემენტს შეუძლია ფრენა სხვადასხვა ანიმაციური ეფექტები. დეველოპერები ცდილობდნენ ამ კონცეფციის გათვალისწინებას Მინიმალური მოთხოვნები შესაქმნელად მარტივი დიზაინი ონლაინ მაღაზია, რომელშიც "გამგზავრების" ელემენტები სხვადასხვა კატეგორიებია:
- ადაპტური განლაგება;
- მინიმალისტური დიზაინი;
- სლაიდების დაკარგვისა და ცვლაში სხვადასხვა ეფექტები.
დემო | ჩამოტვირთვა
სრული ზომის jQuery image სლაიდერი
ძალიან მარტივი სლაიდერი, რომელიც იკავებს გვერდის სიგანეს 100% -ს და მობილური მოწყობილობების ეკრანების ზომას. იგი მუშაობს CSS გადასვლები, და სურათები "fit" ერთად ცხოველები. წამყვანი შეიძლება შეიცვალოს ან წაიშალოს თუ არ გსურთ სურათის ბმული.
ინსტალაციისას, სლაიდერი 100% ეკრანზე ვითარდება. მას ასევე შეუძლია ავტომატურად შეამციროს სლაიდების ზომა:
- ადაპტური jQuery -slider;
- სრული ზომა;
- მინიმალისტური დიზაინი.
დემო | ჩამოტვირთვა
ელასტიური შინაარსის სლაიდერი +
ელასტიური შინაარსი Slidener ავტომატურად არეგულირებს სიგანე და სიმაღლე, რომელიც დამოკიდებულია მშობლის ელემენტის ზომაზე. ეს არის მარტივი jQuery სლაიდერი. იგი შედგება slide ზონაში ზემოთ, და სანავიგაციო tab პანელები ბოლოში. სლაიდერი არეგულირებს მის სიგანეს და სიმაღლეს მშობლის კონტეინერის ზომით.
პატარა ეკრანის ნახვისას დიაგონალზე, ნავიგაციის ჩანართები მცირე ხატებიდან გადაიქცევა:
- ადაპტური დიზაინი;
- გადახვევა მაუსის დაწკაპუნებით.
დემო | ჩამოტვირთვა
უფასო 3D დასტის სლაიდერი
ექსპერიმენტული სლაიდერი, 3D- ში გამოსახულებები. ორი stacks ჰგავს ქაღალდის stacks, საიდანაც scrolling გამოსახულება არის ნაჩვენები ცენტრში სლაიდერი:
- ადაპტური დიზაინი;
- Flip- ტრანსფორმაცია;
- 3D ეფექტები.
დემო | ჩამოტვირთვა
სრულ ეკრანზე slit slider საფუძველზე jQuery და CSS3 + სახელმძღვანელო
სახელმძღვანელოდან, თქვენ შეისწავლით თუ როგორ უნდა შეიქმნას სლაიდერი: იდეა არის "შემცირება" და აჩვენებს მიმდინარე სლაიდს ამ ფორმით, ხოლო გახსენით შემდეგი ან წინა გამოსახულება. გამოყენებით jQuery და CSS - ანიმაცია, ჩვენ შეგვიძლია შევქმნათ უნიკალური გარდამავალი ეფექტები:
- ადაპტური დიზაინი;
- გაყოფილი გარდამავალი;
- სრული ეკრანის სლაიდერი.
დემო | ჩამოტვირთვა
Unislider - ძალიან პატარა jQuery სლაიდერი
არ არის ზედმეტი bellows და მარკირება, ზომა არანაკლებ 3KB. გამოიყენეთ ნებისმიერი HTML კოდი თქვენი სლაიდებისთვის, გაფართოვდეს იგი cSS- ის გამოყენებით. . ყველა დაკავშირებული unslider მდებარეობს Github:
- სხვადასხვა ბრაუზერების მხარდაჭერა;
- კლავიატურის მხარდაჭერა;
- კორექტირება სიმაღლეზე;
- ადაპტური დიზაინი;
- სენსორული შეყვანის მხარდაჭერა.
დემო | ძლეებ
მინიმალური საპასუხო სლაიდები
მარტივი და კომპაქტური მოდული ( ზომა მხოლოდ 1 KB) ვინ ქმნის ადაპტური სლაიდერიკონტეინერის შიგნით ელემენტების გამოყენება. RespresiveLides.js მუშაობს ს დიდი რაოდენობა ბრაუზერები, მათ შორის ყველა ვერსიის IE6 და ზემოთ:
- სრულად ადაპტირება;
- ზომა 1 KB;
- CSS3 გადასვლები JavaScript- ის მეშვეობით გაშვების შესაძლებლობას;
- მარტივი მარკირება გამოყენებით აღნიშნული სია;
- გადასვლის ეფექტების კონფიგურაციის უნარი და ერთი სლაიდის ნახვის ხანგრძლივობა;
- მხარს უჭერს რამდენიმე სლაიდების შექმნას;
- ავტომატური და ხელის სენსორული.
დემო | ჩამოტვირთვა
კამერა - უფასო jQuery სლაიდერი
კამერა არის მოდული მრავალრიცხოვანი გარდამავალი ეფექტებით, ადაპტური განლაგება. Simple in setup, მხარდაჭერილი მობილური მოწყობილობები:
- სრულად ადაპტური დიზაინი;
- ხელმოწერები;
- ვიდეოს დამატება;
- 33 სხვადასხვა ფერის ხატები.
დემო | ჩამოტვირთვა
სლაიდები, ადაპტური jQuery მოდული
SlideSjs არის ადაპტური მოდული jQuery (1.7.1 და ზემოთ) მხარდაჭერა სენსორული მოწყობილობები და CSS3 გადასვლები. ექსპერიმენტი მასთან, სცადეთ მრავალჯერადი მზა მაგალითები, რაც დაგეხმარებათ გაერკვნენ, თუ როგორ უნდა დაამატოთ სლაიდები თქვენს პროექტში:
- ადაპტური დიზაინი;
- CSS3 -Productions;
- სენსორული მოწყობილობების მხარდაჭერა;
- მარტივი setup.
დემო | ძლეებ
BX jQuery სლაიდერი.
ეს არის უფასო ადაპტური jQuery სლაიდერი:
- სრულად ადაპტირებადი - არეგულირებს ნებისმიერ მოწყობილობას;
- ჰორიზონტალური, სლაიდების ვერტიკალური ცვლილება;
- სლაიდები შეიძლება შეიცავდეს სურათებს, ვიდეოს ან HTML- ს;
- სენსორული მოწყობილობების გაფართოებული მხარდაჭერა;
- გამოყენებით CSS- გარდაქმნას slide ანიმაცია ( აპარატურის აჩქარება);
- Callback API და სრულად საჯარო მეთოდები;
- მცირე ზომის ზომა;
- ადვილად განხორციელება.
დემო | ჩამოტვირთვა
FlexSlider 2.
საუკეთესო ადაპტური სლაიდერი. ახალი ვერსია დასრულდა სამუშაოს სიჩქარის გაზრდა, კომპაქტურობა.
დემო | ძლეებ
გალერეა - ადაპტური ფოტო გალერეა JavaScript- ზე
Galleria გამოიყენება მილიონობით საიტებზე, რათა შეიქმნას სურათების გალერეა მაღალი ხარისხის. მისი მუშაობის შესახებ დადებითი მიმოხილვების რაოდენობა უბრალოდ რულონებს:
- სრულად უფასოა;
- სრული ეკრანის მაყურებელი რეჟიმი;
- 100% ადაპტირება;
- არ არის საჭირო პროგრამირების გამოცდილება;
- მხარდაჭერა iPhone, iPad და სხვა სენსორული მოწყობილობები;
- Flickr, Vimeo, YouTube და ბევრად უფრო;
- რამდენიმე თემა.
დემო | ძლეებ
Blueberry - მარტივი ადაპტური jQuery გამოსახულება სლაიდერი
წარმოგიდგენთ სურათების jQuery-slider, დაწერილი სპეციალურად ადაპტაციური ვებ დიზაინი. Blueberry არის ექსპერიმენტული მოდული ღია გამოსახულება სლაიდერი, რომელიც დაწერილი სპეციალურად მუშაობა ადაპტაციური თარგები.
4 ნოემბერი, 2019 ჩანაწერი განახლდა
Yury გერმანული
Sloters on სუფთა CSS. + ბონუს სლაიდერი
CSS sliders აქვს გარკვეული უპირატესობა sliders on JavaScript. ერთ-ერთი ასეთი უპირატესობაა ჩამოტვირთვა სიჩქარე. არა მხოლოდ გამოსახულებები sliders გამოიყენება. დიდი ზომები (თუ არ არსებობს ოპტიმიზაცია სხვადასხვა ეკრანებზე), ის ასევე იხარჯება სკრიპტებზე გარკვეული დროის განმავლობაში. მაგრამ სტატიაში თქვენ ნახავთ მხოლოდ sliders on სუფთა CSS.
ეს არის ის, რაც მე აღმოვაჩინე საიტზე სლაიდერების საგანი:
1. CSS3 გამოსახულება სლაიდერი
სლაიდერი CSS, რომელიც იყენებს რადიო ღილაკს სლაიდების ნავიგაცია. ეს რადიო აუზები ქვეშ sliders. ასევე, რადიო აუზების გარდა, ნავიგაცია ხორციელდება მარცხენა და მარჯვენა შუტერის გამოყენებით. რა სურათის შენარჩუნება ახლა ნაჩვენებია - ფსევდო-სკოლები გამოიყენება: შემოწმებულია.
2. CSS3 მინიატურული სლაიდერი
განსხვავებით წარსულში სლაიდერი CSS, აქ ნაცვლად რადიო აუზების ქვედა არის გამოსახულება ყველა გამოსახულება, რომელიც ასევე მოსახერხებელია, როდესაც ქმნის გამოსახულება გალერეა. სურათები შეიცვალა სახის ეფექტით: შეუფერხებლად გაქრება.
3. გალერეა CSS- ზე
მაგრამ ეს სლაიდერი CSS არის სრულყოფილი გაყიდვის გვერდებზე. როგორც წესი, ბევრი ვებ დეველოპერები განვითარების სესხების (გაყიდვის გვერდებზე) მოათავსეთ სლაიდერი ძალიან დასაწყისში ისე, რომ პირველ ეკრანზე (გარეშე სენსორული), სტუმარი დაუყოვნებლივ დაინახა ყველა სარგებელი, რომ ეს არის ამ გვერდზე. გარდა ამისა, ეს სლაიდერი ადაპტირებადია, რომელიც ასევე სასიამოვნოა.
4. სლაიდერი CSS- ზე ბმულების გარეშე
დაუყოვნებლივ მინდა შეამჩნია, რომ ეს სლაიდერი არ იყენებს ბმულებს! ჩვეულებრივ, ძირითადი გამოსახულების გარდა (სლაიდი), კიდევ 2 სლაიდები ჩანს. ისინი მთავარია. სლაიდების შეცვლა ხდება ლამაზი რეჟიმით: პირველი ორი სლაიდები გადავიდა და სლაიდი ხდება ცენტრი, რომელიც მაშინ გახდება მთავარი. შემდეგ სლაიდი იზრდება და განთავსდება დანარჩენი.
5. ადაპტური სლაიდერი CSS3- ზე
კიდევ ერთი ადაპტური სლაიდერი, რომლის კონტროლიც რადიოკოპტერებს ეფუძნება. რომ ნახოთ, თუ როგორ ეს სლაიდერი შეხედავს სხვადასხვა მოწყობილობებიah - თქვენ შეგიძლიათ დამოუკიდებლად შეცვალონ ბრაუზერის ფანჯარა, ან სლაიდერის გვერდზე არსებობს სხვადასხვა მოწყობილობების სპეციალური ხატები, დაჭერით, რომელზეც ნახავთ თქვენს კომპიუტერში, ტაბლეტზე ან სმარტფონზე.
*** ბონუს სლაიდერი ***
გარდა ამისა, ყველა sliders, რომლებიც წარმოდგენილია ზემოთ, მინდა, გთხოვთ, თქვენ სხვა. ეს სლაიდერი შესანიშნავია გამოსახულების გალერეის შესაქმნელად. სიტყვები არ ახსენით, რას აკეთებს, ასე რომ, ყველაფერი უკეთესია, რომ ყველაფერი ვიდეოში უყუროთ:
პროდუქცია
დახმარებით sliders, შეგიძლიათ ლამაზად დიზაინი გამოსახულება გალერეები მიერ მათ უფრო კომპაქტურად, ჩადეთ სლაიდერი პირველ ეკრანზე (ნაწილი გვერდი, რომელიც ჩანს სენსორული გარეშე scrolling) გაყიდვის გვერდზე დაუყოვნებლივ აჩვენებს სტუმრებს მთავარი სარგებელი, რომ იგი მიიღებს. თქვენ კვლავ შეგიძლიათ იპოვოთ ბევრი გზა, სადაც შეგიძლიათ გამოიყენოთ sliders, მაგრამ ერთი რამ არის ნათელი ზუსტად - ისინი სასარგებლოა სათანადო გამოყენება.
სტატიაში განხილული პუნქტები.
Გამარჯობა ყველას. ძალიან მაგარი სლაიდერი მინდა წარმოგიდგინოთ თქვენი ყურადღება. Ooo ... მე ვხედავ თქვენ მთლიანად დაავიწყდა ჩემზე. დიახ, დიახ, მე უკვე წავიდა, ალბათ ექვსი თვის ან წელიწადში და მე აბსოლუტურად არ ვიცი, როგორ უნდა გააკეთოს თავი სტატიაში ყოველ დღე სტატიაში (თუმცა სრულიად რეალური). კარგად, okay, არა ახლა სიტყვა. სლაიდერი უზრუნველყოფილია Tympanus codrops და მუშაობს HTML5, CSS3 და tweenmax.js.
სლაიდერი არ არის დაწნული მარცხნივ მარჯვნივ და არა ზემოდან ქვედა, მაგრამ დიაგონალზე. ნავიგაციის ისრები მდებარეობს ზედა მარცხენა კუთხეში და ქვედა მარჯვენა. ასევე, ნავიგაცია ხორციელდება prevni დაჭერით მარჯვენა და მარცხენა. ყველა ანიმაცია ძალიან გლუვი და კარგად მუშაობს თანამედროვე ბრაუზერები. ყველას ცალკე ელემენტი სლაიდერს აქვს საკუთარი გვერდი, რომელიც იხსნება გადახედვისას. გვერდზე აქვს ფოტო, სათაური და ტექსტი.
სლაიდერი შესანიშნავია გალერეის, მხატვრის პორტფელის, ფოტოგრაფი, მოქანდაკე, მოკლედ, ნებისმიერ პირს, რომელიც შემოქმედებით საქმიანობაში არის დაკავებული და მას აქვს სამუშაოების ჩვენება. გალერეა მუზეუმის ადგილზე, გამოფენა კარგად გამოიყურება.
გალერეის დამაკავშირებელი
შეაერთეთ გალერეა რთული არ იქნება
ჩამოტვირთეთ ფაილები
პირველი თქვენ უბრალოდ უნდა ჩამოტვირთოთ წყაროები ჩემი საიტი პირდაპირი ბმული. არქივიდან თქვენ უნდა დაასხით IMG, CSS და JS საქაღალდის საიტი
დაკავშირება CSS და JS ფაილები
შემდეგ აკავშირებს სკრიპტებს და სტილებს. Styles უკავშირდება დასძინა tag
შემდეგი კოდი
და სკრიპტები ქვემოთ გვერდზე დახურვის tag
