Jquery ուղղահայաց սահիչ՝ սլաքներով և նավիգացիայով: Պատասխանող սլայդերների ընտրություն

> >

Slider ոճերը

.slider-box( լայնությունը : 320px ; բարձրությունը : 210px , overflow : թաքնված ; ) .slider ( դիրքը : հարաբերական ; լայնությունը : 10000px , բարձրությունը : 210px ; ) .slider img ( float : ձախ ; ;-

Container.slider-box-ը նշում է սահիկի չափը: Overflow:hidden հատկությունը թաքցնում է բոլոր տարրերը, որոնք չեն մտնում տարրի շրջանակում:

Container.slider-ը դրված է մեծ լայնության վրա: Սա անհրաժեշտ է, որպեսզի բոլոր սլայդները տեղավորվեն դրա մեջ:

Սլայդները հավասարեցվում են՝ օգտագործելով float: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= $(".slider") .երեխաներ () .length ; // Սլայդերի քանակը սլայդերում:եթե (մարժա= (- լայնություն* (սլայդերԳումար- 1) ) // Եթե ընթացիկ սլայդը վերջինը չէ,( լուսանցք = լուսանցք-լայնություն; // ապա լուսանցքի արժեքը կրճատվում է սլայդի լայնությամբ:) ուրիշ ( // Եթե ցուցադրվում է վերջին սլայդը,$(".slider") .css("margin-left" , -width); // ապա block.slider-ը վերադառնում է իր սկզբնական դիրքին,լուսանցք=- լայնություն* 2 ; ) $(".slider") .animate (( marginLeft: margin) , 1000 ); // Block.slider-ը շարժվում է դեպի ձախ 1 սլայդով: } ;

Արդյունքը պարզ սահիչ է անսահման ավտոմատ ոլորմամբ:

Այս հոդվածում մենք կվերլուծենք, թե ինչպես է շատ հեշտ կայքի համար ստեղծել հարմարվողական սլայդեր՝ օգտագործելով CSS Flexbox և CSS փոխակերպումները:

Աղբյուրի կոդեր և սլայդերի ցուցադրություն

chiefSlider կոչվող սլայդերի նախագիծը տեղակայված է GitHub-ում: Դուք կարող եք գնալ դրան այս հղումով:

Սահող մեկ ակտիվ սլայդով (առանց օղակի).

Սլայդեր երեք ակտիվ սլայդներով (առանց օղակի).

Օրինակ, որը ցույց է տալիս, թե ինչպես կարող եք օգտագործել սահիչը հոդվածները պտտելու համար.

chiefSlider-ի առավելությունները

Մենք թվարկում ենք այս սլայդերի հիմնական առավելությունները.

• նախ նա չի ստեղծում տարրերի կլոններ (հատ) looping կազմակերպելու համար, ինչպես այն իրականացվում է, օրինակ, plugins-ներում OwlCarouselև սլացիկ;
• երկրորդ, դա կախված չէ գրադարանից jQuery; սա ոչ միայն հեռացնում է լրացուցիչ պահանջները, այլև հեշտացնում է այն.
• երրորդ, դա գործնականում որևէ փոփոխություն չի կատարում փաստաթղթի DOM-ում; միակ բանը, որ անում է, սլայդերի տարրերի CSS փոխակերպման արժեքներն ավելացնելն է կամ փոխելը.
• Չորրորդ, այն պարունակում է միայն նվազագույն հնարավորությունների հավաքածու; լրացուցիչ գործառույթներ կարող են ավելացվել կախված առաջադրանքից.
• հինգերորդ, այն հարմարվողական է, այսինքն. այն կարող է օգտագործվել ցանկացած կայքում; սլայդերի հարմարվողականությունը կազմաձևված է CSS-ի միջոցով.
• վեցերորդ, ակտիվ տարրերի քանակը կազմաձևված է CSS-ի միջոցով. սա նշանակում է, որ այն կարող է օգտագործվել մեկ ակտիվ սլայդով կամ ցանկացած թվով ակտիվ սլայդներով կարուսել ստեղծելու համար:

chiefSlider-ի տեղադրում

Սահիկի տեղադրումը կատարվում է 3 քայլով.

• ավելացնել chiefSlider-ի CSS-ը էջին կամ էջին միացված CSS ֆայլին.
• տեղադրեք սլայդերի HTML կոդը էջի անհրաժեշտ տեղում;
• տեղադրեք JavaScript կոդը էջի մեջ կամ էջի հետ կապված js ֆայլի մեջ:

Ցանկալի է նվազագույնի հասցնել CSS և JavaScript կոդը, այս գործողությունը կապահովի էջի ավելի արագ բեռնում։

Ինչպես նախագծել պարզ կայքի սլայդեր (առանց օղակի)

Սլայդերի ստեղծում chiefSliderբաղկացած կլինի HTML կոդ, CSS և JavaScript (առանց jQuery) ստեղծումից:

Slider HTML կոդը chiefSlider:

Ինչպես տեսնում եք, սլայդերն ունի շատ պարզ HTML ճարտարապետություն: Այն սկսվում է հիմնական բլոկից, որն ունի սլայդերի դաս: Այս բլոկը բաղկացած է 3 տարրից.

Առաջին տարրը .slider__wrapper է: Այն գործում է որպես փաթաթող .slider__item տարրերի (սլայդների) համար:

Մյուս երկու տարրերը (.slider__control) տեսողականորեն ներկայացնում են կոճակները: Դրանք կօգտագործվեն սլայդում նավարկելու համար, այսինքն. անցնել նախորդ և հաջորդ տարրերին:

css կոդը chiefSlider-ի համար.

/* ՀԻՄՆԱԿԱՆ STYLES */ .slider ( դիրքը՝ հարաբերական; հորդառատ՝ թաքնված; ) .slider__wrapper (ցուցադրում՝ ճկուն; անցում. փոխակերպում 0.6 վրկ հեշտություն; /* 0.6 սլայդի անցման տևողությունը վայրկյաններով */ ) .slider__item ( flex: 0 0 50%; /* սահմանում է ակտիվ սլայդների քանակը (այս դեպքում՝ 2 */ առավելագույն լայնությունը՝ 50%; /* սահմանում է ակտիվ սլայդների քանակը (այս դեպքում՝ 2 */) * / .slider__control ( դիրքը՝ բացարձակ; ցուցադրում՝ ոչ մեկը; վերև՝ 50%, փոխակերպում՝ translateY (-50%); հավասարեցրեք տարրերը՝ կենտրոն; հիմնավորեք բովանդակությունը՝ կենտրոն; տեքստը հավասարեցրեք՝ կենտրոն; լայնությունը՝ 40px; / * կոճակի լայնությունը */ բարձրությունը՝ 50 px; /* կոճակի բարձրությունը */ անթափանցիկությունը՝ .5; /* թափանցիկությունը */ ֆոնը՝ #000; /* ֆոնի գույնը */ .slider__control_show (ցուցադրում՝ flex;) .slider__control:hover, . slider__control:focus ( text-decoration՝ none; ուրվագիծը՝ 0; անթափանցիկություն՝ .9; /* թափանցիկություն */ ) .slider__control_left ( ձախ՝ 0; ) .slider__control_right (աջ՝ 0; ) .slider__control::be «»; ցուցադրում lay: inline-block լայնությունը՝ 20px /* պատկերակ (սլաք) լայնություն */ բարձրություն՝ 20px; /* պատկերակ (սլաք) բարձրություն */ ֆոն՝ թափանցիկ առանց կրկնվող կենտրոնի կենտրոն; ֆոնի չափը՝ 100% 100% ) .slider__control_left::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="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), // block main element _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper .slider-item _sliderI-ի համար = _mainElement.querySelectorAll(".slider__item"), // տարրեր (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // վերահսկում է _sliderControlLeft = _mainElement.querySelector_"), //lider կոճակը: "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // կոճակը "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).լայնություն), // փաթաթման լայնությունը _itemWidth = parseFloat(I) / մեկ տարրի լայնությունը _positionLeftItem = 0, // ձախ ակտիվ տարրի դիրքը _transform = 0, // փոխակերպման արժեքը slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // քայլի չափը (փոխակերպման համար) _items = ; // տարրերի զանգված // զանգվածի լրացում _items _sliderItems.forEach(function (հատ, ինդեքս) ( _items.push(( տարր՝ տարր, դիրք՝ ինդեքս, փոխակերպում՝ 0 )); )); var position = ( 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 (_sliderControlLeft.classList.contains" _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (ուղղություն === «ձախ») (եթե (_positionI)<= 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 ցուցադրություն

Ինչպե՞ս ստեղծել շրջադարձային սլայդեր:

Սլայդները կարող են օղակավորվել՝ փոխակերպելով .slider__item տարրերը:

Դա անելու համար անհրաժեշտ է կապել դրա ընթացիկ դիրքի և փոխակերպման արժեքները յուրաքանչյուր տարրի հետ.slider__item:

Ամենաօպտիմալը, այս գործողությունները կարող են իրականացվել _items զանգվածի միջոցով.

var_հատեր = ; // զանգվածը լրացնելով կետերով.slider__item _sliderItems.forEach(function (հատ, ինդեքս) ( _items.push(( նյութ՝ տարր, դիրք՝ ինդեքս, փոխակերպում՝ 0 )); ));

Բայց դուք կարող եք կապել տվյալները տարրերին ոչ միայն զանգվածի միջոցով, այլ օրինակ՝ օգտագործելով տվյալների ատրիբուտներ։ Սակայն DOM-ի գործառնություններն ամենադանդաղն են և ռեսուրսների ինտենսիվությունը, դրանք խորհուրդ չի տրվում օգտագործել, երբ դա հնարավոր է անել այլ կերպ:

Հաջորդ քայլը .slider__item տարրերը նվազագույն և առավելագույն դիրքով հաշվարկելու գործառույթներ ստեղծելն է:

var position = ( getItemMin: ֆունկցիա () ( var indexItem = 0; _items.forEach(function (հատ, ինդեքս) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( 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 -= _քայլ; ) եթե (ուղղություն === «ձախ») ( _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 տարրի փոխակերպումը (այսինքն՝ գործողություններ, ինչպես ալգորիթմում՝ առանց օղակի)։
Բայց եթե նման տարր չկա, ապա բացի transformation.slider__wrapper ից կատարվում են մի շարք այլ գործողություններ։  Նախ, տարրերի զանգվածը փնտրում է տարր նվազագույն դիրքով.  Այս տարրը ստանալուց հետո այն դրված է դիրքը, որի արժեքը հավասար կլինի ընթացիկ աջ տարրի արժեքին + 1.  Եվ, իհարկե, դա անում է նրա կերպարանափոխությունը, այնպիսի տոկոսով, որ ավարտվում է վերջում, այսինքն.  վերջին տարրից հետո:

Նախորդ սլայդին անցնելու համար կատարվում են նույն քայլերը, բայց հակառակ ուղղությամբ:

Բացի այդ, շրջադարձային սլայդերի համար ձեզ հարկավոր չէ փոխել ձախ և աջ կոճակների տեսանելիությունը:  Այս կոճակները միշտ կցուցադրվեն սլայդերի այս տարբերակում:
Դա անելու համար ձեզ հարկավոր է.
հեռացնել slider__control_show դասը «Right» հսկիչից;
 
.slider__control ընտրիչի CSS-ում փոխեք ցուցադրման հատկության արժեքը flex-ի:
 Slider Demo 
Ինչպե՞ս ստեղծել սլայդեր շրջադարձային և ավտոմատ սլայդների անցումով:
Դուք կարող եք ծրագրավորել սլայդների ավտոմատ փոփոխությունը որոշակի պարբերականությամբ՝ օգտագործելով setInterval ֆունկցիան:
Var _cycle = ֆունկցիա (ուղղություն) ( if (!_config.isCycling) ( վերադարձ; ) _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);
Տեսանելիության փոփոխության իրադարձությունների մշակողի գործառույթը.
// կարգավորել «Փաստաթղթի տեսանելիության փոփոխություն» իրադարձություն 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 
 

 

 

 

 

 

 

 
 

 
Ներկայացված օրենսգրքում, ինչպես տեսնում ենք, ոչ մի բարդ բան չկա, slider-փաթաթելսահմանում է ընդհանուր դիրքըև սահիչը հարթեցնում է էկրանի կեսին:  Պարամետր ակտիվ-սլայդսահմանում է պատկերի չափն ու բարձրությունը՝ ըստ նրա երկարության:  Եվ սահիչցույց է տալիս միայն ակտիվ պատկերը:
Հիմա եկեք ստեղծենք և բացենք ֆայլը style.cssև այնտեղ գրեք մեզ անհրաժեշտ նշագրումը.
@import url ("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  մարմին (գույն՝ #4f4f5a; տառատեսակ-ընտանիք՝ «Roboto», sans-serif; տառաչափ՝ 16px; լիցք՝ 0; լուսանցք՝ 0; ) #slider-wrap( max-width:800px; margin՝ 0 auto; margin-top՝ 80px; ) #active-slide (լայնությունը՝ 100%; ցուցադրում՝ աղյուսակ, դիրք՝ հարաբերական, արտահոսք՝ թաքնված; -webkit-user-select՝ ոչ մեկը; -moz-user-select՝ ոչ մեկը; -ms- user-select՝ ոչ մեկը; -o-user-select՝ ոչ մեկը; user-select՝ ոչ մեկը; ; լիցք՝ 0; -վեբկիտ-անցում. 1վ; -o-անցում. 1վ; անցում. -դուրս; անցում-ժամկետ-ֆունկցիա՝ ease-in-out;) .slide(լայնությունը՝ calc(100%/4); ցուցակի ոճը՝ ոչ մեկը; ցուցադրումը՝ inline; float՝ ձախ;) .slide img (լայնությունը՝ 100%; ) .Radio-But( margin-top:10px; text-align:centre;) :hidden;text-indent:-9999px;background:url(radioBg.p  նգ) կենտրոնական ներքևի առանց կրկնության;  ) .Radio-But .ctrl-select:shover ( կուրսորը:ցուցիչ; ֆոնի դիրքը:կենտրոն կենտրոն; ) .Radio-But .ctrl-select.active ( background-position:centre top; :block; լայնություն՝ 40px, բարձրություն՝ 100%, դիրք՝ բացարձակ, վերև՝ 0, հորդառատ՝ թաքնված; text-indent:-999px; ֆոն՝ url("arrowBg.png") ձախ կենտրոնի առանց կրկնության; անթափանցիկություն:0.5 ; z-index:3; outline:none !կարևոր; ) #prewbutton (ձախ:10px; ) #nextbutton (աջ:10px; ֆոն:url(arrowBg.png) աջ կենտրոն առանց կրկնության; ) #prewbutton:shover, # հաջորդ կոճակ: սավառնել (անթափանցիկություն: 1; )
Ոճային սեփականություն slider-փաթաթելգրի առնել լայնությունը- Ձեր նկարների առավելագույն երկարությունը:
Ոճային սեփականություն #սահիկ (լայնությունը՝ հաշվարկ (100% * 4); )և .սլայդ (լայնությունը՝ հաշվարկ (100%/4); )նշեք ձեր սլայդերի նկարների քանակը:  Մեր օրինակում կան 4.
Եթե ​​առաջ/հետևի սլաքները խանգարում են ձեր սահիկի տեսանելիությանը, դրանք կարող են անտեսանելի դառնալ և կհայտնվեն սավառնելիս:  Դա անելու համար պարամետրերում prewԲայցև հաջորդԲայց, անթափանցիկության հատկությունը սահմանեք 0:
Հիմա եկեք ստեղծենք և բացենք մեր ֆայլը slider.js, որը կպարունակի սլայդերի կոդը:  Մի մոռացեք ներառել jQuery գրադարանը:
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = ֆունկցիա(սլաք)(clearTimeout(slideTime); if(arrow == "next")( 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)")); ) * (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("next"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) (adderSpan += " «+ ինդեքս +»";
 });
 $("
«+adderSpan+»
").appendTo("#slider-wrap");$(".ctrl-select:first").addClass("active");$(".ctrl-select").click(function()(var goToNum): = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide («հաջորդ»)), TimeView);) ) $(«#slider-wrap»). սավառնել (function() (clearTimeout(slideTime); դադար = ճշմարիտ;), գործառույթ () (դադար = կեղծ; rotator () ;)); var clicking = false; var prevX; $("slide").mousedown(function(e)( click = true; prevX = e.clientX; )); $(".slide").mouseup( ֆունկցիա() (կտտացնելով = կեղծ; ));$(փաստաթուղթ).մկնիկը(գործառույթ()(կտտացնելով = կեղծ;));$(".սլայդ").mousemove(function(e)( if(սեղմելով == ճշմարիտ ) (եթե (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); }
 if(e.clientX >prevX) ( animSlide ("prew"); clearTimeout (slideTime); ) սեղմում = false;  )));  $(".slide").hover().css("cursor", "ցուցիչ");  պտտվող ();  ));
Գործառույթ animSlideընդունում է երեք տեսակի արժեքներ՝ հաջորդ, նախնական, թվային արժեք:  Հաջորդ պարամետրը փոխում է հաջորդ սլայդը, prew-ը վերադարձնում է նախորդը, իսկ թվային արժեքը հատուկ սլայդն է, որն ընտրված է սլայդի տակ գտնվող ռադիոկոճակի միջոցով:
Ներկայացված սլայդերը օգտագործել են նկարներ https://pixabay.com/ վեբ ռեսուրսից։
Սա jQuery-ում գրված արձագանքող հպման սլայդեր է:  Այս plugin-ի շարժիչը օգտագործում է CSS3 անիմացիաներ, բայց միևնույն ժամանակ, բրաուզերների հին տարբերակների համար նախատեսված են հետադարձ կապեր:  Glide.js-ը պարզ է և թեթև:
Օգտագործումը
1. Ներառեք jQuery
Միակ plugin-ի կախվածությունը jQuery-ն է, որը մենք պետք է նախ ներառենք.
 
2. Ներառեք Glide.js-ը
 
3. Ավելացնել html
Եկեք միացնենք բազային ոճերը:
 
Եկեք փաթաթենք սահիկի html կառուցվածքը:
 

 

4. Նախնականացում
Սլայդերի գործարկումը լռելյայն կարգավորումներով...
 
... կամ հարմարեցրեք այն ձեզ համար
 
Կարգավորումներ
Հասանելի տարբերակների ցանկ.
Պարամետր
Կանխադրված արժեք
Տեսակ
Նկարագրություն
Ավտոմատ միացում
4000

int/bool
Ավտոմատ ոլորել (կեղծ՝ անջատելու համար)
hoverpause
ճիշտ
բուլ
Դադարեցնել ավտոմատ ոլորումը, երբ մկնիկը սավառնում է սահիկի վրա
անիմացիոն ժամանակ
500

միջ
!!!  Այս տարբերակը աշխատում է, եթե զննարկիչը ՉԻ աջակցում css3-ին:  Եթե ​​css3-ը աջակցվում է բրաուզերի կողմից, ապա այս պարամետրը պետք է փոխվի .css ֆայլում!!!
նետերը
ճիշտ
bool/string
Ցույց տալ/թաքցնել/կցել սլաքները:  Ճիշտ է սլայդերի կոնտեյներով սլաքները ցուցադրելու համար:  Կեղծ՝ թաքցնելու համար:  Կարող եք նաև նշել դասի անունը (օրինակ՝ «.class-name») հատուկ html կոդ կցելու համար։
arrowsWrapperClass
slider-arrows
լար
Դաս, որը վերագրվելու է կոնտեյներին սլաքներով
arrowMainClass
slider arrow
լար
Հիմնական դաս բոլոր սլաքների համար
arrowRightClass
slider-arrow-աջ
լար
Դաս աջ սլաքի համար
arrowLeftClass
slider-arrow-ձախ
լար
Դաս ձախ սլաքի համար
arrowRightText
հաջորդ
լար
Տեքստ աջ սլաքի համար
arrowLeftText
նախորդ
լար
Տեքստ ձախ սլաքի համար
նավ
ճիշտ
bool/string
Ցույց տալ/թաքցնել/կցել սլայդների նավիգացիան:  Ճիշտ է ցուցադրել:  Կեղծ՝ թաքցնելու համար
navCenter
ճիշտ
բուլ
Կենտրոնում նավարկություն
navClass
slider-nav
լար
Նավիգացիոն կոնտեյների դաս
navItemClass
slider-nav_item
լար
Դաս նավարկության տարրի համար
navCurrentItemClass
slider-nav__item-- ընթացիկ
լար
Դաս՝ ընթացիկ նավիգացիոն տարրի համար
ստեղնաշար
ճիշտ
բուլ
Ոլորեք սլայդը՝ սեղմելով ձախ/աջ կոճակները
touch Հեռավորություն
60

int/bool
Հպման աջակցություն (հպում):  Այս գործառույթն անջատելու համար սխալ է:
նախքան Init
ֆունկցիա () ()
ֆունկցիան
Հետզանգ, որը կաշխատի նախքան plugin-ի սկզբնավորումը
afterInit
ֆունկցիա () ()
ֆունկցիան
Հետադարձ զանգ, որը կաշխատի plugin-ի սկզբնավորումից հետո
անցումից առաջ
ֆունկցիա () ()
ֆունկցիան
Հետադարձ զանգ, որը կաշխատի նախքան սահիչը ոլորելը
անցումից հետո
ֆունկցիա () ()
ֆունկցիան
Հետադարձ զանգ, որը կաշխատի սահիչը ոլորելուց հետո
API
API-ն օգտագործելու համար գրեք glide փոփոխականի վրա:
var glide = $(".slider").glide().data ("api_glide");
API-ի մեթոդներն այժմ հասանելի են ձեզ:
Glide.jump (3, console.log ("Woooo!"));
.current() - Վերադարձեք ընթացիկ կողմի համարը
.play() - Սկսեք ավտոմատ ոլորումը
.pause() - Դադարեցրեք ավտոմատ ոլորումը
.next(callback) - Ոլորեք սահիչը առաջ
.prev(callback) - Ոլորեք սահիչը հետ
.jump(distance, callback) - Անցնել կոնկրետ սլայդ
.nav(target) - Կցեք նավիգացիան որոշակի տարրի (օրինակ՝ «body», «.class», «#id»)
.arrows(target) - Կցեք սլաքները որոշակի տարրի վրա (օրինակ՝ «body», «.class», «#id»)

1. jQuery Fresco Plugin
Պատասխանող jquery պատկերասրահ (չափափոխվում է, երբ էկրանի լուծաչափը փոխվում է) ցուցադրվում է ելնող պատուհանում՝ մանրապատկերներով և պատկերների ենթագրերով:  jquery Fresco Gallery-ը ճիշտ է աշխատում բրաուզերների մեծ մասում, այդ թվում՝ IE6+, Firefox 3+, Chrome 5+, Opera 9+:  Այս հավելվածի անվճար տարբերակը կարող է օգտագործվել միայն ոչ առևտրային նախագծերում:
2. «Ադապտոր» սահիկ


Սլայդեր տարբեր անցումային էֆեկտներով (7 տարբեր էֆեկտներ, ներառյալ 3D):  Նախագիծ Github-ում։
3. Slider plugin տարբեր էֆեկտներով «jQ-Tiles»


Փլագին տարբեր անցումային էֆեկտներով, կարգավորվող սլայդի արագությամբ, ավտոմատ ոլորման գործառույթով:
4. jQuery plugin «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. Հովեր CSS3 էֆեկտը


10. CSS3 բացվող ընտրացանկ


11.iOSlider


Սահիչ, որը նախատեսված է շարժական սարքերում աշխատելու համար:
12. CSS3 բեռնման ցուցիչ


13. CSS3 սավառնող էֆեկտ


14. «Product Colorizer» jQuery Plugin


Փլագինը թեթև լուծում է տարբեր գույներով ապրանքները դիտելու համար (համապատասխան, օրինակ, առցանց հագուստի խանութների համար, որպեսզի այցելուները ընտրեն գունային սխեմանարտադրանք մի քանի տարբերակներից):  Փլագինը յուրաքանչյուր ապրանքի համար պահանջում է ընդամենը երկու պատկեր (բոլոր գույները կտեղադրվեն որպես դիմակ):  Փլագինը աշխատում է բոլոր հիմնական բրաուզերներում, ներառյալ IE7+ (կաշխատի նաև IE6-ում, եթե շտկեք PNG թափանցիկության ցուցադրումը):  Նախագիծ GitHub-ում:
15. CSS3 անիմացիոն գծապատկերներ


16. Պատկերի վրա սեղմելիս ծածկույթի էֆեկտի ստեղծում


Երբ սեղմում եք նկարի վրա, այն մթնում է՝ անցնելով հետին պլան և հայտնվում են ենթագրերով պարբերություններ։  Այսպիսով, դուք կարող եք տալ պատկերի վրա տեղակայված տարրերի համառոտ նկարագրությունը:
17. Էջի նավարկություն բացվող մենյուի տեսքով


Բացվող մենյուի տեսքով հարմար փաստաթղթերի նավարկություն իրականացնելու լուծում:  Բովանդակությունը ամրագրված է էկրանի վերևում և միշտ մնում է այցելուի տեսադաշտում։  Երբ ընտրացանկից որևէ բաժին եք ընտրում, էջը սահուն պտտվում է դեպի փաստաթղթի ընտրված հատվածը:
18. CSS3 պատկերասրահ՝ սավառնող էֆեկտով


Երբ սավառնում եք պատկերի վրա, լուսանկարների արագ փոփոխություն է տեղի ունենում:  Պատկերասրահն իրականացվում է երկու տարբերակով՝ նկարների նկարագրությամբ, որը հայտնվում է այն բանից հետո, երբ այցելուն կուրսորը հեռացնում է պատկերասրահից և առանց նկարագրության։
19. jQuery Parallax Slider


20. CSS3 սավառնող անիմացիա բլոկների վրա


21. CSS3 jQuery թռուցիկ վահանակ
Սեղմեք ցուցադրական էջի էկրանի ներքևի սլաքի վրա՝ բացվող պատկերակները տեսնելու համար:
22. Անվճար HTML5 պատկերասրահ «Juicebox Lite»


Կայքի համար շատ ֆունկցիոնալ նոր պատկերասրահ:  Պատկերասրահը կարող է լինել ինչպես մանրապատկերներով, այնպես էլ առանց մանրապատկերներով, պատկերի նկարագրությամբ կամ առանց դրա, այն կարող է ընդլայնվել ամբողջ էկրանով կամ ցուցադրվել ֆիքսված չափերով էջի վրա:  Դեմո էջում դուք կարող եք ընտրել պատկերասրահի տեսակը, որը ձեզ դուր է գալիս:  Ներբեռնման համար հասանելի է պատկերասրահի անվճար տարբերակը:  Ավելի առաջադեմ ֆունկցիոնալության և մշակողի լոգոն հեռացնելու համար դուք ստիպված կլինեք վճարել:
23. «JQVMap» հավելված


24. CSS3 Parallax Slider


25. jQuery ֆոտոշարք մանրապատկերներով


Պատասխանող պատկերասրահի, պատկերների և մանրապատկերների չափերը փոխվում են դիտարկիչի պատուհանի չափերով:
26. jQuery բովանդակության slider plugin «Horinaja»


Փլագինը հեշտ է տեղադրվում, հարմարեցվում է, խաչաձեւ զննարկիչով:  Ցանկացած HTML բովանդակություն կարող է գործել որպես սլայդ, ոչ միայն պատկերներ:  Դուք կարող եք ոլորել սլայդների միջով՝ օգտագործելով մկնիկի անիվը, մինչ կուրսորը գտնվում է սլայդի տարածքում:
27. jQuery Pikachoose slider plugin


Երեք տարբերակով՝ պատկերների պարզ փոփոխության իրականացում առանց նկարագրության և մանրապատկերների;  սլայդեր պատկերի ենթագրերով և մանրապատկերներով;  մատնապատկերներով սահեցրեք և ավելացրեց, որ բացելով ավելի մեծ պատկեր FancyBox էֆեկտով թռուցիկ պատուհանում:  Վերջին տարբերակը միշտ կարելի է գտնել Github-ում:
28. Որոշ հարմարեցված CSS ոճեր բացվող պատուհանների համար


Հինգ տարբեր ոճերի անկում, օգտագործելով տարբեր CSS տեխնիկա:
29. Ռեստորանի մենյու՝ անիմացիոն 3D էֆեկտով


Հետաքրքիր CSS jQuery տեղեկատվության ներկայացում էջում։  Սեղմելով հղման վրա՝ բացվում է գրքույկի ընտրացանկը, և այցելուն կարող է ավելին կարդալ բացվող պատուհանում ներկայացված ուտեստների մասին։  Անիմացիան ճիշտ չի ցուցադրվում IE-ում:
30. Elastislide plugin


Ռետինի իրականացում հարմարվողական կարուսել(պատկերների ուղղահայաց և հորիզոնական կարուսել) և պատկերասրահներ։  Երբ զննարկիչի պատուհանը կրճատվում է, պատկերների քանակը կրճատվում է մինչև որոշակի նվազագույն արժեք, իսկ հետո մնացած պատկերների չափերը մեծանում են:  Նախագիծ Github-ում։
31. Թարմ CSS3 jQuery Slit Slider


Պատասխանող սլայդերի պլագին (լայնությունը կարող է սահմանվել որպես տոկոս, և այն ինքնաբերաբար կմեծանա) երկու ոճով՝ հետաքրքիր անիմացիոն էֆեկտով սլայդները փոխելիս (սլայդը կիսով չափ կտրված է և տեղափոխվում է տարբեր ուղղություններով, և դրա տեղը զբաղեցնում է նորը):  Հնարավոր է նավարկություն ստեղնաշարով:  Վերջին տարբերակը միշտ գտնվում է Github-ում:
32. «Slicebox» 3D պատկերի սլայդերի նոր տարբերակը


Նոր տարբերակկատարված փոփոխություններով և նոր հնարավորությունների ավելացմամբ. այժմ 3D սլայդերը դարձել է մասշտաբային, դուք կարող եք դա տեսնել, երբ կրճատեք բրաուզերի պատուհանը;  Ավելացված աջակցություն Firefox-ի համար;  սլայդի նկարագրության մեջ դուք արդեն կարող եք օգտագործել HTML բովանդակություն (նախկինում նկարագրությունը հանվել էր հղումի հատկանիշից՝ առանց դրանում HTML թեգեր օգտագործելու հնարավորության):  Դեմո էջում դուք կարող եք տեսնել հավելվածի օգտագործման 4 տարբերակ: Վերջին տարբերակըապրում է Github.com-ում:
Էֆեկտը շատ նման է 3D CU3ER Flash պատկերասրահին (դեմո , ներբեռնում), միայն այս 3D սլայդերը պատրաստված է ոչ թե ֆլեշ տեխնոլոգիաների, այլ javascript-ի օգնությամբ։
33.jQuery Plugin «PFold»


Փորձարարական լուծում.  Պլագինը իրականացնում է 3D էֆեկտ՝ բացվող նոտայի իմիտացիայով: Տարբեր տարբերակներկատարումներ՝ երեք պտույտով, երկու պտույտով և շրջադարձ՝ ընդլայնված նոտայի հետագա կենտրոնացմամբ։
34.jQuery Plugin «Windy»


Փլագին բովանդակության մեջ նավարկելու համար, ինչպիսիք են պատկերները:  Լուսանկարները շրջելիս դրանք ցրվում են տարբեր ուղղություններով (էֆեկտը որոշակիորեն հիշեցնում է քարտերի բաշխումը. թղթախաղպոկեր):  Նավիգացիայի համար կարող եք օգտագործել ձախ / աջ կոճակները կամ սահիչը (տես ցուցադրական էջը տարբեր տարբերակների համար):  Նախագիծը միացված է