Jquery vertikālais slīdnis ar bultiņām un navigāciju. Atsaucīgu slīdņu izvēle

> >

Slīdņu stili

.slider-box(platums: 320px; augstums: 210px; pārpilde: paslēpts; ) .slider(pozīcija: relatīvais; platums: 10000px; augstums: 210px; ) .slider img( pludiņš: pa kreisi); z-index

Konteiners.slider-box norāda slīdņa izmēru. Rekvizīts overflow:hidden slēpj visus elementus, kas neietilpst elementa darbības jomā.

Slīdnis konteiners ir iestatīts uz lielu platumu. Tas ir nepieciešams, lai tajā ievietotu visus slaidus.

Slaidi tiek līdzināti, izmantojot rekvizītu float:left.

Slīdņu bloku shematiskais izkārtojums ir parādīts zemāk.

Skripts

Slaidu kustība tiks veikta, vienmērīgi mainot konteinera margin-left īpašību.slider.

$(funkcija () ( var platums= $(".slider-box" ) .width () ; // Slīdņa platums. intervāls = 4000 ; // Intervāls slaidu maiņai.$(.slider img:last" ) .clone () .prependTo (.slider" ) ; // Pēdējā slaida kopija tiek ievietota sākumā.$() .eq (1 ) .clone () .appendTo (.slider" ) ; // Beigās tiek ievietota pirmā slaida kopija. // Container.slider tiek pārvietots pa kreisi par viena slaida platumu. setInterval("animācija()" , intervāls) ; // Palaiž animācijas() funkciju, lai veiktu slaida pāreju.) ) ; function animation() ( var margin = parseInt($(.slider" ) .css ("marginLeft" ) ) ; // Pašreizējā bloka nobīde.slīdnis platums= $(.slider-box" ).width() , // Slīdņa platums. slidersAmount= $(".slider" ) .children () .length ; // Slaidu skaits slīdnī. if (margin!= (- platums* (slidersAmount- 1 ) ) ) // Ja pašreizējais slaids nav pēdējais,( mala = malas platums; // tad piemales vērtība tiek samazināta par slaida platumu.) cits ( // Ja tiek rādīts pēdējais slaids,$(.slider" ) .css("margin-left" , -width) ; // pēc tam block.slider atgriežas sākotnējā pozīcijā, mala=- platums* 2 ; ) $(.slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider pārvietojas pa kreisi par 1 slaidu. } ;

Rezultāts ir vienkāršs slīdnis ar bezgalīgu automātisku ritināšanu.

Šajā rakstā mēs analizēsim, kā ir ļoti viegli izveidot vietnei adaptīvu slīdni, izmantojot CSS Flexbox un CSS transformācijas.

Avota kodi un slīdņa demonstrācija

Slīdņa projekts ar nosaukumu chiefSlider tiek mitināts vietnē GitHub. Jūs varat doties uz to, izmantojot šo saiti.

Slīdnis ar vienu aktīvu slaidu (bez cilpas):

Slīdnis ar trim aktīviem slaidiem (bez cilpas):

Piemērs, kas parāda, kā varat izmantot slīdni, lai pagrieztu rakstus:

ChiefSlider priekšrocības

Mēs uzskaitām šī slīdņa galvenās priekšrocības:

• pirmkārt, viņš nerada elementu klonus (prece) organizēt cilpu veidošanu, kā tas tiek īstenots, piemēram, spraudņos Pūces karuselis un gluds;
• otrkārt, tas nav atkarīgs no bibliotēkas jQuery; tas ne tikai novērš papildu prasības, bet arī atvieglo darbu;
• treškārt, tas ir praktiski neveic nekādas izmaiņas dokumenta DOM; vienīgais, ko tas dara, ir pievienot vai mainīt slīdņa elementu CSS transformācijas vērtības;
• Ceturtkārt, tas satur tikai minimālais funkciju komplekts; atkarībā no uzdevuma var pievienot papildu funkcionalitāti;
• piektkārt, tas ir adaptīvs, t.i. to var izmantot jebkurā vietnē; slīdņa pielāgošanās spēja ir konfigurēta, izmantojot CSS;
• sestkārt, aktīvo elementu skaits tiek konfigurēts, izmantojot CSS; tas nozīmē, ka to var izmantot, lai izveidotu karuseli ar vienu aktīvu slaidu vai jebkuru aktīvo slaidu skaitu.

ChiefSlider instalēšana

Slīdņa instalēšana tiek veikta 3 soļos:

• pievienot lapai vai lapai pievienotajam CSS failam ChiefSlider CSS;
• ievieto slīdņa HTML kodu vajadzīgajā vietā lapā;
• ievietojiet JavaScript kodu lapā vai ar lapu saistītajā js failā.

Vēlams samazināt CSS un JavaScript kodu, šī darbība nodrošinās ātrāku lapas ielādi.

Kā izveidot vienkāršu vietnes slīdni (bez cilpas)

Slīdņa izveide galvenais Slīdnis sastāvēs no HTML koda, CSS un JavaScript izveides (bez jQuery).

Slīdnis HTML kods galvenais Slīdnis:

Kā redzat, slīdnim ir ļoti vienkārša HTML arhitektūra. Tas sākas ar galveno bloku, kurā ir slīdņa klase. Šis bloks sastāv no 3 elementiem.

Pirmais elements ir .slider__wrapper . Tas darbojas kā .slider__item elementu (slaidu) iesaiņojums.

Pārējie divi elementi (.slider__control) vizuāli attēlo pogas. Tie tiks izmantoti, lai pārvietotos pa slaidu, t.i. pāriet uz iepriekšējo un nākamo elementu.

css kods ChiefSlider:

/* BASIC STYLES */ .slider ( pozīcija: relatīvā; pārpilde: slēpta; ) .slider__wrapper ( displejs: elastīgs; pāreja: pārveidošana 0,6 s vieglums; /* 0,6 slaida pārejas ilgums sekundēs */ ) .slider__item ( flex: 0 0 50%; /* nosaka aktīvo slaidu skaitu (šajā gadījumā 2 */ max-width: 50%; /* definē aktīvo slaidu skaitu (šajā gadījumā 2 */ ) /* STILI ATPAKAĻ UN UZ PRIEKŠU POGU * / .slider__control ( pozīcija: absolūta; displejs: nav; augšā: 50%; pārveidot: translateY(-50%); līdzināt vienumus: centrā; attaisnot saturu: centrā; teksta līdzināšana: centrā; platums: 40 pikseļi; / * pogas platums */ augstums: 50 pikseļi; /* pogas augstums */ necaurredzamība: .5; /* caurspīdīgums */ fons: #000; /* fona krāsa */ ) .slider__control_show ( displejs: flex; ) .slider__control:hover, . slider__control:focus ( teksta noformējums: nav; kontūra: 0; necaurredzamība: .9; /* caurspīdīgums */ ) .slider__control_left ( pa kreisi: 0; ) .slider__control_right ( pa labi: 0; ) .slider__control::before (saturs: " "; displejs likt: inline-bloks platums: 20 pikseļi /* ikona (bultiņa) platums */ augstums: 20 pikseļi; /* ikona (bultiņa) augstums */ fons: caurspīdīgs centrālais centrs, bez atkārtošanās; fona izmērs: 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 ");)

Kā redzat, ir arī slīdņa CSS kods nav ļoti sarežģīti. Galvenās definīcijas, ar kurām var pielāgot slīdņa izskatu, ir sniegtas ar komentāriem.

CSS kods, kas nosaka aktīvo elementu skaits:

/* definē aktīvo slaidu skaitu (šajā gadījumā 2) */ flex: 0 0 50%; maksimālais platums: 50%

Šis kods iestata slīdņa aktīvo elementu skaitu uz 2.

Lai, piemēram, slīdnim būtu viens aktīvs elements, šīs definīcijas ir jāmaina uz šādām:

/* definē aktīvo slaidu skaitu (šajā gadījumā 1) */ flex: 0 0 100%; maksimālais platums: 100%

Radīšana adaptīvais slīdnis veikts, izmantojot mediju vaicājumus.

Piemēram, slīdnim, kuram ierīcēs ar mazu ekrānu jābūt vienam aktīvam slaidam, bet lielās ierīcēs - četriem:

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

JavaScript kods ChiefSlider:

"izmantojiet stingri"; var multiItemSlider = (funkcija () ( atgriešanas funkcija (selektors) ( var _mainElement = document.querySelector(selector), // bloķēt galveno elementu _sliderWrapper = _mainElement.querySelector(.slider__wrapper"), // iesaiņojums .slider-item _sliderItems = _mainElement.querySelectorAll(.slider__item"), // elementi (.slider-item) _sliderControls = _mainElement.querySelectorAll(.slider__control"), // kontrolē _sliderControlLeft = _mainElement. "LEFT" _sliderControlRight = _mainElement.querySelector(.slider__control_right"), // poga "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // iesaiņojuma platums _itemWidth = parseFloatthItems(_ComputedLidthItems). / viena elementa platums _positionLeftItem = 0, // kreisā aktīvā elementa pozīcija _transform = 0, // transformācijas vērtība slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // soļa lielums (transformācijai) _items = ; // vienumu masīvs // masīva aizpildīšana _items _sliderItems.forEach(funkcija (vienums, indekss) ( _items.push(( vienums: vienums, pozīcija: indekss, transformācija: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = funkcija (virziens) ( if (virziens === "pa labi") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= pozīcija .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.control_slider" _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (virziens === "pa kreisi") (if (_position)<= 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"); } } } }());

Galveno darbību JavaScript kodā veic funkcija _transformItem. Šī funkcija atkarībā no tai nodotā ​​virziena pārveido elementu.slider__wrapper .

Slīdņa inicializācija tiek veikta šādi:

Var slīdnis = multiItemSlider(.slider") Slīdņa demonstrācija

Kā izveidot cilpas slīdni?

Slaidus var veidot cilpas, pārveidojot .slider__item elementus.

Lai to izdarītu, ir jāsaista tā pašreizējās pozīcijas un transformācijas vērtības katram elementam.slider__item.

Visoptimālāk šīs darbības var veikt, izmantojot masīvu _items:

var_items = ; // masīva aizpildīšana ar items.slider__item _sliderItems.forEach(funkcija (vienums, indekss) ( _items.push(( vienums: vienums, pozīcija: indekss, transformācija: 0 )); ));

Bet jūs varat saistīt datus ar elementiem ne tikai caur masīvu, bet, piemēram, izmantojot datu atribūtus. Bet DOM operācijas ir vislēnākās un resursietilpīgākās, tās nav ieteicams lietot, ja to var izdarīt kā citādi.

Nākamais solis ir izveidot funkcijas, lai aprēķinātu .slider__item elementus ar minimālo un maksimālo pozīciju.

var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(funkcija (vienums, indekss)) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_preces.position) ( indexItem = indekss; ) )); atgriezties indekssItem; ), getMin: funkcija () ( return _items.position; ), getMax: funkcija () ( return _items.position; ) )

Pēdējais pamata solis kas jādara, ir jāprecizē funkcija _transformItem. Proti, pievienojiet tam kodu, kas mainīs elementa pozīciju .slider_item un veikt tās pārveidošanu.

Var _transformItem = funkcija (virziens) ( var nextItem; if (virziens === "pa labi") ( _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 -= _solis; ) if (virziens === "pa kreisi") ( _positionLeftItem--; if (_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 + "%)";
}

Patiesībā šeit viss ir vienkārši.
Piemēram, lai pārietu uz nākamo slaidu, vienumu masīvā vispirms tiek meklēts elements, kura pozīcija ir lielāka nekā pašreizējais labējais elements.slider_item .
Ja masīvā ir šāds elements, tad tiek veikta elementa .slider__wrapper transformācija (t.i., darbības, kā algoritmā bez cilpas).
Bet ja tāda elementa nav, tad papildus transformācijai.slider__wrapper tiek veiktas vairākas citas darbības.  Pirmkārt, vienumu masīvā tiek meklēts elements ar minimālo pozīciju.  Pēc šī elementa saņemšanas tas ir iestatīta pozīcija, kuras vērtība būs vienāda ar pašreizējā labā elementa vērtību + 1.  Un, protams, tā arī dara viņa pārvērtības, par tādu procentu, lai tas nonāktu beigās, t.i.  pēc pēdējā elementa.

Lai pārietu uz iepriekšējo slaidu, tiek veiktas tās pašas darbības, bet apgrieztā secībā.

Turklāt cilpas slīdnim nav nepieciešams pārslēgt kreiso un labo pogu redzamību.  Šīs pogas vienmēr tiks rādītas šajā slīdņa versijā.
Lai to izdarītu, jums ir nepieciešams:
noņemiet no vadīklas "Right" klasi slider__control_show;
 
CSS .slider__control atlasītājam mainiet displeja rekvizīta vērtību uz flex .
 Slīdņa demonstrācija 
Kā izveidot slīdni ar cilpu un automātisku slaidu pāreju?
Varat ieprogrammēt automātisku slaidu maiņu noteiktos intervālos, izmantojot funkciju setInterval.
Var _cycle = funkcija (virziens) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
Funkcija setInterval šajā piemērā izpildīs funkciju _transformItem ar regulāriem intervāliem, kas vienādi ar mainīgā _config.interval vērtību.
Turklāt, kad kursors tiek virzīts uz slīdni, ir vēlams pievienot pieturu slaidu automātiskai maiņai.
Šo funkcionalitāti varat ieviest šādi:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", funkcija () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", funkcija () ( clearInterval(_interval); _cycle() _config.direction); )); )
Kā apturēt automātisko slaidu pāreju, ja elements nav redzams lietotājam?
Automātiskās slaidu maiņas atspējošana ir noderīga divos gadījumos:
kad lapa (kurā atrodas šis slīdnis) nav aktīva;
 
kad slīdnis atrodas ārpus lapas darbības jomas.
Pirmo gadījumu var apstrādāt ar redzamības maiņas notikumu.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Funkcija redzamības maiņas notikumu apstrādātājam:
// apstrādājiet notikumu "Dokumenta redzamības izmaiņas" var _handleVisibilityChange = function () ( if (document.visibilityState === "slēpts") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Elementa redzamību var aprēķināt, izmantojot funkciju _isElementVisible:
Funkcija _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = funkcija (x, y) atgriezt document.elementFromPoint(x, y); if (rekt.pa labi< 0 || rect.bottom < 0 || rect.left >vWidth ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rekt.kreisais, taisnais.augš)) || elements.contains(elemFromPoint(taisn.labais, taisnais.augš)) || elements.contains (elemFromPoint(taisn.labais, taisnais.apakšā)) || elements.contains(elemFromPoint(rekt.kreisais, taisnais.apakšā)));  )
Varat izsaukt _isElementVisible, piemēram, funkcijas _transformItem sākumā.  Šī darbība atcels automātisko slaidu pāreju, ja slīdnis pašlaik atrodas ārpus skata loga.
Var _transformItem = funkcija (virziens) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Slīdnis, kas reaģē uz pārlūkprogrammas loga izmēru maiņu
Šī adaptīvā slīdņa versija atšķiras no iepriekšējām ar to, ka tā ļauj mainīt aktīvo elementu (slaidu) skaitu, mainot pārlūkprogrammas loga izmērus.  Parasti lietotāji nemaina pārlūkprogrammas izmērus, taču tas joprojām var notikt.
Tas tiek ieviests, izmantojot izmēru maiņas notikumu un masīvu _states.  Masīvu izmanto aprēķiniem.  Tās izmantošana ļaus atkārtoti inicializēt slīdni, kad tas nav nepieciešams.
Viens no efektīvi veidi lietotāju uzmanības piesaistīšana vietnes lapā ir kustīgas animācijas izveide.  Animācijas elementi palīdz vizuāli pastāstīt un parādīt lietotājiem par jūsu produktu.  Pēdējā laikā ļoti populāri ir kļuvuši bīdāmie paneļi, kā arī virkne citu efektu, kas parādās ritinot vai noklikšķinot uz attēla.  Tos sauc arī par slīdņiem, karuseļiem un slīdņiem.  Šajā rakstā mēs runāsim par adaptīva karuseļa tipa slīdņa izveidi ar vienmērīgu automātiskās ritināšanas efektu.
Līdz šim tīmeklī ir simtiem atsauksmju ar saitēm uz gataviem risinājumiem, taču lielākā daļa no tiem satur daudzas neizmantotas funkcijas, kas ievērojami samazina slīdņa veiktspēju, kā arī palēnina vietnes ielādi kopumā.  Profesionāli tīmekļa izstrādātāji vienmēr ir centušies izveidot programmatūras produktus, kas ir elastīgi pielāgojami, ar zemu slieksni papildu bibliotēku un spraudņu pievienošanai.  Tāpēc mūsu skripts izmanto minimālās prasības šāda slīdņa organizēšanai.  Darba funkcionalitāte ļauj iestatīt pārslēgšanas intervālu, ātrumu, kā arī konkrēta slaida izvēli.  Tālāk ir norādīti vairāki mainīgie, kas kontrolē paša slīdņa darbību.
laika saraksts- slaidu pārslēgšanas ātrums
laika skats- laiks izrādei
radiobut- pogas zem slaida ātrai navigācijai.  Noklusējuma vērtība ir patiesa, ja izmantojat false, pogas pazudīs.
Tagad sāksim!  Izveidojiet un atveriet failu index.htm 
 

 

 

 

 

 

 

 
 

 
Iesniegtajā kodā, kā redzam, nav nekā sarežģīta, slīdnis-wrap definē vispārējā nostāja un izlīdzina slīdni līdz ekrāna vidum.  Parametrs aktīvais slaids iestata attēla izmēru un augstumu atbilstoši tā garumam.  Un slīdni parāda tikai aktīvo attēlu.
Tagad izveidosim un atveram failu stils.css un ierakstiet tur mums vajadzīgo marķējumu:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  pamatteksts ( krāsa: #4f4f5a; fontu saime: "Roboto", sans-serif; fonta izmērs: 16 pikseļi; polsterējums: 0; mala: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide (platums: 100%; displejs: tabula; pozīcija: relatīvs; pārpilde: paslēpts; -webkit-user-select: nav; -moz-user-select: nav; -ms- user-select: nav; -o-user-select: nav; lietotāja atlase: nav; ) #slider( pozīcija: relatīvais; platums: calc (100% * 4); augšā: 0; pa kreisi: 0; piemale: 0 ; polsterējums: 0; -webkit-transition: 1s; -o-transition: 1s; pāreja: 1s; -webkit-transition-timing-function: atvieglot-in-out; -o-transition-timing-function: atvieglot-in -out; pārejas laika funkcija: atvieglot-in-out; .slide( platums: calc(100%/4); saraksta stils: nav; displejs: iekļauts; peldēt: pa kreisi; ) .slide img ( platums: 100%; ) .Radio-But( margin-top: 10px; text-align:center; ) .Radio-But .ctrl-select ( margin: 2px; display:inline-block; platums: 16px; augstums: 16px; overflow :hidden;text-indent:-9999px;background:url(radioBg.p  ng) centrs apakšā bez atkārtošanās;  ) .Radio-But .ctrl-select:hover ( kursors:rādītājs; fona pozīcija:centrs centrs; ) .Radio-But .ctrl-select.active (fona pozīcija:centrā augšā; ) #prewbutton, #nextbutton ( displejs : bloks; platums: 40 pikseļi; augstums: 100%; pozīcija: absolūts; augšā: 0; pārplūde: paslēpts; teksta atkāpe: -999 pikseļi; fons: url ("arrowBg.png") pa kreisi, centrā, neatkārtojas; necaurredzamība: 0,5 ; z-index:3; kontūra:nav !svarīgi; ) #prewbutton (pa kreisi:10px; ) #nextbutton (pa labi:10px; background:url(arrowBg.png) pa labi centrā no-repeat; ) #prewbutton:hover, # nextbutton:hover (necaurredzamība:1; )
Stilīgs īpašums slīdnis-wrap pierakstīt platums- jūsu attēlu maksimālais garums.
Stilīgs īpašums #slīdnis ( platums: calc(100% * 4); ) un .slide ( platums: calc(100%/4); ) norādiet attēlu skaitu slīdnī.  Mūsu piemērā ir 4.
Ja uz priekšu/atpakaļ vērstās bultiņas traucē slīdņa redzamību, tās var padarīt neredzamas un tiks rādītas, virzot kursoru.  Lai to izdarītu, parametros prewBut un nākamaisBet, iestatiet necaurredzamības rekvizītu uz 0.
Tagad izveidosim un atveram savu failu slider.js, kurā būs slīdņa kods.  Neaizmirstiet iekļaut jQuery bibliotēku.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = funkcija(bultiņa)( clearTimeout(slideTime); if(bultiņa == "nākamais")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(bultiņa == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = bultiņa; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) 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 += " " + indekss + "";
 });
 $("
"+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 = funkcija()( if(!pause)(slideTime = setTimeout(function()(animSlide) ("nākamais")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); pause = true;), function()(pause = false; rotator() ; )); var klikšķināt = false; var prevX; $(.slide").mousedown(function(e)(clicking = true; prevX = e.clientX; )); $(.slide").mouseup( function() ( noklikšķinot = false; )); $(dokuments).mouseup(function()( noklikšķinot = false; )); $(.slide").mousemove(function(e)( if(noklikšķinot == patiess ) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); }
 if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) noklikšķināšana = false;  ) ));  $(.slide").hover().css("kursors", "rādītājs");  rotators ();  ));
Funkcija animSlide pieņem trīs veidu vērtības: next, prew, skaitliskā vērtība.  Nākamais parametrs pārslēdz nākamo slaidu, prew atgriež iepriekšējo, un skaitliskā vērtība ir konkrētais slaids, kas atlasīts, izmantojot radio pogu zem slaida.
Parādītajā slīdnī tika izmantoti attēli no tīmekļa resursa https://pixabay.com/.
Šis ir atsaucīgs pieskāriena slīdnis, kas rakstīts jQuery.  Šī spraudņa dzinējs izmanto CSS3 animācijas, taču tajā pašā laikā vecākām pārlūkprogrammu versijām tiek nodrošinātas rezerves.  Glide.js ir vienkāršs un viegls.
Lietošana
1. Iekļaujiet jQuery
Vienīgā spraudņa atkarība ir jQuery, kas mums vispirms ir jāiekļauj:
 
2. Iekļaujiet Glide.js
 
3. Pievienojiet html
Savienosim bāzes stilus.
 
Saritināsim slīdņa html struktūru.
 

 

4. Inicializācija
Notiek slīdņa palaišana ar noklusējuma iestatījumiem...
 
... vai pielāgojiet to sev
 
Iestatījumi
Pieejamo opciju saraksts:
Parametrs
Noklusējuma vērtība
Veids
Apraksts
automātiskā atskaņošana
4000

int/bool
Automātiskā ritināšana (false, lai atspējotu)
pauze
taisnība
bool
Apturēt automātisko ritināšanu, kad pele tiek virzīta virs slīdņa
animācijas laiks
500

starpt
!!!  Šī opcija darbojas, ja pārlūkprogramma NEatbalsta css3.  Ja pārlūkprogramma atbalsta css3, tad šis parametrs ir jāmaina .css failā!!!
bultiņas
taisnība
bool/string
Rādīt/slēpt/pievienot bultiņas.  True, lai parādītu bultiņas slīdņa konteinerā.  Nepatiesi slēpties.  Varat arī norādīt klases nosaukumu (piemērs: ".class-name"), lai pievienotu īpašu html kodu.
bultiņasWrapperClass
slīdnis-bultiņas
virkne
Klase, kas tiks piešķirta konteineram ar bultiņām
arrowMainClass
slīdņa bultiņa
virkne
Galvenā klase visām bultām
arrowRightClass
slīdnis-bultiņa-pa labi
virkne
Klase labajai bultiņai
arrowLeftClass
slīdnis-bultiņa-pa kreisi
virkne
Klase kreisajai bultiņai
arrowRightText
Nākamais
virkne
Teksts labajai bultiņai
arrowLeftText
iepriekj
virkne
Teksts kreisajai bultiņai
nav
taisnība
bool/string
Rādīt/slēpt/pievienot slaidu navigāciju.  True to display.  Nepatiesi slēpties
navCenter
taisnība
bool
Centra navigācija
navClass
slīdnis-nav
virkne
Klase navigācijas konteineram
navItemClass
slider-nav_item
virkne
Klase navigācijas elementam
navCurrentItemClass
slider-nav__item — pašreizējais
virkne
Pašreizējā navigācijas elementa klase
tastatūra
taisnība
bool
Ritiniet slaidu, nospiežot kreiso/labo pogu
touchDistance
60

int/bool
Pieskāriena atbalsts (pieskāriens).  Nepatiesi, lai atspējotu šo funkciju.
pirmsInit
funkcija()()
funkciju
Atzvans, kas darbosies pirms spraudņa inicializācijas
afterInit
funkcija()()
funkciju
Atzvans, kas darbosies pēc spraudņa inicializācijas
pirms pārejas
funkcija()()
funkciju
Atzvanīšana, kas darbosies pirms slīdņa ritināšanas
pēcPārejas
funkcija()()
funkciju
Atzvanīšana, kas darbosies pēc slīdņa ritināšanas
API
Lai izmantotu API, mainīgajam ierakstiet slide.
var glide = $(".slider").glide().data("api_glide");
API metodes tagad jums ir pieejamas.
Glide.jump(3, console.log("Wooo!"));
.current() — atgriež pašreizējās puses numuru
.play() — sāciet automātisko ritināšanu
.pause() — aptur automātisko ritināšanu
.next(callback) — ritiniet slīdni uz priekšu
.prev(callback) — ritiniet slīdni atpakaļ
.jump(attālums, atzvanīšana) — pāriet uz noteiktu slaidu
.nav(target) — pievienojiet navigāciju konkrētam elementam (piemēram, "body", ".class", "#id")
.arrows(target) — pievienojiet bultiņas noteiktam elementam (piemēram, "body", ".class", "#id")

1. jQuery Fresco spraudnis
Adaptīvā jquery galerija (mainās, mainoties ekrāna izšķirtspējai), tiek parādīta uznirstošajā logā ar sīktēliem un attēlu parakstiem.  jquery fresco gallery darbojas pareizi lielākajā daļā pārlūkprogrammu, tostarp: IE6+, Firefox 3+, Chrome 5+, Opera 9+.  Šī spraudņa bezmaksas versiju var izmantot tikai nekomerciālos projektos.
2. "Adaptera" slīdnis


Slīdnis ar dažādiem pārejas efektiem (7 dažādi efekti, ieskaitot 3D).  Projekts vietnē Github.
3. Slīdņa spraudnis ar dažādiem efektiem "jQ-Tiles"


Spraudnis ar dažādiem pārejas efektiem, ar regulējamu slīdēšanas ātrumu, ar automātiskās ritināšanas funkciju.
4. jQuery spraudnis "Sly"


Spraudnis, lai ieviestu vertikālo un horizontālo ritinātāju.  Projekts vietnē Github.
5. Animēta CSS3 Makisu izvēlne


6. Vienkārša slaidrāde


7. Funkcionāls jQuery slīdnis "iView Slider v2.0"


Satura slīdnis / slaidrāde (slaids var būt ne tikai attēli, bet arī videoklipi un cits HTML saturs).  Navigācijai varat izmantot: sīktēlus, pogas pa kreisi/pa labi un tastatūru.  Projekts vietnē Github.com.
8. JQuery spraudņu komplekts "Vanity"


Komplektā ir 7 spraudņi: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder un jCollapse.  Šo risinājumu kopums palīdzēs ieviest slīdņus, rīka padomus, cilnes, attēlu uznirstošos logus un daudz ko citu.
9. Novietojiet kursoru CSS3 efekts


10. CSS3 nolaižamā izvēlne


11.iOSlider


Slīdnis, kas paredzēts darbam mobilajās ierīcēs.
12. CSS3 ielādes indikators


13. CSS3 hover efekts


14. “Produktu krāsotājs” jQuery Plugin


Spraudnis ir viegls risinājums dažādu krāsu produktu apskatei (attiecas, piemēram, apģērbu tiešsaistes veikaliem, lai apmeklētāji varētu izvēlēties krāsu shēma produkts no vairākām iespējām).  Spraudnis prasa tikai divus attēlus katram produktam (visas krāsas tiks uzklātas kā maska).  Spraudnis darbojas visās lielākajās pārlūkprogrammās, tostarp IE7+ (darbosies arī IE6, ja labosiet PNG caurspīdīguma displeju).  Projekts vietnē GitHub.
15. CSS3 animācijas diagrammas


16. Pārklājuma efekta izveidošana, noklikšķinot uz attēla


Noklikšķinot uz attēla, tas kļūst tumšāks, pārejot uz fonu, un parādās rindkopas ar parakstiem.  Tādējādi varat sniegt īsu aprakstu par elementiem, kas atrodas attēlā.
17. Lapas navigācija nolaižamās izvēlnes veidā


Risinājums ērtas dokumentu navigācijas ieviešanai nolaižamās izvēlnes veidā.  Saturs ir fiksēts ekrāna augšdaļā un vienmēr paliek apmeklētāja redzamības laukā.  Izvēlnē atlasot sadaļu, lapa vienmērīgi ritina līdz atlasītajai dokumenta daļai.
18. CSS3 galerija ar kursora efektu


Novietojot kursoru virs attēla, notiek ātra fotoattēlu maiņa.  Galerija ir realizēta divās versijās: ar attēlu aprakstu, kas parādās pēc tam, kad apmeklētājs ir nobīdījis kursoru prom no galerijas un bez apraksta.
19. jQuery Parallax Slider


20. CSS3 kursora animācija uz blokiem


21. CSS3 jQuery uznirstošais panelis
Demonstrācijas lapā noklikšķiniet uz bultiņas ekrāna apakšā, lai skatītu uznirstošās ikonas.
22. Bezmaksas HTML5 attēlu galerija "Juicebox Lite"


Ļoti funkcionāla jauna vietnes attēlu galerija.  Galerija var būt gan ar sīktēliem, gan bez tiem, ar attēla aprakstu vai bez tā, to var izvērst līdz pilnam ekrānam vai parādīt lapā ar fiksētiem izmēriem.  Demonstrācijas lapā varat izvēlēties sev tīkamās galerijas veidu.  Lejupielādei ir pieejama bezmaksas galerijas versija.  Par papildu funkcionalitāti un izstrādātāja logotipa noņemšanu jums būs jāmaksā.
23. Spraudnis "JQVMap"


24. CSS3 Parallax Slider


25. jQuery fotogalerija ar sīktēliem


Adaptīvās galerijas, attēlu un sīktēlu izmēri mainās atkarībā no pārlūkprogrammas loga izmēra.
26. jQuery satura slīdņa spraudnis "Horinaja"


Spraudnis ir viegli instalējams, pielāgojams, pārrobežu pārlūkprogrammai.  Jebkurš HTML saturs var darboties kā slaids, ne tikai attēli.  Varat ritināt slaidus, izmantojot peles ritenīti, kamēr kursors atrodas slaidu apgabalā.
27. jQuery Pikachoose slīdņa spraudnis


Trīs variācijās: vienkārša attēlu maiņa bez apraksta un sīktēliem;  slīdnis ar attēlu parakstiem un sīktēliem;  slīdni ar sīktēliem un pievienota lielāka attēla atvēršana uznirstošajā logā ar FancyBox efektu.  Jaunāko versiju vienmēr var atrast vietnē Github.
28. Daži pielāgoti CSS stili nolaižamajām izvēlnēm


Pieci dažādi nolaižamo izvēlņu stili, izmantojot dažādas CSS metodes.
29. Restorāna ēdienkarte ar animētu 3D efektu


Interesanta CSS jQuery informācijas prezentācija lapā.  Noklikšķinot uz saites, tiek atvērta bukletu izvēlne un apmeklētājs uznirstošajā logā var lasīt vairāk par piedāvātajiem ēdieniem.  Animācija pārlūkprogrammā IE netiek rādīta pareizi.
30. Elastislide spraudnis


Gumijas ieviešana adaptīvais karuselis(vertikāls un horizontāls attēlu karuselis) un attēlu galerijas.  Kad pārlūkprogrammas logs tiek samazināts, attēlu skaits tiek samazināts līdz noteiktai minimālajai vērtībai un pēc tam tiek mainīts atlikušo attēlu izmērs.  Projekts vietnē Github.
31. Svaigs CSS3 jQuery Slit Slider


Responsīvs slīdspraudnis (platums var tikt iestatīts procentos un tas automātiski mērogos) divos stilos ar interesantu animācijas efektu mainot slaidus (slaids tiek pārgriezts uz pusēm un pārvietots dažādos virzienos, un tā vietā ir jauns).  Ir iespējama navigācija ar tastatūru.  Jaunākā versija vienmēr ir pieejama vietnē Github.
32. Jauna 3D attēlu slīdņa "Slicebox" versija


Jauna versija ar veiktajām izmaiņām un jaunu funkciju pievienošanu: tagad 3D slīdnis ir kļuvis mērogojams, to var redzēt, samazinot pārlūkprogrammas logu;  Pievienots Firefox atbalsts;  slaida aprakstā jau var izmantot HTML saturu (iepriekš apraksts tika izvilkts no link atribūta bez iespējas tajā izmantot HTML tagus).  Demonstrācijas lapā varat redzēt 4 spraudņa izmantošanas iespējas. jaunākā versija dzīvo vietnē Github.com.
Efekts ir ļoti līdzīgs 3D CU3ER Flash galerijai (demo , lejupielāde), tikai šis 3D slīdnis ir veidots nevis ar flash tehnoloģiju palīdzību, bet ar javascript palīdzību.
33.jQuery spraudnis "PFold"


Eksperimentāls risinājums.  Spraudnis ievieš 3D efektu ar piezīmes atvēršanas imitāciju. Dažādas iespējas izpildes: ar trim pagriezieniem, ar diviem pagriezieniem un pagriezienu ar sekojošu izvērstās nots centrēšanu.
34.jQuery spraudnis "Windy"


Spraudnis, lai pārvietotos pa saturu, piemēram, attēliem.  Ritinot fotoattēlus, tie izkliedējas dažādos virzienos (efekts nedaudz atgādina karšu izplatīšanu kāršu spēle pokers).  Navigācijai varat izmantot kreiso/labo pogu vai slīdni (dažādas opcijas skatiet demonstrācijas lapā).  Projekts ieslēgts