Jednoduchý kolotoč jquery. Rôzny počet blokov na rôznych zariadeniach. Doplnok jQuery "Efekty navigácie v mriežke"

Občas musím riešiť problémy spojené s front-endom, napriek tomu, že ho neznášam 🙂

Vlastne môj postoj ku všetkému, čo je spojené s „krásnym“, by ste mohli zhodnotiť podľa dizajnu tejto stránky, ktorú som vytvorila len ja 🙂

Relatívne nedávno som však čelil potrebe implementovať slider do JavaScriptu, a to sa muselo zaobísť bez akýchkoľvek hotových knižníc a dokonca aj bez obľúbeného jQuery všetkými.

Táto potreba bola spôsobená tým, že výsledkom mal byť JS skript, ktorý cez služby tretej strany by sa pripojil k lokalite. V dôsledku toho hotové kolotoče v JavaScripte okamžite zmizli na ich integráciu bolo potrebné pridať pripojenie knižnice k HTML kódu stránky cez značku skriptu a skopírovať samotné súbory na server alebo ich stiahnuť cez cdn, ale to by si opäť vyžadovalo úpravu zdrojového kódu.

Ako vytvoriť posúvač JavaScript: Začíname

Dnes si myslím, že každý, kto sa ocitol v podobnej situácii, začal hľadaním dostupného vývoja, tk. keď je úloha vyrobiť kolotoč JS súčasťou práce, mala by byť vždy vykonaná čo najrýchlejšie. A za takýchto podmienok vám samozrejme nikto nedovolí sedieť a vymýšľať si vlastné bicykle.

Zákazníkov vždy nezaujíma, ako je kód napísaný, akú má architektúru, hlavné je vidieť výsledok!

Nakoniec, ako ste pochopili, pred napísaním posuvníka v JavaScripte bez jQuery som sa rozhodol nájsť hotový a upraviť ho tak, aby vyhovoval mojim potrebám. Prečo bez jQuery? Áno, pretože na cieľovom zdroji, kde som plánoval pripojiť môj posuvník cez službu, bolo volanie jQuery v kóde umiestnené neskôr ako skript pripojený službou. Preto konštrukcie jQuery v mojom kóde jednoducho neboli vnímané.

Ako základ som vzal tento posuvník obrázkov JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.

Rozhodol som sa s tým prestať, pretože jeho kód JS bol napísaný pomocou princípov OOP a triedy v ňom sú založené na prototypoch a nie na triviálnych funkciách.

Aby som bol úprimný, hlboko nerozumiem a neuznávam súčasný humbuk okolo JavaScriptu s použitím OOP, frameworkov a iných architektonických vecí v jazyku, ktorý bol pôvodne koncipovaný ako jednoduchý jazyk pre dynamické skriptovanie. Rovnako ako samotný JS sa mi úprimne nepáči jeho syntaktická vinaigretta, ktorá umožňuje písať rovnaké konštrukcie niekoľkými spôsobmi.

Ale, bohužiaľ, v modernom svete Len málo ľudí zdieľa moje pozície, tk. jazyk sa vyvíja šialeným tempom a dokonca sa pokúša podmaniť si mysle backendových vývojárov pomocou Node.js ako alternatívy k Jave, PHP, C #, Ruby a iným monštrám.

V dôsledku toho, aby ste neboli banálny z práce, musíte sa potichu zaoberať JavaScriptom. A v čistej JavaScript implementácii posuvníka, ktorý som si vybral, som narazil na niečo, čím, ako ste pochopili, v tomto jazyku opovrhujem. Preto som si to vybral tak, aby bol aspoň nejaký dôvod pracovať a vymýšľať JavaScriptové OOP a prototypové triedy - inak by som sa ich v živote dobrovoľne nedotkol 🙂

Na základe kódu, ktorý som našiel, som potreboval vyvinúť posuvník v čistom JS vo vyskakovacom okne (táto vec sa nazýva aj popup, pop-up atď.), ktorý by mal tlačidlá na prepínanie snímok a klikateľné indikátory aktuálna snímka. Taktiež bolo potrebné vyrobiť tlačidlo na zatvorenie tohto okna.

Tu je to, s čím som skončil.

Vytvorenie posuvnej knižnice JS

Najprv som sa rozhodol všetko šikovne implementovať a urobiť pre stránku JavaScript slider vo forme knižnice prepojiteľnej so stránkou pomocou jediného skriptu, v ktorej sa budú volať komponenty slideru rozdelené do podadresárov. Rozhodol som sa to zavolať popupSlider.js na počesť jeho pôvodného účelu.

Jeho kód nájdete na GitHub na tejto adrese - https://github.com/Pashaster12/popupSlider.js

Štruktúra knižnice bola nasledovná:

Priečinok diapozitívov určené pre diapozitívy. V ovládacie prvky umiestnené obrázky ovládačov JS karuselu (tlačidlá na zatváranie posúvača a prepínanie posúvačov). A v aktíva- prvky statického posuvníka JS: označenie HTML a súbor so štýlmi CSS.

No, súbor popupSlider.js je srdcom samotnej knižnice, v ktorej sa zapisujú akcie kolotoča JavaScriptu a vytvárajú sa odkazy na zvyšok súborov. Je to on, koho spojíme na stránke, a on už zavolá zvyšok.

Rozhodol som sa začať s HTML značky náš JS kolotoč obrázkov, ktorý v mojom prípade vyzerá takto:

Na navrhnutie posúvača v JavaScripte ako kontextového okna som použil nasledujúce štýly:

#slider (okraj: auto; šírka: 600px! dôležité; pretečenie: skryté;) # slider-wrapper (šírka: 9999px; výška: 343px; poloha: relatívna; prechod: doľava 400 ms lineárny;) .slide (plávajúci: vľavo; šírka : 600px; pozícia: relatívna; pretečenie: skryté;) .caption (šírka: 600px; výška: 110px; výška riadku: 1,5; veľkosť písma: 15px; váha písma: 300; zarovnanie textu: stred; farba: # 000; zobrazenie: tabuľka;) .caption-container (zobrazenie: tabuľka-bunka; zvislé zarovnanie: stred; odsadenie: 0 20px;) # slider-nav (pozícia: absolútna; spodná časť: -36px; zarovnanie textu: na stred; vľavo: 50 %; transformácia: translateX (-50 %);) # slider-nav a (šírka: 8px; výška: 8px; dekorácia textu: žiadna; farba: # 000; zobrazenie: inline-block; border-radius: 50 %; margin: 0 5px; background-color: #fafafa;) # slider-nav a.current (background-color: # 337ab7;) .horizontal-controls (position: absolute; display: inline-block; width: 12px ; výška: 20px; hore: 50%; margin-top: -10px;) #prev (background: url (../ cont rols / arrow_left_inactive.png); vľavo: -40px; ) #prev: hover (background: url (../ controls / arrow_left_active.png);) #next (background: url (../ controls / arrow_right_inactive.png); right: -40px;) #next: hover (background : url (../ controls / arrow_right_active.png);) # cq-popup (šírka: 600px; z-index: 23; vľavo: calc (50%); hore: calc (50%); pozícia: opravené! dôležité ; opakovanie na pozadí: bez opakovania; poloha na pozadí: vpravo; farba pozadia: #fff; rodina fontov: "Roboto", "Segoe UI", "Helvetica", "Georgia", "Calibri", "Verdana" ; transform: translate (-50%, -50%) scale (1);) # cq-popup .header (zobrazenie: inline-block; font-size: 17px; font-weight: 500;) # cq-popup> div (šírka: 500px; font-size: 22px; line-height: 36px;) # cq-popup-btclose (text-decoration: none; position: absolute; right: -40px; top: 0; background: url (. ./controls/btn_delete_inactive.png); výška: 16px; šírka: 16px;) # cq-popup-btclose: hover (pozadie: url (../ ovládacie prvky / btn_delete_active.png);) # cq-popup-bg (pozícia : pevná; vrch: 0; šírka: 100 % ; výška: 100 %; pozadie: rgba (51,51,51,0,8); z-index: 22; )

V dôsledku použitia týchto štýlov JS vyzerá kolotoč nasledujúcim spôsobom:

Vykreslil som HTML značky aj štýly CSS samostatné súbory popupSlider.html a popupSlider.css, ktoré sa nachádzajú v adresári aktív knižnice posuvníkov JavaScript. Urobil som to zámerne, aby používatelia pri používaní tohto kódu mohli ľahko opraviť označenie a dizajn bez toho, aby sa museli plaziť do kódu JS, kde by sa musel priamo zapísať vykreslený.

Okrem toho veľa ľudí stále rádo minifikuje JS, aby urýchlilo načítanie webových stránok. Takže za týchto podmienok by bolo veľmi ťažké prispôsobiť toto riešenie.

Nakoniec som sa rozhodol len pripojiť pripravené súbory v súbore hlavnej knižnice popupSlider.js, ktorý pre moje vyhlásenie o probléme mal nasledujúcu formu:

Funkcia Slider (prvok) (this.loadStatic (); this.el = document.querySelector (prvok); this.init ();) Slider.prototype = (init: function () (this.links = this.el.querySelectorAll ("# slider-nav a"); this.wrapper = this.el.querySelector ("# slider-wrapper"); this.nextBtn = this.el.querySelector ("# ďalší"); this.prevBtn = toto. el.querySelector ("# prev"); this.navigate ();), navigácia: funkcia () (var self = toto; pre (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blok"; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: function (link) (var parent = link.parentNode; var a = parent.querySelectorAll („a“); link.className = „current“; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };

Niekoľko komentárov k danému kódu. Obsah súboru popupSlider.js je jediná trieda JavaScript Slider, ktorá podobne ako PHP obsahuje konštruktor a metódy tejto triedy. Iba v JS je definícia konštruktora na rozdiel od PHP povinná.

Konštruktor je definovaný pomocou nasledujúcej konštrukcie:

Posuvník funkcie (prvok) (// kód konštruktora)

Vo vnútri konštruktora musia byť napísané akcie, ktoré sa vykonajú pri vytváraní objektu triedy.

Samotné metódy triedy budú vo vnútri prototypu a budú dostupné pre všetky inštancie tejto triedy JavaScript. Prototyp JS je v mojom prípade opísaný nasledujúcou konštrukciou:

Slider.prototype = (// metódy)

Mimo tela triedy sa budú nazývať takto:

Posuvník Var = nový posúvač (); slider.class_method ();

A v samotnom kóde triedy je k dispozícii nasledujúca metóda:

This.class_method ();

Hlavná vec je nezabudnúť, že in Hodnota JavaScript závisí to od kontextu volania, preto v telách niektorých metód, v ktorých bolo potrebné volať metódy a vlastnosti triedy, je prítomná nasledujúca konštrukcia:

Var self = toto; self.trieda_metóda (); // odkazovať na metódu, ktorá je o jednu úroveň vyššia ako kód opísanej metódy

Zdá sa, že som povedal o všetkých nuansách písania kódu. Teraz pár slov o metódach našej triedy JavaScript, ktoré obsahujú popisy akcií JS kolotoča obrázkov.

loadStatic ()

Úplne prvá metóda, ktorá sa volá, keď sa trieda vytvorí v konštruktore. Zodpovedá za pridanie značky HTML posuvníka a súboru so štýlmi do kódu HTML stránky.

Najprv sa v pamäti vytvorí nový tag odkazu pomocou JavaScriptu funkcie document.createElement () a sú jej priradené hodnoty všetkých potrebných atribútov vrátane cesty k súboru CSS s posuvníkom štýly JS. A nakoniec sa pridá na stránky HTML pomocou JavaScript metódy appendChild () na koniec sekcie hlavy, kde by mali byť štýly.

Ďalej urobíme to isté pre súbor HTML pre náš posúvač v čistom JavaScripte. Je tu však malá nuansa: súbor HTML v tom istom nemožno pripojiť, ako sme to urobili so súborom CSS. Existujú na to špeciálne knižnice, napríklad na to, aby bolo možné zahrnúť HTML do HTML, skvelá je knižnica z w3.org - https://www.w3schools.com/howto/howto_html_include.asp

Potom by však musel byť zahrnutý v samotnej knižnici posuvníkov alebo požiadať používateľov, aby si ho nainštalovali sami. Ale to všetko nie je optimálne, pretože vyžaduje veľa pohybov tela a spomaľuje rýchlosť načítania webovej stránky kvôli dodatočným skriptom.

Nakoniec som sa rozhodol získať obsah HTML súbor vnútri kódu JavaScript a načítajte ho do nového prvok div vytvorený v pamäti, ako som to urobil predtým, aby som zahrnul súbor CSS do JavaScriptu. Vygenerovaný prvok je pripojený na úplný koniec sekcie telo HTML kód stránky lokality.

Ak chcete vložiť div s označením posúvača nielen na koniec tela, ale aj do konkrétneho kontajnera, môžete namiesto nasledujúceho kódu:

Var div = document.createElement ("div"); div.innerHTML = sliderHTML; document.body.appendChild (div);

Predpísať nasledujúce špecifikovaním požadovaný identifikátor cieľový kontajner (v mojom prípade sa HTML JS posúvača bude nachádzať v prvku s ID popupSlider):

Var target = document.querySelector ("# popupSlider"); target.innerHTML = sliderHTML;

Metóda, ktorá sa volá v konštruktore po loadStatic () a je potrebná na inicializáciu vlastností triedy zodpovedajúcich hlavným prvkom HTML, na ktoré sa budeme odvolávať v nasledujúcom kóde.

Nakoniec sa zavolá metóda navigate ().

navigovať ()
Pri tejto metóde sú uvedené akcie, ktoré sa vyskytnú, keď kliknete na tlačidlá posuvného prepínača a navigačné prvky umiestnené pod samotným posuvníkom, vo forme kruhov.

Pre pohodlie som kód JavaScript na zmenu snímok vložil do samostatnej metódy snímky () a v tejto ju zavesím iba na udalosť kliknutia pre každú okrúhle tlačidlo v slučke.

Keď kliknem na tlačidlá „Predchádzajúca snímka“ / „Ďalšia snímka“, ako vidíte, rozhodol som sa iba napodobniť kliknutie na zodpovedajúci kruh, ktorý definuje požadovaný vzhľadom k aktuálnemu, ktorý má aktuálnu triedu CSS.

snímka (prvok)

Metóda „zodpovedná za kúzlo“ samotného kolotoča JavaScriptu, ktorý obsahuje kód, ktorý vymieňa snímky. Na samom začiatku sa zavolá metóda setCurrentLink (), o ktorej budeme hovoriť o niečo neskôr.

Ako vstupný parameter je mu odovzdaný objekt navigačného tlačidla posuvníka JS vo forme kruhu.

Samotné prepínanie snímok funguje takto:

1. Všetky sklíčka sú navrhnuté vo forme blokov rovnakej veľkosti, ktoré idú jeden po druhom. Posuvné okno je len viditeľná časť prvok obsahujúci všetky snímky.
2. Odsadenie ľavého okraja aktuálnej snímky od ľavého okraja nadradeného prvku určíme pomocou vlastnosti offsetLeft.
3. A o túto hodnotu posunieme nadradený prvok tak, aby sa požadovaný prvok zobrazil v posuvnom okne.

Na konci metódy je popísané správanie tlačidiel „predchádzajúca snímka“ / „nasledujúca snímka“, ktoré sú navrhnuté ako šípky doľava/doprava. Ak je aktuálna snímka prvou z celého zoznamu, tlačidlo na prechod na predchádzajúcu snímku je skryté. Ak je to druhé, odstráňte tlačidlo a prejdite na ďalšiu snímku.

setCurrentLink (odkaz)

Táto metóda našej triedy Posuvník JavaScript je zodpovedný za zvýraznenie navigačného tlačidla zodpovedajúceho aktuálnemu prvku. Tie. ak sme vybrali druhú snímku, potom sa zvýrazní druhé tlačidlo.

Objekt tlačidla, ktorý by mal byť vybraný ako aktuálny, je odovzdaný funkcii ako vstupný parameter.

Logika zvýraznenia aktuálnej položky je jednoduchá:

1. Dostaneme objekt nadradeného prvku, ktorým je v našom prípade kontajner s identifikátorom posuvná navigácia.
2. Všetky navigačné prvky získame ako pole odkazov.
3. Prvok prijatý na vstupe vyberieme tak, že k nemu pridáme triedu prúd.
4. V slučke iterujeme cez všetky navigačné prvky a vymažeme hodnotu triedy pre všetky okrem aktuálnej. Je to potrebné na zrušenie výberu prvku, ktorý bol aktuálny pred týmto volaním funkcie.

Úplne posledná metóda triedy, v ktorej sa akcia určuje kliknutím na tlačidlo zatvorenia posúvača vo forme krížika. Tu je kód v skutočnosti najzrozumiteľnejší zo všetkého, čo obsahuje posuvná trieda JS.

Po kliknutí na tlačidlo zavrieť, ku ktorému sa dostanete pomocou jeho identifikátora, sa zo stránky odstráni prvok posuvníka a prvok, ktorý nastavuje polopriehľadné pozadie. Tie sú zase odvodené od jedinečných identifikátorov.

Samotná metóda sa volá vo vnútri predtým popísanej navigácie (), ktorá obsahuje všetky skripty akcií prebiehajúcich v našom posúvači JavaScript.

Mimochodom, ak chcete zatvoriť posúvač, keď kliknete mimo neho, pridajte do tejto metódy nasledujúci kód:

Document.getElementById („cq-popup-bg“). Onclick = funkcia () (document.getElementById („cq-popup-bg“). Odstrániť (); document.getElementById („cq-popup“). Odstrániť () ;

Prezentácia JavaScript založená na vyvinutej knižnici

Niekedy v praxi možno budete chcieť vytvoriť JS rolovací kolotoč, často označovaný ako prezentácia. V mojom prípade to nebolo potrebné, ale napriek tomu som sa rozhodol vytvoriť jeden na základe výsledného kódu knižnice pre prípad, že by sa to mohlo hodiť.

Implementácia prezentácie v jazyku JavaScript sa v skutočnosti len mierne líši od bežného posúvača. Rozdiel je len v tom, že pri prezentácii sa snímky prepínajú automaticky v určenom časovom intervale a v prípade bežného JS karuselu sa menia manuálne pomocou navigačných prvkov.

SlideShow: function (timeout) (var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval (funkcia () (var currentSlideNumber = document.querySelector ("# slider-nav a.current"). GetAttribute) ("data-slide"); var slideId = parseInt (currentSlideNumber, 10) + 1; self.slide (document.querySelector (""));), časový limit);)

Čo sa tu deje - myslím, že je to jasné. Na tvorenie túto metódu Skopíroval som kód z udalosti kliknutia na tlačidlách manuálneho prepínača a umiestnil som ho do volania JavaScriptu do funkcie setInterval (), ktorá po určitom čase vykoná zadanú akciu.

Akčný skript je odovzdaný ako prvý argument ako anonymná funkcia a časový interval ako druhý, ktorý som sa rozhodol urobiť ako premennú, ktorej hodnota sa odovzdáva pri volaní slideShow ().

Jedinou úpravou kódu v rámci setInterval (), ktorá bola potrebná, bolo určenie počtu snímok a porovnanie indexu aktuálnej snímky s ním pre automatické prepínanie v slučke.

No a aby to bolo daný kód fungovala, musí sa zavolať samotná metóda. Rozhodol som sa, že to všetko urobím v tej istej navigácii (), čo je len zbierka najrôznejších skriptov. Hovor som umiestnil na samý koniec a ako argument som uviedol hodnotu časového intervalu pre automatickú zmenu snímok v našej prezentácii JS (vybral som 2 000 milisekúnd alebo 2 sekundy, toto číslo môžete podľa potreby zmeniť):

Self.slideShow (2000);

Potom skontrolujte posúvač JavaScript a nezabudnite vyčistiť aj prehliadač.

Teoreticky by všetko malo fungovať. Ak nie, preštudujte si chyby v konzole prehliadača a podeľte sa o ne v komentároch.

Vo výsledku sme dostali JS slide show, v ktorej sa snímky prepínajú automaticky a do kruhu, t.j. po dosiahnutí poslednej snímky sa relácia prepne do slučky a začne znova od úplne prvej položky.

Všimol som si to pri práci s rôznymi JS knižnicami obrázkových a posudkových kolotočov túto prax vývojári aktívne používajú, ale s určitým doplnením. Vo všetkých riešeniach, ktoré som videl, sa automatická prezentácia preruší, ak používateľ manuálne prepne. Preto som sa rozhodol urobiť to isté vo svojej knižnici.

Na prerušenie automatickej prezentácie JavaScriptového kolotoča som sa rozhodol použiť štandardnú JS funkciu clearInterval (), ktorej ako argument odovzdám identifikátor časového intervalu, ktorý vráti funkcia setInterval () pri jeho nastavení.

V dôsledku toho som dostal nasledujúci kód, ktorý som sa rozhodol nevypracovať samostatnou metódou:

ClearInterval (self.slideCycle);

A umiestnil som ho na miesta, kde sú popísané akcie pri kliknutí rôzne prvky navigácia, t.j. v nasledujúcom:

Link.addEventListener („kliknutie“, funkcia (e) (...)); self.prevBtn.addEventListener ("kliknutie", funkcia (e) (...)); self.nextBtn.addEventListener ("kliknutie", funkcia (e) (...));

Je lepšie zavolať clearInterval () bližšie k samotnej udalosti kliknutia, hlavná vec je, že pred ňou a nie po nej.

Integrácia posúvača JavaScript do stránky

Takže náš čistý posuvník JS je pripravený. Teraz už zostáva len pripojiť ho k stránke.

Ak to chcete urobiť, musíte postupovať podľa nasledujúcich krokov, ktoré sú vo všeobecnosti štandardnými krokmi pri integrácii knižníc JavaScript tretích strán.

Krok 1... Súbory knižnice skopírujeme na našu stránku do samostatného adresára.
Krok 2... Pridajte nasledujúci kód na stránky HTML, ktoré potrebujú zobraziť posúvač, a umiestnite ho pred koncovú značku tela:

Krok 3... Umiestnite nasledujúci kód na volanie JS karuselu do existujúceho súboru JavaScript, ktorý je pripojený na stránku po pripojení samotného posúvača:

Var aSlider = nový posuvník ("# posuvník");

Ako vidíte, tento kód v skutočnosti vytvára objekt triedy Slider, ktorý je obsiahnutý v popupSlider.js. Preto by sa mal volať až po pripojení samotného súboru triedy k stránke.

Pridávanie nových snímok do kolotoča JavaScript

Všetko je tu veľmi jednoduché. Keďže snímky sú prevzaté zo samostatného adresára knižnice diapozitívov, potom pri pridávaní nových obrázkov stačí do neho vložiť potrebné súbory, pričom ich najprv nastavíte na rovnakú veľkosť ako ostatné.

A potom v kóde aktív / popupSlider.html súboru pridajte nový blok do kontajnera s id posuvný obal:

V podstate stačí skopírovať podobný existujúci a zmeniť cestu k súboru obrázka a text podpisu v ňom (ak ho vôbec potrebujete).

Budete tiež musieť pridať nový navigačný prvok vo forme kruhu, pretože na tento moment jeho automatické pridávanie ešte nebolo zavedené. Ak to chcete urobiť, budete musieť do kontajnera s id pridať nasledujúci kód posuvná navigácia napísaním na úplný koniec:

Hodnota atribútu data-slide by mal byť väčší ako najväčší z ostatných prvkov. Stačí zvýšiť maximálny prúd o jeden.

Balenie karuselu JS do jedného skriptu

To je všetko, posúvač JavaScript je pripravený a pripojený. Osobne odporúčam použiť túto možnosť v praxi, ak to vôbec potrebujete :)

Mimochodom, na urýchlenie jeho práce môžete dodatočne komprimovať statické komponenty: súbory CSS, HTML a JavaScript. Neurobil som to a ponúkol som vám miniifikovaný kód, pretože teraz existuje veľa frontendových zostavovacích systémov: Gulp, Grunt, Webpack a ďalšie. A každý z nich má svoje vlastné algoritmy kompresie a pripojenia súborov.

Minifikované výsledky navyše môžu v rôznych operačných systémoch fungovať odlišne. Vo všeobecnosti existuje veľa dôvodov.

A samotné zdrojové kódy vyšli, myslím, nie také ťažké, aby potrebovali tento postup. Ak ich však potrebujete, nakonfigurujte minifikáciu sami, berúc do úvahy váš operačný systém a zberateľa.

Ako som písal na úplnom začiatku, na vyriešenie pôvodne nastavenej úlohy som potreboval získať jeden súbor JS pre správne použitie môjho posuvníka prostredníctvom služby tretej strany na stránke. Z tohto dôvodu som v skutočnosti nepoužíval hotové knižnice tretích strán.

Potom možnosť single JavaScript skript kolotoč vám príde vhod, tk. všetok obsah bude obsiahnutý priamo v nej, vrátane HTML / CSS kódu, ktorý je v prípade knižnice uložený v samostatných súboroch.

Scenár sa v mojom prípade skladá z dvoch častí. Prvá časť obsahovala obsah súboru popupSlider.js, ktorý už druhýkrát neukážem. Vložte ho sami, odstráňte popis metódy loadStatic () a jej volanie z kódu triedy, pretože nebudeme ich potrebovať.

Druhou časťou jediného skriptu posúvača JavaScript pre lokalitu je obslužný program pre udalosť DOMContentLoaded, ku ktorej dochádza pri načítaní obsahu stránky.

Tam pridáme karuselový JS kód na HTML / CSS stránku a vytvoríme objekt triedy Slider, čo je ekvivalent aktivácie samotného slidera.

Kód vyzerá schematicky takto:

/ * obsah popupSlider.js bez popísania metódy loadStatic () a jej volania * / document.addEventListener ("DOMContentLoaded", funkcia () (var str = "\\ /* html kód* / "; var div = document.createElement (" div "); div.innerHTML = str; document.body.appendChild (div); var aSlider = new Slider (" # slider ");

Keďže v mojom prípade bola možnosť nahrávania súborov na server úplne zatvorená, musel som nahrať súbory obrázkov prvkov JavaScript ovládanie kolotoč do cloudu a namiesto ciest k nim do HTML a CSS kódu napíšte odkazy vygenerované pri ukladaní.

Ak takéto ťažkosti nemáte, nemôžete nič zmeniť, ale nezabudnite skopírovať adresáre slidu a ovládacích prvkov knižnice na server a zadať k nim správne cesty.

Vlastnoručne napísaný JS slider - perspektívy rozvoja

Úprimne povedané, neplánujem sa venovať cielenej podpore a rozvoju mnou vytvoreného riešenia 🙂 Momentálne existuje kočík a malý vozík takýchto sliderov, ktoré na rozdiel od mojich majú svoju históriu, sú dôkladne testované a podporované od rozsiahlej komunity používateľov a vývojárov.

Ale začať celú túto cestu od nuly sám a vytvoriť ďalší bicykel je pre mňa akosi nezaujímavé a naozaj na to nemám čas. Ale na druhej strane je tento posuvník JavaScript vynikajúcou príležitosťou na precvičenie vývoja refaktorovaním jeho kódu a implementáciou nového zaujímavé funkcie, ktoré možno ešte nie sú momentálne dostupné.

Ak teda, rovnako ako ja, potrebujete základňu kódu na experimentovanie a máte aspoň trochu voľného času navyše - skopírujte si kód posuvníka JavaScript, ktorý som opísal, alebo sa pridajte k prispievateľom na GitHub. Úložisko je otvorené a odkaz naň som uviedol na začiatku článku.

Ak chcete napumpovať svoje frontendové schopnosti na mojej tvorbe, môžem vám dokonca poskytnúť malý zoznam úprav a vylepšení, ktoré kód potrebuje a ktoré vás možno budú zaujímať z hľadiska ich implementácie:

1. vytvorte externú konfiguráciu, aby ste mohli pohodlne prispôsobiť posúvač;
2. umožniť vloženie posúvača do stránky (teraz je navrhnutý iba ako kontextové okno);
3. asynchrónne Nahranie HTML kód (teraz je synchrónny, ktorý je mnohými prehliadačmi označený ako zastaraný);
4. usporiadať knižnicu vo forme balíka, NPM, Bower alebo iného balíka tak, aby sa dala nainštalovať a prevádzkovať so závislosťami pomocou správcov balíkov;
5. urobiť rozloženie tak, aby reagovalo na používanie kolotoča JS na rôznych zariadeniach;
6. vykonať prepínanie snímok pomocou udalosti Swipe pre mobilných používateľov.

Zoznam úprav, ktoré som uviedol, samozrejme nie je konečný a možno ho doplniť. Napíšte o svojich návrhoch, myšlienkach a želaniach do komentárov pod článkom a zdieľajte ich so svojimi priateľmi prostredníctvom sociálne siete aby sa zapojili aj do vývoja.

Žiadam vás, aby ste môj kód neposudzovali striktne, pretože ako som povedal, nepovažujem sa za špecialistu na Frontend a ani ním nie som. Taktiež som otvorený všetkým vašim komentárom k štýlu kódovania a dúfam, že sa od vás niečo naučím a vy - odo mňa, t.j. plní hlavný účel vývoja a podpory produktov OpenSource.

Zapojte sa do projektových komunít, prihláste sa na odber aktualizácií a dokonca mi môžete pomôcť aj finančne pomocou formulára priamo pod článkom, ak by som vám s niečím pomohol alebo sa vám jednoducho páči to, čo robím 🙂

To je všetko! Všetko dobré! 🙂

P.S.: ak potrebujete stránku alebo potrebujete upraviť existujúcu stránku, ale nie je na to čas a chuť, môžem ponúknuť svoje služby.

Viac ako 5 rokov skúseností profesionálny vývoj stránky. Pracovať s PHP, Opencart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, Reagovať, Hranatý a ďalšie technológie vývoja webu.

Skúsenosti s vývojom projektov rôznych úrovní: vstupné stránky, firemné stránky, Internetové obchody, CRM, portály... Vrátane podpory a rozvoja HighLoad projekty... Prihlášky posielajte e-mailom [e-mail chránený].

Ale keďže s vami diskutujeme o základoch JS, na štúdium základne popíšem, ako vytvoriť jednoduchý posuvník iba pomocou jazyk JavaScript... No, poďme k rozboru materiálu!

Aké typy posuvníkov existujú a kde by ste ich mohli potrebovať?

Vytvorenie pohodlných galérií na prezeranie obrázkov je potrebné na všetkých webových službách, kde sú aspoň nejaké fotografie. Môže ísť o internetové obchody, portfóliové stránky, spravodajské a vzdelávacie služby, webové stránky firiem a zábavných podnikov s fotoreportážami a pod.

Avšak, toto štandardná aplikácia posúvače. Podobné technológie používa sa aj na prilákanie zákazníkov na propagačné produkty, služby alebo na opísanie výhod podnikania.

V zásade ju zákazníci žiadajú implementovať na galériu typu "Carousel". to šikovný nástroj na prezeranie obrázkov vo veľkých rozmeroch s možnosťou prepínania medzi snímkami tam a späť používateľom. V tomto prípade sa samotné obrázky zvyčajne prepínajú automaticky určitý čas... Tento mechanizmus dostal prezývku vďaka tomu, že zobrazovanie obrázkov sa opakuje v kruhu.

Dnes, ak je to potrebné, na internete nájdete najneobvyklejšie a najatraktívnejšie doplnky na prezeranie súboru fotografií.

Samostatná činnosť

Teraz začnime vytvárať vlastný posuvník. V tomto bode vašej krivky učenia vám navrhujem, aby ste ho implementovali pomocou pure. Toto bude automatický spínač obrázky v kruhu.

Nižšie prikladám programový kód vašu aplikáciu. Cestou som vám nechal komentáre.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

• 
• 
• 

Dúfam, že ste sa nestretli s problémami s css a html kódom. Ale považujem za potrebné rozobrať prácu scenára. Preto prejdime k dešifrovaniu napísaného.

Takže najprv pomocou metódy querySelectorAll premenlivý MySlider Priradím zoznam všetkých prvkov v zadanom rozsahu. Označuje tento záznam

document.querySelectorAll („#slides .slide“)

Teda v MySlider je uložená zbierka štyroch prvkov.

Ďalej som priradením k premennej nastavil, ktorý obrázok sa má začať zobrazovať aktuálny obrázok nula. Potom, čo označím, že zmena snímok nastane za 2,7 sekundy a mala by byť vyvolaná funkcia spracovania nextSlide.

Prejdime k samotnej funkcii.

Spočiatku pre aktuálny prvok zoznamu mením popis tried, t.j. prepisovanie" šmykľavkazobrazujúci"zapnuté" šmykľavka". Obraz sa tak stane neviditeľným.

Teraz definujem novú kolekciu, ktorá sa zobrazí na obrazovke. K tomu beriem aktuálnu pozíciu +1. Možno ste si všimli, že používam aj delenie zvyšku (%) počtom snímok, ktoré mám. Tento trik s ušami je potrebný na začatie show v novom kruhu. Takto to bude vyzerať doslova.

11.01.15 308976

Momentálne posuvník – karusel – funkcionalita, ktorú stačí mať na webe pre firmu, webe – portfóliu alebo akomkoľvek inom zdroji. Spolu s posúvačmi obrázkov na celej obrazovke sa horizontálne posúvače karuselu dobre hodia do akéhokoľvek webového dizajnu.

Niekedy by mal posuvník zaberať jednu tretinu stránky lokality. Tu sa posuvník kolotoča používa s prechodovými efektmi a s responzívne rozloženia... Stránky elektronického obchodu používajú posuvný posuvník na zobrazenie viacerých fotografií v jednotlivých príspevkoch alebo stránkach. Posuvný kód je možné voľne používať a meniť podľa vašich potrieb.

Použitím jQuery v spojení s HTML5 a CSS3 môžete urobiť svoje stránky zaujímavejšie, poskytnúť im jedinečné efekty a upozorniť návštevníkov na konkrétnu oblasť stránky.

Slick - moderný posuvný plugin - kolotoč

Slick je freeware plugin jquery, ktorého vývojári tvrdia, že ich riešenie uspokojí všetky vaše požiadavky na slider. Responzívny posúvač kolotoča môže fungovať v režime dlaždíc pre mobilné zariadenia a v režime presunutia myšou pre počítačovú verziu.

Obsahuje prechodový efekt "fade", zaujímavú funkciu "režim v strede", lenivé načítanie obrázkov s automatickým rolovaním. Aktualizované funkcie zahŕňajú pridávanie snímok a filter snímok. Všetko preto, aby ste si plugin mohli prispôsobiť podľa svojich požiadaviek.

Demo režim | Stiahnuť ▼

Owl Carousel 2.0 - jQuery - dotykový doplnok

Tento plugin má vo svojom arzenáli širokú škálu funkcií, ktoré sú vhodné pre začiatočníkov aj skúsených vývojárov. to aktualizovaná verzia posúvač - kolotoč. Jeho predchodca sa volal úplne rovnako.

Posuvník obsahuje niektoré vstavané doplnky na zlepšenie celkovej funkčnosti. Animácia, prehrávanie videa, automatické prehrávanie posúvača, lenivé načítanie, automatická korekcia výšky - hlavné črty Owl Carousel 2.0.

Schopnosti podpory ťahať a drop je súčasťou pre jednoduchšie používanie pluginu na mobilných zariadeniach.
Plugin je ideálny na zobrazovanie veľkých obrázkov aj na malých obrazovkách mobilných zariadení.

Príklady | Stiahnuť ▼

Plugin jQuery Silver Track

Pomerne malý, ale na funkčnosť bohatý doplnok jquery, ktorý vám umožňuje umiestniť na stránku posuvník - kolotoč, ktorý má malé jadro a nespotrebováva veľa zdrojov stránky. Plugin je možné použiť na zobrazenie vertikálnych a horizontálnych posuvníkov, animácií a vytváranie sád obrázkov z galérie.

Príklady | Stiahnuť ▼

AnoSlide – Ultra kompaktný responzívny posúvač jQuery

Ultra kompaktný posúvač jQuery - kolotoč s oveľa väčšou funkčnosťou ako bežný posúvač. Zahŕňajú Náhľad jeden obrázok, zobrazenie viacerých obrázkov v karuseli a posúvači podľa názvu.

Príklady | Stiahnuť ▼

Kolotoč sova - Jquery Slider - Kolotoč

Sovičkový kolotoč - posúvač s podperou dotykové obrazovky a technológie drag and drop, ktoré možno jednoducho vložiť do kódu HTML. Doplnok je jedným z najlepších posúvačov, ktorý vám umožňuje vytvárať krásne kolotoče bez špeciálne pripraveného označenia.

Príklady | Stiahnuť ▼

3D galéria - kolotoč

Používa 3D prechody založené na štýloch CSS a niektorých kódoch Javascript.

Príklady | Stiahnuť ▼

3D kolotoč pomocou TweenMax.js a jQuery

Skvelý 3D kolotoč. Zdá sa, že toto je stále beta verzia, pretože som s ňou práve teraz objavil niekoľko problémov. Ak máte záujem o testovanie a vytváranie vlastných sliderov, tento kolotoč vám veľmi pomôže.

Príklady | Stiahnuť ▼

Kolotoč pomocou bootstrapu

Responzívny posuvný posuvník využívajúci technológiu bootstrap vhodný pre váš nový web.

Príklady | Stiahnuť ▼

Založené na ráme posuvného kolotoča Bootstrap - Moving Box

Najžiadanejšie na portfóliových a obchodných stránkach. Tento typ posúvača kolotoča sa často nachádza na akomkoľvek type stránok.

Príklady | Stiahnuť ▼

Malý kruhový jazdec

Tento malý posúvač je pripravený pracovať na zariadeniach s akýmkoľvek rozlíšením obrazovky. Posuvník môže pracovať v kruhovom aj karuselovom režime. Malý kruh je prezentovaný ako alternatíva k inému podobnému typu posuvníkov. K dispozícii je vstavaná podpora operačné systémy IOS a Android.

Posuvník vyzerá celkom zaujímavo v kruhovom režime. Podpora drag and drop a automatický posuvný systém sú vynikajúco implementované.

Príklady | Stiahnuť ▼

Posuvník obsahu Thumbelina

Výkonný, responzívny posuvný posuvník je ideálny pre moderné webové stránky. Funguje správne na akomkoľvek zariadení. Má horizontálne a vertikálne režimy. Jeho veľkosť je minimalizovaná len na 1 KB. Ultra kompaktný plugin má tiež vynikajúce plynulé prechody.

Príklady | Stiahnuť ▼

Wow - posuvník - kolotoč

Obsahuje viac ako 50 efektov, ktoré vám môžu pomôcť vytvoriť originálny posuvník pre váš web.

Príklady | Stiahnuť ▼

Responzívny posúvač obsahu jQuery bxSlider

Zmeňte veľkosť okna prehliadača, aby ste videli, ako sa posúvač prispôsobuje. Bxslider prichádza s viac ako 50 možnosťami prispôsobenia a prezentuje svoje funkcie rôzne efekty prechody.

Príklady | Stiahnuť ▼

jCarousel

jCarousel je doplnok jQuery, ktorý vám pomôže usporiadať náhľad obrázka. Môžete jednoducho vytvoriť vlastné obrázky kolotoča z rámca zobrazeného v príklade. Posuvník reaguje a je optimalizovaný na prácu na mobilných platformách.

Príklady | Stiahnuť ▼

Scrollbox - doplnok jQuery

Scrollbox je kompaktný plugin na vytváranie posúvača - karuselu alebo riadku posúvania textu. Medzi hlavné znaky patrí efekt vertikálneho a horizontálne rolovanie s pauzou pri prejdení myšou.

Príklady | Stiahnuť ▼

dbpasCarousel

Jednoduchý posuvník - kolotoč. Ak chcete rýchly plugin, tento je 100% dobrý. Dodáva sa len so základnými funkciami potrebnými na fungovanie posúvača.

Príklady | Stiahnuť ▼

Flexisel: Responzívny doplnok JQuery Slider – kolotoč

Tvorcovia Flexisel sa inšpirovali starou školou doplnku jCarousel vytvorením zacielenia na kópie správna práca posúvač na mobilných zariadeniach a tabletoch.

Responzívne rozloženie Flexisel sa pri práci na mobilných zariadeniach líši od rozloženia orientovaného na veľkosť okna prehliadača. Flexisel je dokonale prispôsobený na prácu na obrazovkách s nízkym aj vysokým rozlíšením.

Príklady | Stiahnuť ▼

Elastislide - responzívny posúvač - kolotoč

Elastilide sa dokonale prispôsobí veľkosti obrazovky zariadenia. Môžete nastaviť minimálny počet obrázkov, ktoré sa majú zobraziť pri konkrétnom rozlíšení. Funguje dobre ako posuvný posuvník v galérii obrázkov s použitím pevného obalu v spojení s efektom vertikálneho posúvania.

Príklad | Stiahnuť ▼

FlexSlider 2

Voľne redistribuovateľný slider od Woothemes. Je považovaný za jeden z najlepšie reagujúcich posúvačov. Plugin obsahuje niekoľko šablón a bude užitočný pre začínajúcich používateľov aj odborníkov.

Príklad | Stiahnuť ▼

Úžasný kolotoč

Úžasný kolotoč - responzívny posuvník obrázky s jQuery. Podporuje mnoho systémov na správu stránok, ako sú WordPress, Drupal a Joomla. Podporuje tiež verzie operačných systémov Android a IOS a desktopové verzie bez akýchkoľvek problémov s kompatibilitou. Vstavané úžasné šablóny kolotoča vám umožňujú používať posúvač vo vertikálnom, horizontálnom a kruhovom režime.

1.jQuery clickCarousel

Blok s posúvajúcimi sa správami. Šípky doľava / doprava sa používajú na posúvanie blokov. Archivovaný kolotoč na dve časti štýlov: svetlo a tma.

1.jQuery carousel plugin "carouFredSel"

Čistý čerstvý kolotoč obrázky s jQuery.

4. jQuery Plugin: Elastislide Carousel

5. Plugin "TinyCarousel"

Skvelé posúvače obsahu v podobe kolotoča obrázkov pomocou jQuery. Ukážková stránka popisuje, ako pripojiť tento karusel k vašej lokalite.

Zásuvný modul Slider Kit, ľahký kolotoč s rôznymi metódami posúvania.

7.javascriptový kolotoč

8. Doplnok jQuery „Efekty navigácie v mriežke“

Originálna navigácia medzi miniatúrami obrázkov. Ak chcete zobraziť efekt na pravej strane ukážkovej stránky, kliknite na tlačidlá Hore a Dole. Toto riešenie jQuery tiež poskytuje efekt na umiestňovanie miniatúr a posúvanie kolieskom myši.

9. Svetelný kolotoč

10. Kolotoč z blokov Easy Paginate

plugin jQuery Jednoduché stránkovanie. Každý obdĺžnikový blok predstavuje bežnú položku zoznamu li, a ak obsahuje viac ako tri položky, na zobrazenie všetkých z nich je potrebné použiť posúvačovú navigáciu (pomocou šípok „dopredu“, „dozadu“ a pomocou navigácie tlačidlá v spodnej časti).

11. Vertikálny rotátor "Vertical Ticker"

Vertikálny rotátor JQuery: automatické posúvanie obsahu na stránke. K dispozícii sú navigačné tlačidlá, ako aj možnosť zastaviť rotáciu a znova ju spustiť. Keď prejdete myšou, pohyb sa zastaví. Na úrovni značiek HTML sú rolovacie bloky reprezentované bežnými položkami zoznamu li.

12.javascript css rolovacia oblasť

javascriptové riešenie „TinyScroller“ na vytvorenie rolovateľnej oblasti zabalenej v kontajneri DIV.

13. Doplnok jQuery "Smooth Div Scroll"

Plugin na implementáciu horizontálneho posúvania obsahu v špecifickej oblasti. Keď umiestnite kurzor myši na ľavý alebo pravý okraj oblasti, začne rolovanie.

Navigáciu medzi snímkami s obsahom je možné vykonať pomocou šípok alebo kliknutím na miniatúru. V spodnej časti sa nachádza tlačidlo Zobraziť, ktoré umožňuje skryť/zobraziť miniatúry alebo úplný popis snímky.

15. Rotátor obsahu "Circular Content Carousel".

17. Posúvač

Blok s posúvačom, ktorý sa zobrazí pri umiestnení kurzora myši. V obsahu sa môžete posúvať pomocou posúvača alebo kolieska myši.

Toto riešenie jQuery bolo inšpirované podobným efektom na webovej stránke spoločnosti Apple. Vývojári tejto korporácie vždy našli zaujímavé riešenia, ktoré inšpirovali webmasterov z celého sveta. Ak chcete doplnok predviesť, vyberte si z ľubovoľnej kategórie zo zoznamu.

19. Úžasný posúvač

Posuvník sa generuje automaticky. Údaje s názvom produktu, popisom, odkazom a adresou obrázka sú prevzaté zo súboru slider.db.txt. Použité technológie: CSS, PHP, jQuery.

20. Otáčanie blokov pomocou jQuery

Ak chcete vidieť účinok rotácie bloku, kliknite na jeden z malých obdĺžnikov na stránke ukážky

Na zobrazenie možno použiť napríklad plugin na posúvanie obsahu najnovšie správy alebo na zobrazovanie letákov na Twitteri na stránke.

22. Dynamický blok „Zákaznícke recenzie“

Automatické otáčanie obsahu bloku. Použité technológie: PHP, XML, CSS, jQuery.

Tento doplnok mapuje položky zoznamu (ul li) na prvky karuselu jQuery.

26. javascriptový kolotoč ImageFlow

Obrázky sa dajú jednoducho posúvať kolieskom myši.

27. Rolovanie obsahu

Kompaktná jednotka s oznámením najnovšie materiály na webe alebo novinkách. Ľavý stĺpec zobrazuje stránkovaný zoznam krátkych oznámení o najnovších správach. Pri výbere jedného z nich v pravý stĺpec zobrazí sa podrobnejší popis a odkaz na prečítanie plné znenie publikácií. Implementované pomocou jQuery.

Obrázky s odkazmi sa posúvajú, keď podržíte myš, posúvanie sa zastaví a zobrazí sa navigačná lišta. Po prejdení myšou na obrázok sa medzi ovládacími tlačidlami zobrazí aj jeho názov. Na stránke to vyzerá veľmi pekne

33. Posúvanie obsahu, doplnok Mootools "Scrollbar"

Posúvanie sa vykonáva pomocou posuvnej lišty aj kolieska myši.