Jquery ვერტიკალური სლაიდერი ისრებით და ნავიგაციით. საპასუხო სლაიდერების შერჩევა

> >

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

.slider-box( სიგანე: 320px; სიმაღლე: 210px; overflow: დამალული;) .slider(პოზიცია: შედარებითი; სიგანე: 10000px; სიმაღლე: 210px;)

Container.slider-box განსაზღვრავს სლაიდერის ზომას. Overflow:hidden თვისება მალავს ყველა ელემენტს, რომელიც არ არის ელემენტის ფარგლებში.

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

სლაიდები სწორდება float:left თვისების გამოყენებით.

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

სკრიპტი

სლაიდების მოძრაობა განხორციელდება კონტეინერის margin-left თვისების შეუფერხებლად შეცვლით.სლაიდერი.

$(function () ( var width= $(".slider-box") .width () ; // სლაიდერის სიგანე.ინტერვალი = 4000 ; // სლაიდების შეცვლის ინტერვალი.$(".slider img:last") .clone () .prependTo (."slider") ; // ბოლო სლაიდის ასლი მოთავსებულია დასაწყისში.$() .eq (1) .clone () .appendTo (."slider"); // ბოლოს მოთავსებულია პირველი სლაიდის ასლი. // Container.slider არის გადატანილი მარცხნივ ერთი სლაიდის სიგანეზე. setInterval("ანიმაცია()" , ინტერვალი); // აწარმოებს animation() ფუნქციას სლაიდზე გადასვლის შესასრულებლად.)) ; ფუნქცია animation() ( var margin = parseInt($(".slider") .css ("marginLeft") ); // მიმდინარე ბლოკის offset.slider width= $(".slider-box" ).width() , // სლაიდერის სიგანე. slidersAmount= $(".სლაიდერი") .ბავშვები () .სიგრძე ; // სლაიდების რაოდენობა სლაიდერში. if (ზღვარი!= (- სიგანე* (სლაიდერებირაოდენობა- 1 ) ) // თუ მიმდინარე სლაიდი არ არის ბოლო,( margin= margin-width; // მაშინ ზღვრის მნიშვნელობა მცირდება სლაიდის სიგანეზე.) სხვა ( // თუ ნაჩვენებია ბოლო სლაიდი,$(".slider" ) .css("margin-left" , -width) ; // შემდეგ block.slider უბრუნდება საწყის პოზიციას,ზღვარი=- სიგანე* 2 ; ) $(".სლაიდერი" ) .animate (( marginLeft: margin) , 1000 ); // Block.slider მოძრაობს მარცხნივ 1 სლაიდით. } ;

შედეგი არის მარტივი სლაიდერი უსასრულო ავტომატური გადახვევით.

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

წყაროს კოდები და სლაიდერის დემო ვერსია

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

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

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

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

chiefSlider-ის უპირატესობები

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

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

chiefSlider-ის ინსტალაცია

სლაიდერის დაყენება ხდება 3 ეტაპად:

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

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

როგორ შევქმნათ მარტივი ვებსაიტის სლაიდერი (ჩამოწერის გარეშე)

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

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

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

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

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

css კოდი chiefSlider-ისთვის:

/* BASIC STYLES */ .სლაიდერი (პოზიცია: შედარებითი; გადინება: დამალული; ) .slider__wrapper ( ჩვენება: მოქნილი; გარდამავალი: ტრანსფორმაცია 0.6 წმ სიმარტივე; /* 0.6 სლაიდის გადასვლის ხანგრძლივობა წამებში */ ) .slider__item ( flex: 0 0 50%; /* განსაზღვრავს აქტიური სლაიდების რაოდენობას (ამ შემთხვევაში 2 */ მაქსიმალური სიგანე: 50%; /* განსაზღვრავს აქტიური სლაიდების რაოდენობას (ამ შემთხვევაში 2 */ ) /* უკან და წინ ღილაკების სტილები * / .slider__control ( პოზიცია: აბსოლუტური; ჩვენება: არცერთი; ზედა: 50%; ტრანსფორმაცია: translateY(-50%); გასწორება-ერთები: ცენტრი; დასაბუთება-შიგთავსი: ცენტრი; ტექსტის გასწორება: ცენტრში; სიგანე: 40 პიქსელი; /* ღილაკის სიგანე */ სიმაღლე: 50 პიქსელი; /* ღილაკის სიმაღლე */ გამჭვირვალობა: .5; /* გამჭვირვალობა */ ფონი: #000; /* ფონის ფერი */ ) .slider__control_show ( display: flex; ) .slider__control:hover, . slider__control:focus (ტექსტი-გაფორმება: არცერთი; მონახაზი: 0; გამჭვირვალობა: .9; /* გამჭვირვალობა */ ) .slider__control_left (მარცხნივ: 0;) .slider__control_right (მარჯვნივ: 0; ) .slider__control (content::be for "; ჩვენება lay: inline-block სიგანე: 20 px /* ხატი (ისარი) სიგანე */ სიმაღლე: 20 პიქსელი; /* ხატი (ისარი) სიმაღლე */ ფონი: გამჭვირვალე, განუმეორებელი ცენტრის ცენტრი; ფონის ზომა: 100% 100% ) .slider__control_left::prefore ( 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::fore ( 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 _sliderI = _mainElement.querySelectorAll(".slider__item"), // ელემენტები (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // controls _sliderControlLeft = _mainElement.querySelector_"), buttons.querySelector_" //li "LEFT" _sliderControlRight = _mainElement.querySelector(". slider__control_right"), // ღილაკი "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // wrapper სიგანე _itemWidth = parseFloat(I). / ერთი ელემენტის სიგანე _positionLeftItem = 0, // მარცხენა აქტიური ელემენტის პოზიცია _transform = 0, // ტრანსფორმაციის მნიშვნელობა slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // ნაბიჯის ზომა (ტრანსფორმირებისთვის) _items = ; // ელემენტთა მასივი // მასივის შევსება _items _sliderItems.forEach(ფუნქცია (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) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) (_sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.containRight.containsLeft. _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (მიმართულება === "მარცხნივ") (თუ (_positionI Left)<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

JavaScript კოდში მთავარ მოქმედებას ასრულებს _transformItem ფუნქცია. ეს ფუნქცია, მასზე გადასული მიმართულებიდან გამომდინარე, გარდაქმნის ელემენტს.slider__wrapper .

სლაიდერის ინიციალიზაციახორციელდება შემდეგნაირად:

Var slider = multiItemSlider(."slider") სლაიდერის დემო ვერსია

როგორ შევქმნათ მარყუჟის სლაიდერი?

სლაიდების ციკლი შესაძლებელია .slider__item ელემენტების გარდაქმნით.

ამისათვის აუცილებელია მისი ამჟამინდელი პოზიციისა და ტრანსფორმაციის მნიშვნელობების მიბმა თითოეულ ელემენტთან.slider__item.

ყველაზე ოპტიმალურად, ეს მოქმედებები შეიძლება შესრულდეს _items მასივის გამოყენებით:

var_items = ; // მასივის შევსება ნივთებით.slider__item _sliderItems.forEach(ფუნქცია (item, index) ( _items.push(( item: item, position: index, transform: 0 )); ));

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

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

var პოზიცია = ( getItemMin: ფუნქცია () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.პოზიცია) ( indexItem = index; ) )); დაბრუნება indexItem; ), getMin: ფუნქცია () ( return _items.position; ), getMax: ფუნქცია () ( return _items.position; ) )

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

Var _transformItem = ფუნქცია (მიმართულება) ( var nextItem; if (მიმართულება === "მარჯვნივ") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (მიმართულება === "მარცხნივ") ( _positionLeftItem--; თუ (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

სინამდვილეში, აქ ყველაფერი მარტივია.
მაგალითად, შემდეგ სლაიდზე გადასასვლელად, ელემენტთა მასივი ჯერ იძებნება ელემენტისთვის, რომლის პოზიცია აღემატება მიმდინარე ყველაზე მარჯვენა ელემენტს.slider__item .
თუ მასივში არის ასეთი ელემენტი, მაშინ შესრულებულია .slider__wrapper ელემენტის ტრანსფორმაცია (ანუ მოქმედებები, როგორც ალგორითმში მარყუჟის გარეშე).
Მაგრამ თუ არ არის ასეთი ელემენტი, შემდეგ გარდა ტრანსფორმაციისა.slider__wrapper სრულდება რიგი სხვა მოქმედებები.  პირველ რიგში, ელემენტის მასივი იძებნება ელემენტისთვის მინიმალური პოზიციით.  ამ ელემენტის მიღების შემდეგ ის დაყენებულია პოზიცია, რომლის მნიშვნელობა უდრის მიმდინარე მარჯვენა ელემენტის მნიშვნელობას + 1.  და, რა თქმა უნდა, ასეც ხდება მისი ტრანსფორმაცია, ისეთი პროცენტით რომ მთავრდება , ე.ი.  ბოლო ელემენტის შემდეგ.

წინა სლაიდზე გადასასვლელად, იგივე ნაბიჯები შესრულებულია, მაგრამ პირიქით.

გარდა ამისა, მარყუჟის სლაიდერისთვის, თქვენ არ გჭირდებათ მარცხენა და მარჯვენა ღილაკების ხილვადობის შეცვლა.  ეს ღილაკები ყოველთვის იქნება ნაჩვენები სლაიდერის ამ ვერსიაში.
ამისათვის საჭიროა:
ამოიღეთ slider__control_show კლასი "Right" კონტროლიდან;
 
.slider__control ამომრჩევლის CSS-ში შეცვალეთ ჩვენების თვისების მნიშვნელობა flex .
სლაიდერის დემო 
როგორ შევქმნათ სლაიდერი მარყუჟის და სლაიდების ავტომატური გადასვლით?
თქვენ შეგიძლიათ დაპროგრამოთ სლაიდების ავტომატური შეცვლა გარკვეული ინტერვალებით setInterval ფუნქციის გამოყენებით.
Var _cycle = ფუნქცია (მიმართულება) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem (მიმართულება); ), _config.interval); )
ამ მაგალითში setInterval ფუნქცია გაუშვებს _transformItem ფუნქციას რეგულარულ ინტერვალებში _config.interval ცვლადის მნიშვნელობის ტოლი.
გარდა ამისა, სასურველია დაემატოს გაჩერება სლაიდების ავტომატური ცვლილებისთვის, როდესაც კურსორი სლაიდერზე მიიყვანება.
თქვენ შეგიძლიათ განახორციელოთ ეს ფუნქცია შემდეგნაირად:
თუ (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", ფუნქცია () (clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", ფუნქცია () (clearInterval(_interval); _cycle( _config.direction); ));)
როგორ შევაჩეროთ სლაიდზე ავტომატური გადასვლა, თუ ელემენტი მომხმარებლისთვის არ ჩანს?
სლაიდის ავტომატური ცვლილების გამორთვა სასარგებლოა ორ შემთხვევაში:
როდესაც გვერდი (რომელზეც მდებარეობს ეს სლაიდერი) არ არის აქტიური;
 
როდესაც სლაიდერი გვერდის ფარგლებს გარეთაა.
პირველი შემთხვევა შეიძლება დამუშავდეს ხილვადობის ცვლილების მოვლენით.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
ფუნქცია visibilitychange მოვლენის დამმუშავებლისთვის:
// ამუშავებს მოვლენას "დოკუმენტის ხილვადობის ცვლილება" var _handleVisibilityChange = ფუნქცია () ( if (document.visibilityState === "დამალული") (clearInterval(_interval); ) else (clearInterval(_interval); _cycle(_config.direction); ) )
ელემენტის ხილვადობა შეიძლება გამოითვალოს _isElementVisible ფუნქციის გამოყენებით:
ფუნქცია _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint) = ფუნქცია (x დააბრუნეთ document.elementFromPoint(x, y); if (rect.right< 0 || rect.bottom < 0 || rect.left >vსიგანე ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || ელემენტი. შეიცავს (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
შეგიძლიათ დარეკოთ _isElementVisible, მაგალითად, _transformItem ფუნქციის დასაწყისში.  ეს ქმედება გააუქმებს სლაიდზე ავტომატურ გადასვლას, თუ სლაიდერი ამჟამად ხედის პორტის გარეთაა.
Var _transformItem = ფუნქცია (მიმართულება) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
სლაიდერი, რომელიც რეაგირებს ბრაუზერის ფანჯრის ზომის შეცვლაზე
ადაპტური სლაიდერის ეს ვერსია განსხვავდება წინადან იმით, რომ ის საშუალებას იძლევა ბრაუზერის ფანჯრის ზომის შეცვლისას აქტიური ელემენტების (სლაიდების) რაოდენობის შეცვლა.  როგორც წესი, მომხმარებლები არ ცვლიან ბრაუზერის ზომას, მაგრამ ეს მაინც შეიძლება მოხდეს.
ეს ხორციელდება ზომის შეცვლის მოვლენისა და _states მასივის გამოყენებით.  მასივი გამოიყენება გამოთვლებისთვის.  მისი გამოყენება საშუალებას მისცემს არ მოხდეს სლაიდერის ხელახლა ინიციალიზაცია, როდესაც ეს არ არის საჭირო.
Ერთ - ერთი ეფექტური გზებისაიტის გვერდზე მომხმარებლების ყურადღების მიქცევა არის მოძრავი ანიმაციის შექმნა.  ანიმაციური ელემენტები გვეხმარება უფრო ვიზუალურად თქვან და აჩვენონ მომხმარებლებს თქვენი პროდუქტის შესახებ.  ბოლო დროს ძალიან პოპულარული გახდა მოცურების პანელები, ისევე როგორც სხვა ეფექტები, რომლებიც ჩნდება სურათზე გადახვევის ან დაწკაპუნებისას.  ისინი ასევე ცნობილია როგორც სლაიდერები, კარუსელები და სლაიდები.  ამ სტატიაში ვისაუბრებთ ადაპტური კარუსელის ტიპის სლაიდერის შექმნაზე გლუვი ავტომატური გადახვევის ეფექტით.
დღემდე, ინტერნეტში არის ასობით მიმოხილვა მზა გადაწყვეტილებების ბმულებით, მაგრამ მათი უმეტესობა შეიცავს ბევრ გამოუყენებელ ფუნქციას, რაც მნიშვნელოვნად ამცირებს სლაიდერის მუშაობას, ასევე ანელებს მთლიანად საიტის დატვირთვას.  პროფესიონალი ვებ დეველოპერები ყოველთვის ცდილობდნენ შეექმნათ პროგრამული პროდუქტები, რომლებიც მოქნილი იქნება პერსონალიზაციაში, დამატებითი ბიბლიოთეკების და დანამატების დამატების დაბალი ბარიერით.  სწორედ ამიტომ, ჩვენი სკრიპტი იყენებს მინიმალურ მოთხოვნებს ასეთი სლაიდერის ორგანიზებისთვის.  სამუშაოს ფუნქციონალობა საშუალებას გაძლევთ დააყენოთ გადართვის ინტერვალი, სიჩქარე, ასევე კონკრეტული სლაიდის არჩევანი.  ქვემოთ მოცემულია რამდენიმე ცვლადი, რომელიც აკონტროლებს თავად სლაიდერის მუშაობას.
დროის სია- სლაიდ გადართვის სიჩქარე
დროის ხედი- შოუს დრო
რადიომაგრამ- ღილაკები სლაიდის ქვეშ სწრაფი ნავიგაციისთვის.  ნაგულისხმევი მნიშვნელობა არის true, თუ იყენებთ false, მაშინ ღილაკები გაქრება.
ახლა დავიწყოთ!  შექმენით და გახსენით ფაილი index.htm 
 

 

 

 

 

 

 

 
 

 
წარმოდგენილ კოდში, როგორც ვხედავთ, არაფერია რთული, სლაიდერი-შეფუთვაგანსაზღვრავს ზოგადი პოზიციადა ასწორებს სლაიდს ეკრანის შუაში.  Პარამეტრი აქტიური-სლაიდიადგენს გამოსახულების ზომასა და სიმაღლეს მისი სიგრძის მიხედვით.  და სლაიდერიაჩვენებს მხოლოდ აქტიურ სურათს.
ახლა შევქმნათ და გავხსნათ ფაილი სტილი.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; ) #active-slide ( სიგანე: 100%; ჩვენება: ცხრილი; პოზიცია: შედარებითი; გადინება: დამალული; -webkit-user-select: none; -moz-user-select: none; -ms- user-select: არცერთი; -o-user-select: none; user-select: none; ) #slider(პოზიცია: შედარებითი; სიგანე: calc(100% * 4); ზედა: 0; მარცხნივ: 0; ზღვარი: 0 ; padding: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: ease-in-out; -out; transition-time-function: ease-in-out; ) .slide( სიგანე: calc(100%/4); სიის სტილი: არცერთი; ჩვენება: inline; float: მარცხენა; ) .slide img ( სიგანე: 100%; ) .Radio-But( margin-top:10px; text-align:center;) .Radio-But .ctrl-select ( margin:2px; display:inline-block; სიგანე:16px; სიმაღლე:16px; overflow :hidden;text-indent:-9999px;background:url(radioBg.p  ნ.გ) ცენტრალური ქვედა არ განმეორება;  ) .Radio-But .ctrl-select:hover (კურსორი:pointer; background-position:center center;) .Radio-But .ctrl-select.active (back-position:center top;) #prewbutton, #nextbutton ( ჩვენება :block; სიგანე:40px; სიმაღლე:100%; პოზიცია:აბსოლუტური; ზევით:0; overflow:დამალული; text-indent:-999px; ფონი: url("arrowBg.png") მარცხენა ცენტრის გამეორება; გაუმჭვირვალობა:0.5 ; z-index:3; მონახაზი: არცერთი !მნიშვნელოვანი; ) #prewbutton (მარცხნივ:10px; ) #nextbutton (მარჯვნივ:10px; ფონზე:url(arrowBg.png) მარჯვენა ცენტრის გარეშე-გამეორება; ) #prewbutton:hover, # შემდეგი ღილაკი: hover (გაუმჭვირვალობა:1;)
სტილის საკუთრებაში სლაიდერი-შეფუთვაჩაწერა სიგანე- თქვენი სურათების მაქსიმალური სიგრძე.
სტილის საკუთრებაში #სლაიდერი ( სიგანე: გამოთვლა (100% * 4); )და .სლაიდი ( სიგანე: calc (100%/4); )მიუთითეთ სურათების რაოდენობა თქვენს სლაიდერში.  ჩვენს მაგალითში არის 4.
თუ წინ/უკანა ისრები ხელს უშლის თქვენი სლაიდერის ხილვადობას, ისინი შეიძლება გახდეს უხილავი და გამოჩნდეს სვლაზე.  ამისათვის პარამეტრებში წინასწარმაგრამდა შემდეგი მაგრამდააყენეთ გამჭვირვალობის თვისება 0-ზე.
ახლა შევქმნათ და გავხსნათ ჩვენი ფაილი სლაიდერი.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); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else(slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("აქტიური"); $(".ctrl-select").eq(slideNum - 1).addClass("აქტიური"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()(animSlide("შემდეგი"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) (adderSpan += " " + ინდექსი + "";
 });
 $("
"+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 click = false; var prevX; $("slide").mousedown(function(e)(clicing = true; prevX = e.clientX;)); $(".slide"). ფუნქცია() (დაწკაპუნება = მცდარი; )); $(დოკუმენტი). mouseup(function()(დაწკაპუნება = false; )); $(".slide").mousemove(function(e)(if(დაწკაპუნება == true ) (თუ (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-ში.  ამ მოდულის ძრავა იყენებს CSS3 ანიმაციებს, მაგრამ ამავდროულად, ბრაუზერების ძველი ვერსიებისთვის გათვალისწინებულია ჩანაცვლება.  Glide.js არის მარტივი და მსუბუქი.
გამოყენება
1. ჩართეთ jQuery
მოდულის ერთადერთი დამოკიდებულება არის jQuery, რომელიც ჯერ უნდა შევიტანოთ:
 
2. ჩართეთ Glide.js
 
3. დაამატეთ html
მოდით დავაკავშიროთ საბაზისო სტილები.
 
მოდით გავაბრტყელოთ სლაიდერის html სტრუქტურა.
 

 

4. ინიციალიზაცია
სლაიდერის გაშვება ნაგულისხმევი პარამეტრებით...
 
... ან შეცვალეთ იგი თქვენთვის
 
პარამეტრები
ხელმისაწვდომი ვარიანტების სია:
Პარამეტრი
ნაგულისხმევი მნიშვნელობა
ტიპი
აღწერა
ავტომატური ჩართვა
4000

int/bool
ავტომატური გადახვევა (false გამორთვა)
ჰოვერპაუზა
მართალია
ბული
დააპაუზეთ ავტომატური გადახვევა, როცა მაუსი სლაიდერზე ჩერდება
ანიმაციის დრო
500

ინტ
!!!  ეს პარამეტრი მუშაობს, თუ ბრაუზერს არ აქვს css3 მხარდაჭერა.  თუ css3 მხარდაჭერილია ბრაუზერის მიერ, მაშინ ეს პარამეტრი უნდა შეიცვალოს .css ფაილში!!!
ისრები
მართალია
bool/string
ისრების ჩვენება/დამალვა/მიმაგრება.  True სლაიდერის კონტეინერში ისრების ჩვენება.  ყალბი დასამალი.  თქვენ ასევე შეგიძლიათ მიუთითოთ კლასის სახელი (მაგალითად: ".class-name") სპეციალური html კოდის დასამაგრებლად
arrowsWrapperClass
სლაიდერი-ისრები
სიმებიანი
კლასი, რომელიც მიენიჭება კონტეინერს ისრებით
arrowMainClass
სლაიდერის ისარი
სიმებიანი
ძირითადი კლასი ყველა ისრისთვის
arrowRightClass
სლაიდერი-ისარი-მარჯვნივ
სიმებიანი
კლასი მარჯვენა ისრისთვის
arrowLeftClass
სლაიდერი-ისარი-მარცხნივ
სიმებიანი
კლასი მარცხენა ისრისთვის
arrowRightText
შემდეგი
სიმებიანი
ტექსტი მარჯვენა ისრისთვის
arrowLeftText
წინა
სიმებიანი
ტექსტი მარცხენა ისრისთვის
ნავი
მართალია
bool/string
სლაიდების ნავიგაციის ჩვენება/დამალვა/მიმაგრება.  ჭეშმარიტი ჩვენება.  ყალბი დასამალი
navCenter
მართალია
ბული
ცენტრის ნავიგაცია
navClass
სლაიდერი-ნავი
სიმებიანი
ნავიგაციის კონტეინერის კლასი
navItemClass
slider-nav_item
სიმებიანი
კლასი ნავიგაციის ელემენტისთვის
navCurrentItemClass
slider-nav__item--მიმდინარე
სიმებიანი
კლასი მიმდინარე ნავიგაციის ელემენტისთვის
კლავიატურა
მართალია
ბული
გადაახვიეთ სლაიდი მარცხენა/მარჯვენა ღილაკების დაჭერით
შეხების მანძილი
60

int/bool
შეხების მხარდაჭერა (შეხება).  მცდარია ამ ფუნქციის გამორთვა.
სანამ Init
ფუნქცია()()
ფუნქცია
გამოძახება, რომელიც იმუშავებს მოდულის ინიციალიზაციამდე
შემდეგ Init
ფუნქცია()()
ფუნქცია
გამოძახება, რომელიც იმუშავებს მოდულის ინიციალიზაციის შემდეგ
ტრანზიციის წინ
ფუნქცია()()
ფუნქცია
გამოძახება, რომელიც იმუშავებს სლაიდერის გადახვევამდე
გადასვლის შემდეგ
ფუნქცია()()
ფუნქცია
გამოძახება, რომელიც იმუშავებს სლაიდერის გადახვევის შემდეგ
API
API-ის გამოსაყენებლად ჩაწერეთ glide ცვლადზე.
var glide = $(".სლაიდერი").glide().data("api_glide");
API მეთოდები ახლა თქვენთვის ხელმისაწვდომია.
Glide.jump(3, console.log ("Woooo!"));
.current() - დააბრუნეთ მიმდინარე მხარის ნომერი
.play() - დაიწყეთ ავტომატური გადახვევა
.pause() - შეაჩერე ავტომატური გადახვევა
.next(გამოძახება) - გადაახვიეთ სლაიდერი წინ
.prev(callback) - გადაახვიეთ სლაიდერი უკან
.jump(დისტანცია, გამოძახება) - გადახტომა კონკრეტულ სლაიდზე
.nav(target) - მიამაგრეთ ნავიგაცია კონკრეტულ ელემენტზე (მაგ: "body", ".class", "#id")
.arrows(target) - მიამაგრეთ ისრები კონკრეტულ ელემენტზე (მაგ.: "body", ".class", "#id")

1. jQuery Fresco Plugin
პასუხისმგებელი jquery გალერეა (იცვლის ზომას, როდესაც ეკრანის გარჩევადობა იცვლება) ნაჩვენებია ამომხტარ ფანჯარაში ესკიზებით და გამოსახულების წარწერებით.  jquery ფრესკო გალერეა გამართულად მუშაობს უმეტეს ბრაუზერებში, მათ შორის: IE6+, Firefox 3+, Chrome 5+, Opera 9+.  ამ მოდულის უფასო ვერსია შეიძლება გამოყენებულ იქნას მხოლოდ არაკომერციულ პროექტებზე.
2. „ადაპტორი“ სლაიდერი


სლაიდერი სხვადასხვა გარდამავალი ეფექტებით (7 განსხვავებული ეფექტი, მათ შორის 3D).  პროექტი Github-ზე.
3. სლაიდერის მოდული სხვადასხვა ეფექტებით "jQ-Tiles"


დანამატი სხვადასხვა გადასვლის ეფექტებით, რეგულირებადი სლაიდის სიჩქარით, ავტომატური გადახვევის ფუნქციით.
4. jQuery მოდული "Sly"


დანამატი ვერტიკალური და ჰორიზონტალური გადახვევის განსახორციელებლად.  პროექტი Github-ზე.
5. ანიმაციური CSS3 Makisu მენიუ


6. მარტივი სლაიდშოუ


7. ფუნქციური jQuery სლაიდერი "iView Slider v2.0"


შინაარსის სლაიდერი / სლაიდშოუ (სლაიდი შეიძლება იყოს არა მხოლოდ სურათები, არამედ ვიდეო კლიპები და სხვა HTML შინაარსი).  ნავიგაციისთვის შეგიძლიათ გამოიყენოთ: ესკიზები, მარცხენა/მარჯვენა ღილაკები და კლავიატურა.  პროექტი Github.com-ზე.
8. jQuery დანამატების ნაკრები "Vanity"


ნაკრებში არის 7 დანამატი: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder და jCollapse.  ამ გადაწყვეტილებების ნაკრები დაგეხმარებათ დანერგოთ სლაიდერები, ინსტრუმენტების რჩევები, ჩანართები, გამოსახულების ამომხტარი ფანჯარა და სხვა.
9. Hover CSS3 Effect


10. CSS3 ჩამოსაშლელი მენიუ


11.iOSlider


მობილურ მოწყობილობებზე მუშაობისთვის შექმნილი სლაიდერი.
12. CSS3 ჩატვირთვის მაჩვენებელი


13. CSS3 hover ეფექტი


14. "Product Colorizer" jQuery Plugin


დანამატი არის მსუბუქი გადაწყვეტა სხვადასხვა ფერის პროდუქტების სანახავად (შესაბამისია, მაგალითად, ონლაინ ტანსაცმლის მაღაზიებისთვის, რათა ვიზიტორებს არჩევანის საშუალება მისცენ ფერის სქემაპროდუქტი რამდენიმე ვარიანტიდან).  დანამატი მოითხოვს მხოლოდ ორ სურათს თითოეული პროდუქტისთვის (ყველა ფერი იქნება ნიღბის სახით).  დანამატი მუშაობს ყველა მთავარ ბრაუზერში, მათ შორის IE7+ (იმუშავებს IE6-შიც, თუ დააფიქსირებთ PNG გამჭვირვალობის ჩვენებას).  პროექტი GitHub-ზე.
15. CSS3 ანიმაციური ჩარტები


16. სურათზე დაწკაპუნებისას გადაფარვის ეფექტის შექმნა


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


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


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


20. CSS3 hover ანიმაცია ბლოკებზე


21. CSS3 jQuery ამომხტარი პანელი
დააწკაპუნეთ ისარს დემო გვერდის ეკრანის ბოლოში, რათა ნახოთ ამომხტარი ხატები.
22. უფასო HTML5 სურათების გალერეა "Juicebox Lite"


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


24. CSS3 Parallax Slider


25. jQuery ფოტო გალერეა ესკიზებით


საპასუხო გალერეა, გამოსახულება და ესკიზების ზომები იცვლება ბრაუზერის ფანჯრის ზომასთან ერთად.
26. jQuery შინაარსის სლაიდერის მოდული "Horinaja"


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


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


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


საინტერესო CSS jQuery ინფორმაციის პრეზენტაცია გვერდზე.  ბმულზე დაწკაპუნებით იხსნება ბუკლეტის მენიუ და ვიზიტორს შეუძლია მეტი წაიკითხოს ამომხტარ ფანჯარაში მოწოდებული კერძების შესახებ.  ანიმაცია არ არის სწორად ნაჩვენები IE-ში.
30. Elastislide დანამატი


რეზინის დანერგვა ადაპტური კარუსელი(სურათების ვერტიკალური და ჰორიზონტალური კარუსელი) და სურათების გალერეები.  ბრაუზერის ფანჯრის შემცირებისას სურათების რაოდენობა მცირდება გარკვეულ მინიმალურ მნიშვნელობამდე და შემდეგ სკალირებულია დარჩენილი სურათების ზომა.  პროექტი Github-ზე.
31. ახალი CSS3 jQuery Slit Slider


საპასუხო სლაიდერის დანამატი (სიგანე შეიძლება დაყენდეს პროცენტულად და ის ავტომატურად მასშტაბირდება) ორ სტილში საინტერესო ანიმაციური ეფექტით სლაიდების შეცვლისას (სლაიდი იჭრება შუაზე და მოძრაობს სხვადასხვა მიმართულებით და მის ადგილს იკავებს ახალი).  შესაძლებელია კლავიატურის ნავიგაცია.  უახლესი ვერსია ყოველთვის არის Github-ზე.
32. 3D გამოსახულების სლაიდერის ახალი ვერსია "Slicebox"


ახალი ვერსიაგანხორციელებული ცვლილებებით და ახალი ფუნქციების დამატებით: ახლა 3D სლაიდერი გახდა მასშტაბური, ამის ნახვა შეგიძლიათ ბრაუზერის ფანჯრის შემცირებისას;  დამატებულია Firefox-ის მხარდაჭერა;  სლაიდის აღწერილობაში უკვე შეგიძლიათ გამოიყენოთ HTML შინაარსი (ადრე აღწერილობა ამოღებული იყო ბმულის ატრიბუტიდან მასში HTML ტეგების გამოყენების შესაძლებლობის გარეშე).  დემო გვერდზე შეგიძლიათ ნახოთ მოდულის გამოყენების 4 ვარიანტი. უახლესი ვერსიაცხოვრობს Github.com-ზე.
ეფექტი ძალიან ჰგავს 3D CU3ER Flash გალერეას (დემო , ჩამოტვირთვა), მხოლოდ ეს 3D სლაიდერი მზადდება არა ფლეშ ტექნოლოგიების, არამედ Javascript-ის დახმარებით.
33.jQuery მოდული "PFold"


ექსპერიმენტული გადაწყვეტა.  დანამატი ახორციელებს 3D ეფექტს ნოტის გაშლის იმიტაციით. სხვადასხვა ვარიანტებიშესრულება: სამი მობრუნებით, ორი მობრუნებით და შემობრუნებით გაფართოებული ნოტის შემდგომი ცენტრირებით.
34.jQuery მოდული "Windy"


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