Vlasny სლაიდერი jQuery-ზე. მარტივი ადაპტაციური შეხებით jQuery სლაიდერი ლამაზი სლაიდერები jquery-ზე

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

GitHub-ზე მიმდინარეობს სლაიდერის პროექტი სახელწოდებით chiefSlider. რაც შეიძლება მალე შეგიძლიათ ნიოგოში წასვლა.

სლაიდერი ერთი აქტიური სლაიდით (ლუპის გარეშე):

სლაიდერი სამი აქტიური სლაიდით (ლუპის გარეშე):

მაგალითი, რომელიც გვიჩვენებს, თუ როგორ შეგიძლიათ დააყენოთ სლაიდერი მბრუნავი სტატიებისთვის:

მოდით ჩამოვთვალოთ ამ სლაიდერის ძირითადი უპირატესობები:

• უპირველეს ყოვლისა, ის არ ქმნის ელემენტების (ერთეულების) კლონებს მარყუჟის ორგანიზებისთვის, როგორც ეს არის დანერგილი, მაგალითად, OwlCarousel და Slick დანამატებში;
• წინააღმდეგ შემთხვევაში, ის არ შეინახება jQuery ბიბლიოთეკაში; საუბარია არა მხოლოდ დამატებითი სარგებლის შეგროვებაზე, არამედ მარტივის გაცემაზე;
• მესამე, პრაქტიკულია არ მოხდეს აუცილებელი ცვლილებები დოკუმენტის DOM-ში; ერთადერთი, რაც უნდა გააკეთოთ, არის სლაიდერის ელემენტების CSS მნიშვნელობების დამატება და შეცვლა მათი გარდაქმნით;
• მეოთხე, თქვენ არ შეგიძლიათ ფუნქციების მინიმალური ნაკრები; დამატებითი ფუნქციონალობა შეიძლება ცალკე დაემატოს საჭიროებისამებრ;
• სხვა სიტყვებით რომ ვთქვათ, ეს არის ადაპტური, მაშინ. შეგიძლიათ ვიკორისტი ნებისმიერ საიტზე; სლაიდერის ადაპტირება მორგებულია დამატებითი CSS-ის გამოყენებით;
• ძირითადად, რიგი აქტიური ელემენტების კონფიგურაცია ხდება დამატებითი CSS-ის გამოყენებით; ეს ნიშნავს, რომ მისი გამოყენება შეგიძლიათ კარუსელის შესაქმნელად ერთი აქტიური სლაიდით ან სხვა ნომრით.

სლაიდერის დაყენება ხდება 3 ნაბიჯით:

• დაამატეთ CSS სლაიდერი chiefSlider გვერდზე ან CSS ფაილი, გვერდებზე კავშირები;
• მოათავსეთ სლაიდერის HTML კოდი სასურველ ადგილას გვერდითა ზოლზე;
• ჩადეთ JavaScript კოდი გვერდზე ან js ფაილზე, დააკავშირეთ გვერდით.

CSS და JavaScript კოდი უნდა იყოს მინიმუმამდე დაყვანილი, რათა უზრუნველყოს უფრო მიმზიდველი გვერდები.

chiefSlider სლაიდერი იქმნება HTML კოდის, CSS და JavaScript-ის გამოყენებით (jQuery-ის გარეშე).

HTML კოდი chiefSlider სლაიდერისთვის:

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

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

დანარჩენი ორი ელემენტი (slider__control) არის ვიზუალურად ღილაკები. ეს დაგეხმარებათ სლაიდზე ნავიგაციაში. წინა და წინა ელემენტებზე გადასვლა.

CSS კოდი chiefSlider სლაიდერისთვის:

/* MAIN STYLES */ .slider ( პოზიცია: ფარდობითი; გადინება: დამალული; ) .slider__wrapper ( ჩვენება: flex; 50%; /* მიუთითებს აქტიური სლაიდების რაოდენობაზე (ამ კატეგორიაში 2 */ მაქსიმალური სიგანე: 50%; /* ნიშნავს აქტიური სლაიდების რაოდენობას (ამ კატეგორიაში არის 2 */ ) /* STYLES FOR BACK AND FORWARD BUTTONS * / .slider__control ( პოზიცია: აბსოლუტური; ჩვენება: არცერთი; ზედა: 50%; ტრანსფორმაცია: translateY(-50 %); ერთეულების გასწორება: ცენტრი; დასაბუთება-შიგთავსი: ცენტრი; ტექსტის გასწორება: ცენტრში; სიგანე: 40 პიქსელი; /* ღილაკის სიგანე */ სიმაღლე: 50 პიქსელი; /* ღილაკის სიმაღლე */ გაუმჭვირვალობა: .5; /* სიცხადე * / ფონი: #000; /* ფონის ფერი */ . slider__control:focus (ტექსტის დეკორაცია: არცერთი; მონახაზი: 0; გამჭვირვალობა: .9; /* სიცხადე */) .slider__control_left (მარცხნივ: 0;) .slider__control_right (მარჯვნივ : 0 ; ) .slider__control::before ( content: " "; ჩვენება: inline-block; სიგანე: 20px; /* ხატულა (ისარი) სიგანე */ სიმაღლე: 20px; /* ხატულა (ისარი) სიმაღლე */ ფონი: გამჭვირვალე არა- განმეორებითი ცენტრის ცენტრი; ფონის ზომა: 100%; 100%; ) .slider__control_left:: ადრე ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http:/ /www .w3.org/2000/svg" fill="%23fff viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5 -1.5 -1.5z"/%3E%3C/svg%3E"); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

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

CSS კოდი, რომელიც მიუთითებს აქტიური ელემენტების რაოდენობაზე:

/* მიუთითებს აქტიური სლაიდების რაოდენობაზე (ამ პარამეტრს აქვს 2) */ flex: 0 0 50%; მაქსიმალური სიგანე: 50%;

ეს კოდი აყენებს სლაიდერს რამდენიმე აქტიურ ელემენტზე, რაც 2-ზე მეტია.

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

/* მიუთითებს აქტიური სლაიდების რაოდენობაზე (ამ პარამეტრს აქვს 1) */ flex: 0 0 100%; მაქსიმალური სიგანე: 100%;

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

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

Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )

JavaScript კოდი chiefSlider სლაიდერისთვის:

"მკაცრი გამოყენება"; var multiItemSlider = (ფუნქცია () ( დაბრუნების ფუნქცია (სელექტორი) ( var _mainElement = document.querySelector(selector), // ბლოკის მთავარი ელემენტი _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider- item_s = _mainElement.querySelectorAll(". slider__item"), // ელემენტები (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // ელემენტები _sliderControlLeft = _mainElement.queryTontrol"_sliderFelement.querySelector_s". = _mainElement.querySelector(".slider__control_right"), // ღილაკი "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // wrap width _itemWid. dth), // ერთი ელემენტის სიგანე _positionLeftItem = 0 მარცხენა პოზიციის აქტიური ელემენტი _transform = 0, // ტრანსფორმაციის მნიშვნელობები. მასივის თავზე _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 ))); )); var პოზიცია = (getMin: 0, getMax: _items.length - 1, ) var _transformItem = ფუნქცია (მიმართულება) (if (მიმართულება === "მარჯვნივ") (if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) ).getMax) ( დაბრუნება; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) (_sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains_W)_მმართველობის_მგ. (_sliderCon trollRight .classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (მიმართულება === "მარცხნივ") (if (_ ; ) return (element.contains(elemFromPoint(rect.left, rect. ზედა )) || ელემენტი.შეიცავს(elemFromPoint(rect.მარჯვნივ, სწორ.ზემო)) ||element.contains(elemFromPoint(rect.მარჯვნივ, მართებული. ქვედა)) ||element.contains(elemFromPoint(rect.მარცხნივ, სწორ. ქვედა)));

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

Var _transformItem = ფუნქცია (მიმართულება) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

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

დანერგილია ზომის და _states მასივის დამატებითი დახმარებით. მასივი გამოიყენება გამოსათვლელად. გთხოვთ, ნუ დააყოვნებთ სლაიდერის ხელახლა ინიციალიზაციას, თუ საჭირო არ არის.

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

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

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

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

Nivo Slider არის კარგი ძველი, კარგად ცნობილი ყველასთვის, ვინც იცის, ერთ-ერთი ყველაზე ლამაზი და მარტივი გამოსახულების სლაიდერი ისტორიაში. JQuery Nivo Slider მოდული არის უფასო გამოყენებისა და შემდგომი განვითარებისთვის, რომელიც გაფართოვდა MIT ლიცენზიით. ეს ასევე შესანიშნავი დანამატია WordPress-ისთვის, მაგრამ სამწუხაროდ ის ასევე ფასიანია და ერთი ლიცენზიისთვის 29 დოლარი ღირს. საუკეთესო რამ არის უბრალოდ დაუთმოთ ცოტა დრო WP ფაილებს და დაურთოთ Nivo Slider მოდულის უფასო jQuery ვერსია თქვენს ბლოგზე, რათა მიიღოთ საკმარისი ინფორმაცია.
რაც შეეხება ფუნქციონირებას, ყველაფერი რიგზეა. სამუშაოსთვის ჩვენ ვიყენებთ jQuery v1.7+ ბიბლიოთეკას, გადასვლის შესანიშნავ ეფექტებს, მარტივ და მარტივ კორექტირებას, ადაპტირებულ განლაგებას, გამოსახულების ავტომატურ ამოჭრას და ბევრ სხვას.

სლაიდერის იდეა შთაგონებულია საცალო ვაჭრობის მიერ, რომლებიც კარგად იცნობენ Apple-ის პროდუქტების წარდგენის ნაცნობ სტილს, სადაც რამდენიმე პატარა ობიექტი იცვლება არჩეულ კატეგორიაზე დაწკაპუნებისას მარტივი ანიმაციური ეფექტით. Codrops წარმოგიდგენთ ანგარიშს, თუ როგორ უნდა შექმნათ სლაიდერი, HTML განლაგების ახალი განლაგება, CSS წესების ნაკრები და დანამატი, რომელიც გარდაქმნის jQuery-ს, ასევე მორგებული სლაიდერის მშვენიერი ცოცხალი მაგალითი.

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

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

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

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

სახელი თავისთავად გასაგებია, ის ალბათ ერთ-ერთი ყველაზე მსუბუქი და მინიმალისტური jQuery გამოსახულების სლაიდერია (1kb მოდული). ResponsiveSlides.js არის მაგარი JQuery მოდული, რომელიც ქმნის სლაიდების ჩვენებებს, ამომხტარ ელემენტებს კონტეინერის შუაში. მუშაობს ბრაუზერების ფართო სპექტრთან, IE-ს ყველა ვერსიის ჩათვლით - პროგრესის ცნობილი გალა IE6-ში და მის ფარგლებს გარეთ. რობოტი იყენებს CSS3 გადასვლებს JavaScript-თან ერთად, მხოლოდ დასარწმუნებლად. მარტივად დაალაგეთ შეუკვეთავი სია, დაარეგულირეთ გადასვლები და დროის ინტერვალები, ავტომატურად და ხელით შეცვალეთ სლაიდები და დაუჭირეთ ერთდროულად რამდენიმე სლაიდ შოუს მხარდაჭერა. ღერძი არის შვიდური "მალიუკის" ღერძი.

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

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

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

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

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

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

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

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

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

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

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

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

პატივისცემით ანდრეი

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

შეხედეთ 20 jQuery სლაიდერს Envato Market-ზე და დაინახავთ, რომ არის სლაიდერები, რომლებიც უფრო მეტია, ვიდრე უბრალოდ სურათების ბლოკი, რომლებიც შეუფერხებლად იცვლება.

უაღრესად ადაპტირებადი სლაიდერი, ასევე მეგობრული სენსორული ეკრანებისთვის, ბევრად მეტს ნიშნავს, ვიდრე ადრე. RoyalSlider მოიცავს რამდენიმე საინტერესო მახასიათებელს: ადაპტირება და მუშაობა სენსორული ეკრანებით. კარგი არჩევანია, რადგან გალერეა დაწერილია HTML5 და CSS3.

ფუნქციების სია:

JavaScript. Სწრაფი დაწყება

SEO ოპტიმიზაცია

კორექტირების მაღალი დონე

10-ზე მეტი კობის შაბლონი

Є სარეზერვო CSS3 გადასვლებისთვის

ჩემი აზრით, ყველაზე მაგარი ფუნქციაა „მოდულური სკრიპტის არქიტექტურა“, რომელიც საშუალებას გაძლევთ ჩართოთ არასაჭირო მეტყველება ძირითადი JS ფაილიდან, რითაც შეცვალოთ შეყვანა. RoyalSlider, სენსორული სურათების გალერეა JQuery-ზე – სანდო JavaScript სლაიდერი, რომელსაც შეუძლია გააუმჯობესოს ინსტრუმენტების ნაკრები ნებისმიერი დეველოპერისთვის.

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

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

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

შეტყობინებებით ბურთებისა და სლაიდების რაოდენობა შეზღუდული არ არის

მზადაა გამოსაყენებლად, სტილები სიღრმისეულად დასაზუსტებლად

და კიდევ ბევრი

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

სახელის მიღმა „LayerSlider ადაპტური jQuery სლაიდერის დანამატი“ შეუძლებელია ამ სლაიდერის სწორად შეფასება.
200+ 2D და 3D გადასვლები სლაიდებს შორის, რათა ვინმეს თავი მოაბრუნოს.

რამდენიმე საოცარი ფუნქცია:

13 სკინი და 3 ტიპის მენიუ

სლაიდერის თავზე გაყინული სურათის განთავსების შესაძლებლობა

І JQuery სარეზერვო

და კიდევ ბევრი

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

jQuery Banner Rotator / Slideshow - დაამატეთ მარტივი სლაიდერი ძირითადი ფუნქციების შეწირვის გარეშე.

შესაძლებლობა:

ხელსაწყოების ტიპები, ტექსტის ჩანართები და ა.შ.

წინა ხედი და კომპონენტების განხილვის სხვადასხვა ვარიანტები

ტაიმერი ჩამკეტით ერთი სლაიდერით ან ყველასთვის

მრავალჯერადი გადასვლები ყველა სლაიდისთვის ან მრავალჯერადი გადასვლები კანის გადასვლებისთვის

jQuery Banner Rotator / Slideshow, სხვა jQuery სლაიდერების შესაბამისად, აქვს მხოლოდ ძირითადი შესაძლებლობები, მაგრამ ამის დავიწყება ადვილი არ არის.

ნებისმიერ სლაიდერს, რომელიც შუაში ჩნდება, აქვს თავისი უნიკალური ავზი და აწყდება რაიმე პრობლემას მის გალუზასთან დაკავშირებით. Დაიკიდე. All In One Slider შეიძლება ეწოდოს "all inclusive".

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

ბანერის მბრუნავი

ბანერი წინასწარი გადახედვით

ბანერი დასაკრავი სიით

შინაარსის სლაიდერი

კარუსელი

ყველა ტიპის სლაიდერი უზრუნველყოფს ფუნქციონირების უმეტეს ნაწილს, მაგრამ არა ყველაფერს, რაც მოითხოვს jQuery სლაიდერებს. არის All In One Slider თქვენი ყოვლისმომცველი?

თუ თქვენი სლაიდერი არ პასუხობს და არ უჭერს მხარს სენსორულ ეკრანებს, მაშინ არასწორი სლაიდერი გაქვთ. UnoSlider სწორია.

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

თემის მხარდაჭერა

12 მზა თემა

40 გადასვლა

IE6+ მხარდაჭერა

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

თქვენ ამბობთ: „ერთი jQuery სლაიდერი ყველაფრის რედაქტირებისთვის“? სცადეთ Master Slider – JQuery სენსორული სლაიდერი ეკრანის სხვადასხვა ზომისთვის.

თუ სწორი დიზაინი აკლია, ეს ასლი ერთ-ერთი საუკეთესოა:

25-ზე მეტი შაბლონი

გადადით ტექნიკის სიჩქარეზე

მხარდაჭერა შეხებით და გადაფურცლით

და კიდევ ბევრი

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

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

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

SEO ოპტიმიზაცია

უფრო ჭკვიანი ავტომატური შექმნა

CSS3 გადადით ტექნიკის მალსახმობზე

მორგებული ინტერფეისი და 4 სკინი Photoshop-ისთვის

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

jQuery სლაიდერები შეიძლება გამოყენებულ იქნას სხვადასხვა ვებსაიტებზე. ისინი ასევე შეიძლება სასარგებლო იყოს ვებ დანამატებისთვის. Advanced Slider გაძლევთ საშუალებას შექმნათ ყველაფერი.

HTML ან XML განლაგებით, ჩასმული სლაიდერი უმკლავდება გარდაუვალ მიზანს:

ანიმაციური ბურთები და ჭკვიანი ვიდეო

100+ გადასვლები და 150+ ავტორიტეტები, რომლებიც რეგულირების პროცესშია

მოყვება 15 სკინი სლაიდერისთვის, 7 სკინი გადახვევის ზოლისთვის და ლაითბოქსის მხარდაჭერა

კლავიატურის ნავიგაცია, წერტილების მხარდაჭერა და პერსონალიზაცია

და კიდევ ბევრი

ამასთან, Advanced Slider-ის უდიდესი მახასიათებელია jQuery XML Slider API, რაც სლაიდერს იდეალურ ვარიანტად აქცევს თქვენი ვებ პროგრამისთვის.

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

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

CSS3 გადასვლა ბურთებს შორის

ანიმაციის დასრულების პარამეტრი ბურთებისთვის

ფიქსირებული სიგანის პარამეტრები, სრული ეკრანი და სრული სიგანე

ანიმაციური ტექსტი HTML და CSS ფორმატებში

სლაიდერების უმეტესობა ცდილობს მეტი ეფექტების ჩართვას და jQuery Slider Zoom In/Out Effect Fully Responsive აქვს მხოლოდ კენ ბერნსის ეფექტი, მაგრამ უკეთესი განხორციელება.

კარგად ცნობილი Advanced Slider - jQuery XML Slider-ის მსგავსად, jQuery Carousel Evolution-ს აქვს საკუთარი API, რომლის მორგებაც შესაძლებელია ფუნქციონირების გასაუმჯობესებლად ან სლაიდერის სხვა პროექტში ინტეგრირებისთვის.

JavaScript. Სწრაფი დაწყება

ისწავლეთ JavaScript-ის საფუძვლები პრაქტიკულ აპლიკაციაში ვებ აპლიკაციის შესაქმნელად

სურათებით, HTML მარკირებით, YouTube და Vimeo ვიდეოებით ასევე შეგიძლიათ ნახოთ:

SEO ოპტიმიზაცია

კარუსელის 9 სტილი

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

გამოსახულების ზომის რეგულირება შესაძლებელია როგორც წინა, ასევე უკანა

jQuery Carousel Evolution – მარტივი კარუსელი შეუზღუდავი არჩევანის ვარიანტებით.

Sexy Slider აღარ არის ისეთი სექსუალური, როგორც ადრე იყო. თუმცა, თავისი საუკუნის განმავლობაში, სლაიდერმა დაიმსახურა მისი ნდობა.

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

სლაიდების ავტომატური პროგრამირება

წარწერები სურათის წინ

სლაიდების უწყვეტი შექმნა

6 გარდამავალი ეფექტი

Sexy Slider უზრუნველყოფს, რომ განბლოკოთ მთელი თქვენი პოტენციალი.

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

jQuery Image & Content Scroller w/ Lightbox მხარს უჭერს კლავიატურის და მაუსის ბორბლის შეყვანას, ასევე სხვა ფუნქციებს:

ჰორიზონტალური და ვერტიკალური ორიენტაცია

ტექსტური ხელმოწერები შუა ან სლაიდერის ზარებში

ერთდროულად ხილული სლაიდების რაოდენობის დაყენების შესაძლებლობა

ჩაშენებული სურათები, Flash, iframe, Ajax და ონლაინ შინაარსი

სლაიდერს ასევე აქვს ლაითბოქსი. jQuery Image & Content Scroller-ისთვის ლაითბოქსით, თქვენ არ შეგიძლიათ თავად სლაიდერის გაშვება, არამედ ლაითბოქსის გაშვებაც.

jQuery სლაიდერების უმეტესობას აქვს საკუთარი დიზაინი. თქვენ შეგიძლიათ დააკონფიგურიროთ ის თქვენთვის, მაგრამ ზოგჯერ გსურთ, რომ ყველაფერი იყოს სლაიდერის შუაში. ჭეშმარიტად, მე ვაცნობ ჩემს თავს Translucent-ს.

სლაიდერს აქვს ბევრი წინასწარ დაყენება. შესაძლოა, თქვენ უბრალოდ უნდა დააყენოთ სიმღერები და ეს არის ის. შესაძლებლობა:

6 განსხვავებული სტილი

4 გადასვლის ეფექტი

2 გადაფურცლეთ

ღილაკების და წარწერების კონფიგურაცია

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

გსურთ შექმნათ სრულეკრანიანი ვებსაიტი, რომელიც შედგება სლაიდებისგან? მაშინ დაგჭირდებათ FSS.

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

AJAX მხარდაჭერა

გადახვევის პანელი

ღრმა დაკავშირების ტექნოლოგიის მხარდაჭერა

2 განსხვავებული გადასვლის ეფექტი

ასევე, გამოიყენეთ 11-გვერდიანი სახელმძღვანელო კლავიატურის მხარდასაჭერად. მტრის სწორი ვებსაიტის დაცვა არის FSS vaga, 5Kb-ზე ნაკლები.

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

ამ სილამაზეს CSS3 ანიმაციით ასევე შეუძლია უზრუნველყოს ფუნქციების ფართო სპექტრი:

ჰორიზონტალური და ვერტიკალური აკორდეონი

სემანტიკური HTML5 და SEO ოპტიმიზაცია

წერტილების, კლავიატურების და WAI-ARIA-ს მხარდაჭერა

10-ზე მეტი სკინი და 6 განლაგება

და კიდევ ბევრი

Zozo Accordion-ს აქვს უფასო მხარდაჭერა და მუდმივი განახლებები, ისევე როგორც ყველა ფუნქცია, რომელიც გსურთ JQuery აკორდეონში.

jQuery Responsive OneByOne Slider Plugin უფრო მარტივ ანიმაციას ჰგავს, ვიდრე სლაიდერს. იმის ნაცვლად, რომ აჩვენოს თითო სლაიდი, ეს მაგალითი ავსებს ეკრანს სლაიდებით, თითო სლაიდით, სანამ ტერიტორია არ ამოიწურება და შემდეგ გადავა შემდეგ სლაიდზე.

CSS3 ანიმაცია აღჭურვილია Animate.css-ით, ის მარტივია, შეიძლება შედგებოდეს რამდენიმე ბურთისგან და თავსებადია მობილურ მოწყობილობებთან. ფუნქციები:

ასევე არის ნავიგაციის ვარიანტი გადათრევისა და ჩამოშვების გამოყენებით. jQuery Responsive OneByOne Slider Plugin დაფუძნებულია Twitter Bootstrap კარუსელზე.

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

თუ არ გსიამოვნებთ სამი სტილის ვარიანტი, შეგიძლიათ თავად წარადგინოთ HTML და CSS. შესაძლებლობა:

ნავიგაცია კლავიატურიდან

ეფექტებისა და ღილაკების მარტივად მორგება

პროგრესული შემცირების ტექნიკა - მუშაობს JavaScript-ის გარეშე

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

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

ქუდის ქვეშ ნახავთ რამდენიმე ვარიანტს:

კლავიატურის მხარდაჭერა, დათვი და ტორკანი

CSS3 გადადით ტექნიკის მალსახმობზე

წმინდა მოქმედი განლაგება და SEO ოპტიმიზაცია

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

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

Parallax Slider მუშაობს jQuery Responsive OneByOne Slider Plugin-ის მსგავსად და საშუალებას გაძლევთ ანიმაციური კანი ერთი სლაიდის შუაში. შეგიძლიათ ყველა ან მხოლოდ ერთი სლაიდის ანიმაცია, პარალაქსის ანიმაციის დამატება.

კომპლექტში შედის 4 სხვადასხვა ტიპის სლაიდერი, ყველა პარალაქსის ეფექტით. სხვა jQuery სლაიდერების მსგავსად, აქ:

ახალი განწყობა

მხარი დაუჭირეთ თორკანს

სრულად ადაპტირებული, ბურთების შეუზღუდავი რაოდენობა

ავტომატური პროგრამირება, ციკლი, სიმაღლისა და სიგანის რეგულირება, ასევე ტაიმერი

ანიმაციური ბუშტები - არა მხოლოდ ტექსტი, არამედ სურათები. თქვენ ასევე შეგიძლიათ დაამატოთ YouTube, Vimeo და HTML5 ვიდეო. Parallax Slider არის კიდევ ერთი კარგი მაგალითი იმისა, თუ როგორ შეიძლება შეიქმნას Flash ეფექტები, ვიდრე თავად Flash, რომელიც ასევე მხარდაჭერილია ყველა მოწყობილობაზე.

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

თუ არ მოგწონთ სლაიდერი ამ სიაში, ყოველთვის შეგიძლიათ გამოიყენოთ jQuery Code Tutorial Envato-ზე, რათა შექმნათ რაღაც სრულიად ახალი და უნიკალური.

კარგად, გადახედეთ სხვა სლაიდერებს Envato Market-ზე - არჩევანის გაკეთება ბევრია. რომელია თქვენი საყვარელი JQuery სლაიდერი და რატომ?

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

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

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

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


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


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

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

ახლა დავწეროთ! უპირველეს ყოვლისა, მოდით გავხსნათ ჩვენი ინდექსის ფაილი და ჩავწეროთ იქ საჭირო ნიშნები:

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

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

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

ხედვის პორტის ელემენტი, როგორც უკვე აღვნიშნეთ, იკავებს ჩვენი block-for-slider-ის მთელ სიგანეს, რომელსაც აქვს overflow:hidden ძალა, რაც საშუალებას გვაძლევს დავიჭიროთ ჩვენი გამოსახულების ხაზი ისე, რომ ის გასცდეს ხედვის ფარგლებს.


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

მოდით გადავიდეთ slidewrapper-ზე, რატომ პოზიცია:ნათესავი და არა აბსოლუტური? ეს მარტივია, რადგან... თუ სხვა ვარიანტს ავირჩევთ, მაშინ power viewport overflow: hidden ჩვენ აბსოლუტურად არაფერს მივიღებთ, რადგან თავად ხედის პორტი არ არის მორგებული სლაიდების სახვევის სიმაღლეზე, ამიტომ დავაყენეთ სიმაღლეზე:0. რატომ არის სიგანე ასე მნიშვნელოვანი და რატომ ვაყენებთ მას ყოველთვის? მარჯვნივ, ჩვენს სლაიდებს ექნებათ ხედის 100%-ის ტოლი სიგანე, ხოლო ხაზის გასწვრივ რომ განვათავსოთ, ჩვენ გვჭირდება ადგილი, სადაც ისინი დადგებიან, ასე რომ, სლაიდების სახვევის სიგანე უნდა იყოს 100%-ის ტოლი. ხედის სიგანე, გამრავლებული ზომაზე არის სლაიდები (ჩემი არჩევანია 4). არის განსხვავება გარდამავალსა და გადასვლის-დროის ფუნქციას შორის, მაშინ 1s ნიშნავს, რომ სლაიდების პოზიციის შეცვლას დასჭირდება 1 წამი და ჩვენ ფრთხილად ვიქნებით, ხოლო ease-in-out არის ანიმაციის ტიპი, რომელშიც დაუყოვნებლივ გადახვალთ. მაგრამ, დააჩქარეთ შუამდე და შემდეგ ისევ იძინებს, აქ შეგიძლიათ დააყენოთ მნიშვნელობა ავტორიტეტებზე.

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

შემდეგი, ჩვენ სლაიდებს დავხატავთ სტილში, მათი სიგანე უნდა იყოს ხედის სიგანის ტოლი, რადგან იმის გამო, რომ slidewrapper-ის სიგანე იგივეა, რაც ხედის სიგანე გამრავლებული სლაიდების რაოდენობაზე, შემდეგ კვლავ რომ მივიღოთ ხედის სიგანე, გვჭირდება სლაიდების გადახვევის სიგანის 100% გაყოფილი სლაიდების რაოდენობაზე (ჩემს შემთხვევაში , ისევ ისევ, 4-ზე). ამის შემდეგ, მოდით გადავაქციოთ ისინი პატარა ელემენტებად დამატებითი ეკრანის გამოყენებით: inline და დავაყენოთ ნაკადი ბოროტების გარშემო, დავამატოთ float:left . სიას სტილის შესახებ:არცერთი, შემიძლია ვთქვა, რომ vikory yogo იმისათვის, რომ მიიღოთ ნაგულისხმევი მარკერი li, უმეტეს შემთხვევაში ეს არის სტანდარტი.

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

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

ჩვენ ვხსნით ჩვენს js-ფაილს, სადაც არ უნდა იყოს სლაიდერი კოდი, არ დაგავიწყდეთ jQuery ჩასმა, რადგან ჩვენ დავწერთ ამ დამატებითი ჩარჩოსთვის. სანამ ვისაუბრებ, ამ სტატიის დაწერის დროს ვიყენებ jQuery 3.1.0-ის vikory ვერსიას. თავად ფაილი სკრიპტთან ერთად უნდა იყოს ჩართული სხეულის ტეგში, რადგან ჩვენ ვიმუშავებთ DOM ელემენტებთან, რომლებიც ჯერ უნდა იყოს ინიციალიზებული.

ამ დროისთვის, ჩვენ უნდა გამოვაცხადოთ რამდენიმე ცვლილება, ერთი შეინახავს სლაიდის რაოდენობას, რომელიც ამჟამად გვჭირდება ხედვის პორტში, მე მას დავარქმევ slideNow, ხოლო მეორე შეინახავს ამ სლაიდების რიგს თავად, სახელწოდებით slideCount.

აუცილებელია slideNow მნიშვნელობის დაყენება 1-ზე, რადგან თუ გაინტერესებთ გვერდები, რომლებიც გამოდის ჩვენი განლაგებიდან, ჩვენ გამოვაჩენთ პირველ სლაიდს ხედვის პორტში.

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

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

უპირველეს ყოვლისა, მოდით შევამოწმოთ რა არის ჩვენი გვერდის დარჩენილ სლაიდზე? ამ მიზნით, ჩვენ ვიღებთ ყველა ჩვენი სლაიდების რაოდენობას $("#slidewrapper").children().length-ის გამოყენებით და ვამთხვევთ მას ჩვენი სლაიდის რაოდენობას, რადგან ისინი ტოლია, რაც ნიშნავს, რომ ჩვენ უნდა დავიწყოთ ჩვენება. გვერდი ისევ, 1 სლაიდიდან, რაც ნიშნავს, რომ ჩვენ ვცვლით ტრანსფორმაციის CSS ძალას slidewrapper translate(0, 0)-ში, ისე რომ შევცვალოთ მისი პოზიცია ისე, რომ პირველი სლაიდი გამოჩნდეს ჩვენს ხედში, არ დავივიწყოთ -webkit და -ms. ბრაუზერის ადეკვატური რენდერისთვის (div. .vidnik css-powers-ით). ამის შემდეგ, არ დაგავიწყდეთ განაახლოთ slideNow ცვლილების მნიშვნელობა და აცნობოთ, რომ სლაიდი ნომერი 1 ჩანს: slideNow = 1;

ჩვენ უნდა შევამოწმოთ იმ სლაიდების რიცხვი, რომელიც, სავარაუდოდ, ჩვენ ვართ, ჩვენი სლაიდების რიცხვს შორის, თუ ეს ასე არ არის, მაშინ კვლავ მივმართავთ პირველ სლაიდს.

რაკი პირველი გონება არ მოდის, მაშინ არ შეგვიძლია ვისაუბროთ მათზე, რომლებზეც ამჟამად ვართ არც შემდეგ სლაიდზე და არც სხვა რამეზე, რაც ნიშნავს, რომ უნდა გადავიდეთ შეტევაზე, რაც ხდება slidewrapper-ის მარცხნივ გადატანა მნიშვნელობაზე, p სიგანის ხედის გარეთ , გადაადგილება კვლავ იქნება მოწოდებული ტრანსლაციის ცნობილი სიმძლავრის მეშვეობით, რომლის მნიშვნელობა მსგავსია "translate(" + translateWidth + "px, 0)", სადაც translateWidth არის მნიშვნელობა იმისა, თუ როგორ არის გადაადგილებული ჩვენი სლაიდერი. სანამ ვისაუბრებთ, მოდით გავახმოვანოთ ეს ცვლილება ჩვენი კოდის დასაწყისში:

შემდეგ სლაიდზე გადასვლის შემდეგ, ვთქვათ ჩვენს slideNow-ს, რომ არის კიდევ ერთი შემდეგი სლაიდი: slideNow++;

ამ მომენტში, ზოგიერთი მკითხველი შეიძლება დაბნეული იყოს: რატომ არ შევცვალეთ $("#viewport").width() slideWidth-ის მსგავსი რაღაცით, რათა ყოველთვის ვიცოდეთ ჩვენი სლაიდის სიგანე? პასუხი საკმაოდ მარტივია, რადგან ჩვენი საიტი ადაპტირებადია, მაშინ, ცხადია, სლაიდერის ქვეშ არსებული ხედების ბლოკი ასევე ადაპტირებულია, ასე რომ თქვენ გესმით, რომ ფანჯრის სიგანის ზომის შეცვლისას გვერდის ხელახლა ჩართვის გარეშე ( მაგალითად, ტელეფონის უკან გადაბრუნება), შეიცვლება ხედის პორტის სიგანე და, ცხადია, შეიცვლება და ერთი სლაიდის სიგანე. ამ შემთხვევაში, ჩვენი სლაიდერი გადაინაცვლებს იმავე სიგანეზე, როგორც ორიგინალი, რაც ნიშნავს, რომ სურათები ნაწილებად იქნება ნაჩვენები ან საერთოდ არ იქნება ნაჩვენები ხედვის პორტში. ჩვენს ფუნქციაში $("#viewport").width() slideWidth-ის ნაცვლად, ჩვენ შეგვიძლია გამოვთვალოთ ხედის სიგანე, როდესაც სლაიდები ჩართულია სკინზე, რითაც დავრწმუნდებით, რომ როდესაც ეკრანის სიგანე მოულოდნელად შეიცვლება, ჩვენ გადავხვევთ. ჩვენ გვჭირდება სლაიდამდე.

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

js საათი მითითებულია მილიწამებში.

ახლა დავწეროთ შემდეგი კონსტრუქცია:

აქ ყველაფერი უფრო მარტივი არ შეიძლება იყოს; $(document).ready(function()()) კონსტრუქციის საშუალებით ჩვენ ვსაუბრობთ მათზე, რომლებიც უნდა წაიშალოს დოკუმენტის ჩამოტვირთვის შემდეგ. შემდეგ ჩვენ უბრალოდ მოვუწოდებთ nextSlide ფუნქციას slideInterval-ის ტოლი ინტერვალით, დამატებული setInterval ფუნქციით.

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


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

ამ კოდის ანალიზის დასაწყებად, ჩვენ უნდა ვიცოდეთ რა არის გადართვის ინტერვალი. უპირველეს ყოვლისა, მნიშვნელოვანია nextSlide ფუნქციის პერიოდული დაწკაპუნების შენახვა, უბრალოდ გარეგნულად შეგვიძლია გამოვიყენოთ კოდების ეს სერია: setInterval(nextSlide, slideInterval); , შეიცვალა Qiu: switchInterval = setInterval(nextSlide, slideInterval); . ამ მანიპულაციების შემდეგ, ჩვენი ძირითადი კოდის ბლოკი ასე გამოიყურება:

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

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

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

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

მოდი პირველ რიგში აღვნიშნოთ ისინი:

ეს მარკირება თავიდან შეიძლება სულელური იყოს, მაშინვე ვიტყვი, რომ ამ ორი ღილაკის ერთ div-ში შეფუთვით კლასის prev-next-btns მხოლოდ თქვენი მოხერხებულობისთვის, თქვენ არ გჭირდებათ ვინმეს შეწუხება, შედეგი იქნება. შევცვალოთ, ახლა დავამატებთ m სტილებს და ყველა სტილს. გასაგებია:

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

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

სტილის შემდეგ, ჩვენი სლაიდერი შეიძლება ასე გამოიყურებოდეს:


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

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

თუ ჩვენ არ ვართ პირველ სლაიდზე, მაშინ ჩვენ უნდა გადავიდეთ 1-ით უკან, რისთვისაც კვლავ ვცვლით სლაიდების გადახვევის სიმძლავრეს. ფორმულა არის: (ერთი სლაიდის სიგანე) * (ნაკადის სლაიდის რაოდენობა - 2), ერთი და იგივე, ვიღებთ მინუს ნიშანს. რატომ -2, და არა -1, გვჭირდება 1 სლაიდით უკან დაბრუნება? მარჯვნივ, როგორც ვიცით, ვთქვათ, მე-2 სლაიდზე, მაშინ ჩვენი სლაიდების გადახვევის ტრანსფორმაციის:translate(x,0) ძალა უკვე უდრის ერთი სლაიდის სიგანეს, ასე რომ, შეგვიძლია ვთქვათ, რომ თქვენ უნდა აირჩიოთ ნაკადის სლაიდის რიცხვი 1, შემდეგ ჩვენ კვლავ ვხსნით ერთს, რადგან სლაიდების გადახვევა უკვე ოფსეტურია სლაიდების შესაფუთად, რომელიც უნდა გადაინაცვლოს 0-ით, თუნდაც თავად ხედის სიგანეზე, ხოლო slideNow-ზე - 2.

ახლა აღარ გვჭირდება რიგების დამატება კოდის მთავარ ბლოკში:

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

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

ფაქტობრივად, ხედვის პორტის შუაში არის დანართების სია, მე მაქვს იდენტიფიკატორი nav-btns, შუაში არის ჩვენი ნავიგაციის ღილაკები, მათ აქვთ კლასი slide-nav-btn, შემდეგ მარკირება შეგიძლიათ დაასრულოთ დასაწყისი აქ არის სტილები:

nav-btns ბლოკს, სადაც ჩვენი ღილაკებია განთავსებული, ენიჭება დენის პოზიცია:აბსოლუტური ისე, რომ არ გაჭიმოს ხედის პორტი სიმაღლეში, რადგან slidewrapper-ს აქვს პოზიცია: ფარდობითი სიმძლავრე, სიგანე 100%-ით არის დაყენებული ჩვენ მიერ, ასე რომ ტექსტის გასწორების: ცენტრის დახმარებით ვაჩერებთ ღილაკებს ჰორიზონტალურად, რათა ნახვის პორტი გამოვიდეს, შემდეგ ქვედა დენის დახმარებით ვუშვებთ ჩვენს ბლოკს. იცოდეთ, რომ ქვედა კიდეზე მყოფები პასუხისმგებელნი არიან 2 0px მხარეს ყოფნაზე.

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

ახლა კი მოდით გადავიდეთ jQuery ნაწილზე:
პირველად შეცვალეთ navBtnId, რომელიც შეინახავს ჩვენ მიერ დაჭერილი ღილაკის ინდექსს:

აქ, როდესაც ვაწკაპუნებთ ჩვენს slide-nav-btn-ზე, ვაწკაპუნებთ ფუნქციაზე, რომელიც ჯერ ანიჭებს ცვლადს navBtnId დაჭერილი ღილაკის ინდექსს, რომელიც არის სერიული ნომერი, რადგან რიცხვი იწყება ნულიდან, შემდეგ ვაჭერთ ღილაკზე მეორეზე, შემდეგ მნიშვნელობა იწერება navBtnId 1-ზე. შემდეგ ჩვენ განვახორციელებთ ხელახლა გადამოწმებას, დავამატებთ ერთს ღილაკის სერიულ ნომერს, რათა გამოვაკლოთ ასეთი რიცხვი, რადგან შედეგები არ არის 0-დან, მაგრამ 1-დან ამ რიცხვს გავათანაბრებთ ნაკადის სლაიდის რაოდენობასთან, თუ მათ თავიდან ავიცილებთ, არ ვიმუშავებთ მათზე.

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

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

გმადლობთ პატივისცემისთვის!

ტეგები:

• jquery სლაიდერი
• css
• css3 ანიმაცია
• html

ეს არის ადაპტური სენსორული სლაიდერი, დაწერილი jQuery-ში. ამ მოდულის ძრავა იყენებს CSS3 ანიმაციებს და ამავდროულად გადასცემს სარეზერვო ასლებს ბრაუზერების ძველი ვერსიებისთვის. Glide.js მარტივი და მარტივი გამოსაყენებელია.

მოდულის ერთადერთი შინაარსი არის jQuery, რომელიც ჯერ უნდა შევიტანოთ:

ძირითადი სტილები შედის.

მოდით გავაფართოვოთ სლაიდერის html სტრუქტურა.

ჩვენ ვიწყებთ სლაიდერს კორექტირების შემდეგ კორექტირების შემდეგ.

$(".სლაიდერი").glide();

...ან ჩვენ თვითონ გამოვასწორებთ

$(".slider").glide(( autoplay: 5000, ისრები: "body", nav: "body" )));

ხელმისაწვდომი პარამეტრების სია:

vikoristan API-სთვის ჩაწერეთ glide ცვლილებაზე.

Var glide = $(".slider").glide().data("api_glide");

API მეთოდები ახლა თქვენთვის ხელმისაწვდომია.

Glide.jump(3, console.log ("Woooo!"));

• .current() - ჩართეთ მიმდინარე გვერდითი ნომერი
• .play() - დაიწყეთ ავტომატური გადახვევა
• .pause() - Zupinity autoscroll
• .next(გამოძახება) - გადაიტანეთ სლაიდერი წინ
• .prev(callback) - გადაიტანეთ სლაიდერი უკან
• .jump(დისტანცია, გამოძახება) - წინა სლაიდზე გადასვლა
• .nav(target) - მიამაგრეთ ნავიგაცია სიმღერის ელემენტს (მაგალითად: "body", ".class", "#id")
• .arrows(target) - მიამაგრეთ ისრები ერთ ელემენტზე (მაგალითად: "body", ".class", "#id")