glisor jquery cu previzualizare. Glisor de imagine personalizat folosind jQuery

Uneori trebuie să rezolv probleme legate de front-end, în ciuda faptului că nu-mi place :)

De fapt, ai putea estima atitudinea mea față de tot ce ține de „frumos” din designul acestui site, care a fost dezvoltat doar de mine :)

Cu toate acestea, relativ recent m-am confruntat cu nevoia de a implementa un glisor în JavaScript, iar acest lucru trebuia făcut fără biblioteci gata făcute și chiar fără jQuery favorit al tuturor.

Această nevoie a fost cauzată de faptul că rezultatul ar fi trebuit să fie un script JS care să fie conectat la site printr-un serviciu terță parte. În consecință, caruselele gata făcute în JavaScript nu mai erau necesare, deoarece Pentru a le integra, a fost necesar să adăugați o conexiune de bibliotecă la codul HTML al site-ului printr-o etichetă de script și să copiați fișierele în sine fie pe server, fie să le extrageți prin cdn, dar acest lucru ar necesita din nou editarea codului resursei.

Cum să faci un slider JavaScript: începutul

Astăzi, cred că toți cei care s-au găsit într-o situație similară au început prin a căuta dezvoltări existente, pentru că... atunci când sarcina de a realiza un carusel JS este în domeniul de aplicare, ar trebui să fie întotdeauna făcută cât mai repede posibil. Și în astfel de condiții, nimeni nu vă va permite să stați și să vă inventați propriile biciclete.

Clienților nu le pasă întotdeauna cum este scris codul, care este arhitectura lui, principalul lucru este să vadă rezultatul!

Ca rezultat, după cum înțelegeți, înainte de a scrie un slider în JavaScript fără jQuery, am decis să găsesc unul gata făcut și să îl modific pentru a se potrivi nevoilor mele. De ce nu jQuery? Da, pentru că pe resursa țintă, unde am plănuit să-mi conectez glisorul prin serviciu, apelul jQuery din cod a fost localizat mai târziu decât scriptul conectat de serviciu. Prin urmare, constructele jQuery din codul meu pur și simplu nu au fost percepute.

Ca bază, am luat acest slider de imagine JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.

Am decis să mă opresc acolo, pentru că... codul său JS a fost scris folosind principiile OOP și clasele sale se bazează pe prototipuri, nu pe funcții banale.

Sincer să fiu, nu înțeleg și nu recunosc hype-ul actual în jurul JavaScript-ului folosind POO, cadre și alte lucruri arhitecturale într-un limbaj care a fost inițial intenționat să fie un simplu limbaj de scripting dinamic. La fel ca JS în sine, îmi displace sincer cu vinaigreta sa sintactică, care permite ca aceleași construcții să fie scrise în mai multe moduri.

Dar, din păcate, în lumea modernă puțini oameni îmi împărtășesc pozițiile, pentru că... acest limbaj se dezvoltă într-un ritm nebun și chiar încearcă să câștige mințile dezvoltatorilor de backend care folosesc Node.js ca alternativă la Java, PHP, C#, Ruby și alți monștri.

Drept urmare, pentru a nu rămâne pur și simplu fără muncă, trebuie să vă dați seama în liniște JavaScript. Și în implementarea pură a sliderului JavaScript pe care am ales-o, am întâlnit ceva pe care, după cum înțelegeți, îl disprețuiesc în acest limbaj. De aceea l-am ales, astfel încât să existe măcar un motiv pentru a lucra și a înțelege JavaScript OOP și clasele prototip - altfel nu le-aș fi atins de bunăvoie în viața mea :)

Pe baza codului pe care l-am găsit, trebuia să dezvolt un glisor în JS pur într-o fereastră pop-up (acest lucru se mai numește și popup, popup etc.), care ar avea butoane pentru comutarea diapozitivelor și indicatori pe care se poate face clic ai curentului. diapozitiv. De asemenea, a fost necesar să se facă un buton pentru a închide această fereastră.

Cu asta am ajuns.

Realizarea unei biblioteci JS slider

În primul rând, am decis să implementez totul cu înțelepciune și să fac un slider JavaScript pentru site sub forma unei biblioteci care poate fi conectată la site cu un singur script, în care vor fi apelate componentele sliderului, împărțite în subdirectoare. Am decis să-l numesc popupSlider.js în onoarea scopului său inițial.

Codul său poate fi găsit pe GitHub la această adresă - https://github.com/Pashaster12/popupSlider.js

Structura bibliotecii este următoarea:

Dosarul de diapozitive este pentru imagini de diapozitive. Comenzile conține imagini ale comenzilor caruselului JS (butoane pentru închiderea glisorului și comutarea diapozitivelor). Și în active există elemente statice ale glisorului JS: marcaj HTML și un fișier cu stiluri CSS.

Ei bine, fișierul popupSlider.js este inima bibliotecii în sine, în care sunt scrise acțiunile JavaScript ale caruselului și se stabilește o conexiune cu alte fișiere. Acesta este pe care îl vom conecta pe site și îi va chema pe celelalte.

Am decis să încep cu Marcaj HTML caruselul nostru de imagini JS, care în cazul meu arată astfel:

Textul 1 Textul 2 Textul 3

Pentru a proiecta glisorul în JavaScript ca pop-up, am folosit următoarele stiluri:

#slider ( margine: automat; lățime: 600px !important; overflow: ascuns; ) #slider-wrapper ( lățime: 9999px; înălțime: 343px; poziție: relativă; tranziție: stânga 400ms liniar; ) .slide ( float: stânga; lățime : 600px; poziție: depășire relativă: ascuns; .caption (lățime: 600px; înălțime: 110px; înălțime: 1,5; dimensiunea fontului: 15px; greutatea fontului: 300; text-align: center; culoare: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav (poziție: absolut; jos: -36px; text-align: center; stânga: 50%; transformare: translateX(-50%); #slider-nav a ( lățime: 8px; înălțime: 8px; text-decor: #000; afișare: inline-block; chenar-rază: 50% ; margine: 0 5px; culoare de fundal: #fafafa ) #slider-nav a.current (culoare de fundal: #337ab7; ) .controale-orizontale (poziție: absolut; lățime: 12px; : 20px: 50% margin-top: -10px; stânga: -40px; ) #prev:hover ( fundal: url(../controls/arrow_left_active.png); ) #next ( fundal: url(../controls/arrow_right_inactive.png); dreapta: -40px; ) #next:hover ( fundal : url(../controls/arrow_right_active.png); #cq-popup ( lățime: 600px; z-index: 23; stânga: calc(50%); sus: calc(50%); poziție: fix !important ; background-repeat: no-repeat: #fff font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; %, -50%) scale(1); #cq-popup .header ( display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( lățime: 500px; font- dimensiune: 22px; înălțime de linie: 36px; ; înălțime: 16px; lățime: 16px ) #cq-popup-btclose: hover ( background: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( poziția: fix; 100%; inaltime: 100%; fundal: rgba(51,51,51,0.8); indicele z: 22; )

Ca rezultat al aplicării acestor stiluri JS, caruselul arată astfel:

Am mutat atât stilurile de marcare HTML, cât și CSS în fișiere separate popupSlider.html și popupSlider.css, care se află în directorul de active al bibliotecii glisante JavaScript. Am făcut acest lucru în mod intenționat, astfel încât, atunci când folosesc acest cod, utilizatorii să poată ajusta cu ușurință marcajul și designul fără a se încurca în codul JS, unde ceea ce ar trebui să fie scris ar trebui scris direct.

În plus, multor oameni încă le place să minimizeze JS pentru a accelera încărcarea site-ului. Deci ar fi foarte dificil să personalizați această soluție în condițiile specificate.

Ca urmare, am decis să includ pur și simplu fișiere gata făcute în fișierul bibliotecii principale popupSlider.js, care pentru sarcina mea a luat următoarea formă:

Funcție Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll) ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"("#prev"); navigate: function (); ) ( var self = this; for (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 = „blocare”; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: funcție (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(); } } };

Câteva comentarii despre codul de mai sus. Conținutul fișierului popupSlider.js este o singură clasă JavaScript Slider, care, ca și în PHP, conține un constructor și metode de clasă. Numai în JS, definiția unui constructor, spre deosebire de PHP, este obligatorie.

Constructorul este definit folosind următorul construct:

Funcție Slider(element) ( //cod constructor)

În interiorul constructorului trebuie specificate acțiunile care vor fi efectuate la crearea unui obiect de clasă.

Metodele clasei în sine vor fi localizate în interiorul prototipului și vor fi disponibile pentru toate instanțele acestei clase JavaScript. Prototipul JS în cazul meu este descris de următorul design:

Slider.prototype = ( //metode )

Aceștia vor fi chemați în afara corpului clasei după cum urmează:

Var slider = new Slider(); slider.class_method();

Și în interiorul codului clasei este disponibilă următoarea metodă:

This.class_method();

Principalul lucru este să nu uiți că în Sensul JavaScript aceasta depinde de contextul apelului, deci în corpurile unor metode în care a fost necesar să apelăm metode și proprietăți ale clasei, există o astfel de construcție:

Var self = aceasta; self.class_method(); // pentru a accesa o metodă care este cu un nivel mai mare decât codul metodei descrise

Se pare că am vorbit despre toate nuanțele scrierii codului. Acum câteva cuvinte despre metodele clasei noastre JavaScript, care conțin descrieri ale acțiunilor JS ale caruselului de imagini.

loadStatic()

Prima metodă numită atunci când o instanță a unei clase este creată în constructor. Responsabil pentru adăugarea unui marcaj de glisare și a unui fișier cu stiluri la codul HTML al paginii site-ului.

În primul rând, o nouă etichetă de legătură este creată în memorie folosind funcția JavaScript document.createElement() și îi sunt atribuite valorile tuturor atributelor necesare, inclusiv calea către fișierul CSS cu stilurile de glisare JS. Și în cele din urmă, este adăugat la pagina HTML folosind Metoda JavaScript appendChild() la sfârșitul secțiunii head, unde ar trebui să fie stilurile.

Apoi, facem același lucru pentru fișierul cu marcajul HTML al glisorului nostru în JavaScript pur. Există doar o mică nuanță aici: nu puteți include doar un fișier HTML în același fișier, așa cum am făcut cu un fișier CSS. Există biblioteci speciale pentru aceasta, de exemplu, pentru a include HTML în HTML, lib de la w3.org este excelentă - https://www.w3schools.com/howto/howto_html_include.asp

Dar atunci ar trebui fie să fie inclus în biblioteca de glisare, fie să le ceară utilizatorilor să o instaleze ei înșiși. Dar toate acestea sunt suboptimale, pentru că... necesită multe mișcări ale corpului și încetinește viteza de încărcare a site-ului datorită scripturilor suplimentare.

Drept urmare, am decis să primesc conținutul fișier HTMLîn codul JavaScript și încărcați-l într-un nou element div creat în memorie, așa cum am făcut mai devreme pentru conexiuni CSS fișier în JavaScript. Elementul generat este inclus la sfârșitul secțiunii body a codului HTML al paginii site-ului.

Dacă doriți să inserați un div cu marcaj glisor nu doar la sfârșitul corpului, ci într-un anumit container, puteți în loc de următorul cod:

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

Introduceți următoarele, indicând identificatorul necesar container țintă (în cazul meu, JS HTML al glisorului va fi localizat în elementul cu id popupSlider):

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

Metoda, care este apelată în constructor după loadStatic(), este necesară pentru a inițializa proprietățile clasei corespunzătoare celor principale elemente HTML, pe care îl vom accesa în următorul cod.

La final, este apelată metoda navigate().

naviga ()
În această metodă, acțiunile care apar atunci când faceți clic pe butoanele comutatorului cu glisare și pe elementele de navigare situate sub glisorul în sine sunt indicate sub formă de cercuri.

Pentru comoditate, am mutat codul JavaScript pentru schimbarea diapozitivelor într-o metodă separată slide(), dar în aceasta doar îl atașez la evenimentul clic pentru fiecare buton rotund din buclă.

Când faceți clic pe butoanele „diapozitivul anterior” / „diapozitivul următor”, după cum puteți vedea, am decis să emulez doar un clic pe cercul corespunzător, determinându-l pe cel dorit în raport cu cel curent, care are Clasa CSS actual.

slide(element)

Metoda „responsabilă pentru magia” a caruselului JavaScript în sine, care conține codul care schimbă pozițiile diapozitivelor. La început, este apelată metoda setCurrentLink(), despre care vom vorbi puțin mai târziu.

Obiectul butonului de navigare glisor JS sub forma unui cerc îi este transmis ca parametru de intrare.

Comutatorul glisant în sine funcționează astfel:

Toate toboganele noastre sunt proiectate sub formă de blocuri de aceeași dimensiune, unul după altul. Fereastra glisor este doar partea vizibilă a elementului care conține toate diapozitivele.

Definim offset-ul marginii din stânga a slide-ului curent față de marginea din stânga a elementului părinte folosind proprietatea offsetLeft.

Și deplasăm elementul părinte cu această valoare, astfel încât elementul necesar să fie afișat în fereastra glisor.

La sfârșitul metodei, este descris comportamentul butoanelor „diapozitivul anterior”/”diapozitivul următor”, concepute ca săgeți stânga/dreapta, respectiv. Dacă diapozitivul curent este primul din întreaga listă, atunci butonul pentru a merge la diapozitivul anterior este ascuns. Dacă acesta din urmă, atunci eliminați butonul pentru a trece la următorul diapozitiv.

setCurrentLink(link)

Această metodă a clasei noastre de glisare JavaScript este responsabilă pentru evidențierea butonului rotund de navigare corespunzător elementului curent. Acestea. dacă avem al doilea slide selectat, al doilea buton va fi evidențiat.

Obiectul butonului care ar trebui selectat ca fiind cel curent este transmis ca parametru de intrare funcției.

Logica de evidențiere a elementului curent este simplă:

Obținem obiectul elementului părinte, care în cazul nostru este containerul cu identificatorul slider-nav .

Obținem toate elementele de navigare ca o serie de link-uri.

Selectăm elementul primit ca intrare adăugându-l la clasa curentă.

Într-o buclă, parcurgem toate elementele de navigare și ștergem valoarea clasei pentru toate, cu excepția celei curente. Acest lucru este necesar pentru a deselecta elementul care era curent înainte de apelul acestei funcții.

Ultima metodă a clasei, care definește acțiunea atunci când faceți clic pe butonul de închidere al glisorului sub forma unei cruci. Aici, de fapt, codul este cel mai ușor de înțeles dintre toate conținute în clasa glisor JS.

Când faceți clic pe butonul de închidere, care este accesat prin identificatorul acestuia, elementul glisor și elementul care stabilește fundalul translucid sunt eliminate din pagină. Ele sunt, la rândul lor, obținute prin identificatori unici.

Metoda în sine este numită în navigate(), descris anterior, care conține toate scenariile de acțiuni care au loc pe glisorul nostru JavaScript.

Apropo, dacă doriți să închideți glisorul când faceți clic în afara lui, atunci adăugați următorul cod la această metodă:

Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;

Prezentare de diapozitive JavaScript bazată pe biblioteca dezvoltată

Uneori, în practică, este posibil să aveți nevoie să faceți un carusel de derulare JS, care este adesea numit o prezentare de diapozitive. În cazul meu, acest lucru nu era necesar, dar am decis totuși să fac unul pe baza codului final al bibliotecii pentru un caz în care ar putea fi util.

De fapt, implementarea JavaScript a unei prezentări de diapozitive diferă destul de puțin de un slider obișnuit. Singura diferență este că într-o prezentare de diapozitive, slide-urile comută automat la un anumit interval de timp, în timp ce în cazul unui carusel JS obișnuit se schimbă manual folosind elemente de navigare.

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

Cred că este clar ce se întâmplă aici. Pentru a crea această metodă, am copiat codul din evenimentul de clic al butoanelor de slide manuale și l-am plasat într-un apel JavaScript la funcția setInterval(), care nu acțiune specificată după o anumită perioadă de timp.

Scriptul de acțiune este trecut ca prim argument ca funcție anonimă, iar intervalul de timp este trecut ca al doilea, pe care am decis să îl fac ca o variabilă a cărei valoare este transmisă atunci când este apelată slideShow().

Singura modificare a codului din setInterval() care a fost necesară a fost de a determina numărul de diapozitive și de a compara indexul diapozitivului curent cu acesta pentru buclă comutare automată.

Ei bine, și pentru a acest cod câștigat, metoda în sine trebuie apelată. Am decis să fac toate acestea în același navigate(), care este tocmai o colecție de tot felul de scripturi. Am plasat apelul la sfârșit, trecând ca argument valoarea intervalului de timp pentru schimbarea automată a diapozitivelor din prezentarea noastră de diapozitive JS (am ales 2000 de milisecunde sau 2 secunde, puteți modifica acest număr după cum este necesar):

Self.slideShow(2000);

După acea verificare Funcționează JavaScript glisor, fără a uita să curățați browserul.

În teorie, totul ar trebui să funcționeze. Dacă nu, studiază erorile din consola browserului și distribuie-le în comentarii.

Ca rezultat, am obținut o expunere de diapozitive JS în care diapozitivele comută automat și într-un cerc, de exemplu. când se ajunge la ultimul diapozitiv, spectacolul intră într-o nouă buclă și spectacolul începe din nou de la primul element.

Când lucram cu diferite biblioteci JS pentru carusele de imagini și recenzii, am observat că dezvoltatorii folosesc în mod activ această practică, dar cu ceva adaos. În toate soluțiile pe care le-am văzut, prezentarea automată de diapozitive este întreruptă dacă utilizatorul face o comutare manuală. Așa că am decis să fac același lucru în biblioteca mea.

Pentru a întrerupe afișarea automată a diapozitivelor din carusel JavaScript, am decis să folosesc funcția standard JS clearInterval(), căreia îi trec ca argument identificatorul intervalului de timp returnat de funcția setInterval() atunci când este setată.

Drept urmare, am primit următorul cod, pe care am decis să nu îl scriu ca metodă separată:

ClearInterval(self.slideCycle);

Și așezat-o în locurile în care sunt descrise acțiunile când faceți clic pe diverse elemente navigație, adică în cele ce urmează:

Link.addEventListener("click", funcția (e) (...)); self.prevBtn.addEventListener(„clic”, funcția (e) (...)); self.nextBtn.addEventListener(„clic”, funcția (e) (...));

Este mai bine să apelați clearInterval() mai aproape de evenimentul clic în sine, principalul lucru este înaintea acestuia și nu după el.

Integrarea cursorului JavaScript în site-ul web

Deci, glisorul nostru în JS pur este gata. Acum nu mai rămâne decât să-l conectați la site.

Pentru a face acest lucru, trebuie să efectuați secvențial următorii pași, care sunt acțiuni standard atunci când integrați biblioteci JavaScript terțe în general.

Pasul 1 . Copiem fișierele bibliotecii pe site-ul nostru web într-un director separat.
Pasul 2. Adăugați următorul cod la codul HTML al paginilor în care va trebui să fie afișat glisorul, plasându-l înaintea etichetei de închidere a corpului:

Pasul 3. Plasăm următorul cod pentru a apela caruselul JS în orice fișier JavaScript existent, care este inclus în pagină după conectarea glisorului în sine:

Var aSlider = new Slider("#slider");

După cum puteți vedea, acest cod creează în esență un obiect al clasei Slider, care este conținut în popupSlider.js. De aceea ar trebui apelat numai după conectarea fișierului de clasă în sine la pagină.

Adăugarea de noi diapozitive la un carusel JavaScript

Totul este foarte simplu aici. Deoarece diapozitivele noastre sunt preluate dintr-un director separat al bibliotecii de diapozitive, atunci când adăugați imagini noi, va trebui doar să aruncați fișierele necesare în el, după ce le-ați dat mai întâi aceeași dimensiune ca și celelalte.

Și apoi în codul fișierului assets/popupSlider.html adăugați un nou bloc la container cu id slider-wrapper :

Text

În principiu, puteți pur și simplu să copiați unul similar existent și să schimbați calea către fișierul imagine și textul semnăturii (dacă este necesar).

De asemenea, va trebui să adăugați element nou navigare sub formă de cerc, deoarece pe acest moment adăugarea sa automată nu a fost încă implementată. Pentru a face acest lucru, va trebui să adăugați următorul cod în container cu id-ul slider-nav, scriindu-l la sfârșit:

Valoarea atributului data-slide trebuie să fie mai mare decât cea mai mare valoare a celorlalte elemente. Este suficient doar să crești curentul maxim cu unul.

Ambalarea caruselului JS într-un singur script

Gata, glisorul JavaScript este gata și conectat. Recomand personal să folosiți această opțiune în practică dacă aveți nevoie de ea :)

Pentru a-i accelera funcționarea, apropo, puteți comprima și mai mult componentele statice: fișiere CSS, HTML și JavaScript. Nu am făcut asta și ți-am oferit cod minimizat, pentru că acum există o mulțime de sisteme de construcție frontend: Gulp, Grunt, Webpack și altele. Și fiecare dintre ele are propriii algoritmi pentru comprimarea și conectarea fișierelor.

În plus, rezultatele reduse pot funcționa diferit pe diferite sisteme de operare. În general, există multe motive.

Și codurile sursă în sine, cred, nu sunt atât de grele încât să aibă nevoie de această procedură. Dar dacă aveți nevoie de ele, configurați singur minificarea, ținând cont de sistemul de operare și de colector.

După cum am scris la început, pentru a rezolva sarcina stabilită inițial pentru mine, trebuia să obțin un singur fișier JS pentru utilizarea corectă a glisorului meu printr-un serviciu terță parte de pe site. Din acest motiv, eu, strict vorbind, nu am folosit biblioteci gata făcute de la terți.

Apoi opțiunea unui singur Script JavaScript Caruselele vă vor fi la îndemână, deoarece... tot conținutul va fi conținut direct în acesta, inclusiv codul HTML/CSS, care în cazul unei biblioteci este stocat în fișiere separate.

În cazul meu, scenariul constă din două părți. Prima parte conținea conținutul fișierului popupSlider.js, pe care nu îl voi prezenta a doua oară. Introduceți-l singur, eliminând descrierea metodei loadStatic() și apelul acesteia din codul clasei, deoarece nu vom avea nevoie de ele.

A doua parte a unui singur script glisor JavaScript pentru site este un handler pentru evenimentul DOMContentLoaded, care are loc atunci când conținutul paginii este încărcat.

Acolo vom adăuga codul JS carusel la pagina HTML/CSS și vom crea un obiect din clasa Slider, ceea ce echivalează cu activarea slider-ului în sine.

Schematic codul arată astfel:

/* conținutul popupSlider.js fără a descrie metoda loadStatic() și apelul acesteia */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /* cod css*/ \ /* cod html */ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");

Deoarece în cazul meu opțiunea de încărcare a fișierelor pe server a fost complet închisă, a trebuit să încarc fișierele imagine ale comenzilor caruselului JavaScript în cloud și în locul căilor către acestea în codul HTML și CSS, să scriu linkurile generate atunci când economisire.

Dacă nu aveți astfel de dificultăți, atunci nu trebuie să schimbați nimic, dar nu uitați să copiați directoarele bibliotecii de diapozitive și controale pe server și să specificați modurile corecte lor.

Slider JS personalizat - perspective de dezvoltare

Sincer să fiu, nu intenționez să mă angajez în suport și dezvoltare direcționată a soluției pe care am creat-o :) În acest moment, există o grămadă de glisoare similare și un cărucior mic, care, spre deosebire de al meu, au propria lor istorie, sunt testate temeinic și sunt susținute de o comunitate mare de utilizatori și dezvoltatori.

Cumva nu este interesant pentru mine să încep toată această călătorie de la zero singur și să creez o altă bicicletă și nu prea am timp pentru asta. Dar dat JavaScript Glisorul este o oportunitate excelentă de a practica dezvoltarea prin refactorizarea codului său și implementarea de noi funcții interesante care ar putea să nu existe încă.

Deci, dacă, ca mine, aveți nevoie de o bază de cod pentru experimente și aveți cel puțin ceva în plus timp liber— copiați codul glisorului JavaScript pe care l-am descris sau alăturați-vă colaboratorilor de pe GitHub. Depozitul este deschis și am oferit un link către el la începutul articolului.

Dacă doriți să vă îmbunătățiți abilitățile de front-end cu privire la creația mea, vă pot oferi chiar și o mică listă de editări și îmbunătățiri de care are nevoie codul și care ar putea fi de interes pentru dvs. în ceea ce privește implementarea lor:

faceți o configurație externă, astfel încât să puteți configura ușor glisorul;

face posibilă încorporarea unui glisor în interiorul paginii (în prezent este conceput doar ca pop-up);

asincron se încarcă HTML cod (acum făcut sincron, care este marcat ca depășit de multe browsere);

împachetați biblioteca ca pachet, NPM, Bower sau alt pachet, astfel încât să poată fi instalată și dependențele gestionate folosind manageri de pachete;

faceți aspectul adaptabil pentru utilizarea caruselului JS pe diverse dispozitive;

faceți comutarea diapozitivelor pe baza evenimentului Swipe pentru utilizatorii de telefonie mobilă.

Lista editărilor pe care am dat-o este, desigur, nu definitivă și poate fi completată. Scrieți despre sugestiile, gândurile și dorințele dvs. în comentariile de mai jos articol și împărtășiți-le prietenilor prin rețelele de socializare pentru a-i implica și pe aceștia în dezvoltare.

Vă rog să nu judecați codul meu cu strictețe, pentru că, așa cum am spus deja, nu mă consider un specialist Frontend și nu sunt. De asemenea, sunt deschis la toate comentariile tale despre stilul de codare și sper că pot învăța ceva de la tine și tu de la mine, de exemplu. îndeplini scopul principal de a dezvolta și susține produse OpenSource.

Alăturați-vă comunităților de proiect, abonați-vă la actualizări și chiar mă puteți ajuta financiar folosind formularul de sub articol în sine, dacă am putut să vă ajut cu ceva sau pur și simplu vă place ceea ce fac :)

Atât am vrut să spun! Toate cele bune! 🙂

P.S. : dacă aveți nevoie de un site web sau trebuie să faceți modificări unuia existent, dar nu există timp sau dorință pentru asta, îmi pot oferi serviciile.

Peste 5 ani de experiență în dezvoltarea profesională a site-urilor web. Lucrul cu PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular și alte tehnologii de dezvoltare web.

Experienta in dezvoltarea de proiecte la diferite niveluri: landing pages, site-uri corporative, magazine online, CRM, portaluri. Inclusiv suport și dezvoltare de proiecte HighLoad. Trimiteți aplicațiile prin e-mail [email protected].

Permiteți-mi să încep prin a spune că acest articol a fost scris pentru a vorbi despre cum să creați un glisor de defilare a imaginii pentru paginile web. Acest articol nu este în niciun caz de natură educațională, ci servește doar ca un exemplu al modului în care obiectul nostru de considerare poate fi implementat. Puteți folosi codul oferit în acest articol ca șablon pentru dezvoltări similare. Sper că voi putea transmite cititorului esența a ceea ce am scris în mod suficient de detaliat și într-un mod accesibil.

Și acum la obiect, nu cu mult timp în urmă trebuia să instalez un glisor pe un site, dar după ce am căutat pe Internet scripturi gata făcute, nu am găsit nimic util, pentru că unele nu au funcționat așa cum aveam nevoie, în timp ce altele nu au pornit deloc fără erori în consolă. Mi s-a părut prea neinteresant să folosesc pluginuri jQuery pentru glisor, pentru că... Deși acest lucru va rezolva problema, nu voi înțelege cum funcționează acest mecanism, iar utilizarea unui plugin pentru un singur glisor nu este foarte optimă. De asemenea, nu prea aveam chef să înțeleg scripturile strâmbe, așa că am decis să-mi scriu propriul script pentru glisor, pe care l-aș marca chiar eu după cum aveam nevoie.

În primul rând, trebuie să decidem cu privire la logica cursorului în sine și apoi să trecem la implementare. În această etapă, o înțelegere clară a funcționării acestui mecanism este foarte importantă, deoarece fără el nu putem scrie cod care funcționează exact așa cum am. vrei.

Obiectul nostru principal va fi viewport, adică un bloc în care vom vedea cum se învârt pozele noastre, în el vom avea un slidewrapper, acesta va fi blocul nostru care conține toate imaginile aliniate într-o singură linie și care se va schimba. poziţia sa în interiorul fereastra în sine.

Apoi, pe părțile laterale din interiorul ferestrei de vizualizare, pe verticală în mijloc, vor exista butoane înapoi și înainte, când facem clic, vom schimba și poziția slidewrapper-ului nostru în raport cu fereastra, provocând astfel efectul de defilare a imaginilor. Și, în sfârșit, ultimul obiect va fi butoanele noastre de navigare, situate în partea de jos a ferestrei de vizualizare.

Când facem clic pe ele, ne vom uita pur și simplu la numărul de serie al acestui buton și îl vom muta în diapozitivul de care avem nevoie, din nou prin deplasarea slidewrapper-ului (deplasarea se va face prin modificarea proprietății transform css, a cărei valoare va fi calculate constant).

Cred că logica modului în care funcționează toată treaba ar trebui să fie clară după ce am afirmat mai sus, dar dacă undeva mai apar neînțelegeri, atunci totul va deveni mai clar în codul de mai jos, trebuie doar puțină răbdare.

Acum hai sa scriem! Mai întâi de toate, să deschidem fișierul nostru index și să scriem acolo markupul de care avem nevoie:

După cum puteți vedea, nu este nimic complicat, block-for-slider servește doar ca bloc în care va fi plasat glisorul nostru, în interiorul acestuia se află fereastra în sine, în care se află slidewrapper-ul nostru, de asemenea o listă imbricată, aici sunt slide-urile și img sunt imagini în interiorul lor. Vă rugăm să fiți atenți la faptul că toate imaginile trebuie să aibă aceeași dimensiune sau cel puțin proporții, altfel glisorul va arăta strâmb, deoarece dimensiunile sale depind direct de proporțiile imaginii.

Acum trebuie să stilizăm toată această chestiune, de obicei, stilurile nu sunt comentate în mod deosebit, dar am decis să atrag în continuare atenția asupra acestui lucru, astfel încât să nu existe neînțelegeri în viitor.

body ( margine: 0; padding: 0; ) #block-for-slider ( lățime: 800px; margine: 0 auto; margin-top: 100px; ) #viewport ( lățime: 100%; afișare: tabel; poziție: relativă; overflow: hidden -webkit-user-select: -ms-user-select: none: 100%; : 1s; -funcție de sincronizare a tranziției: ease-in-out -o-transition-timing-function: ease-in-out-funcție: ease-in-out ) #slidewrapper li; ( margine: 0; umplutură: 0; ) #slidewrapper li ( lățime: calc(100%/4); stil listă: niciuna; afișare: inline; float: stânga; ) .slide-img ( lățime: 100%; )

Să începem cu block-for-slider , acesta, din nou, este blocul nostru de pe pagină, pe care îl vom aloca pentru glisor, înălțimea acestuia va depinde de lățimea sa și de proporțiile imaginii noastre, deoarece viewport-ul ocupă toată lățimea blocului-pentru-slider , apoi slide-ul în sine are aceeași lățime și, în consecință, imaginea din interiorul său își schimbă înălțimea în funcție de lățime (proporțiile sunt păstrate). Am plasat acest element pe pagina mea orizontal în mijloc, cu 100px indentat din partea de sus, făcându-i poziția mai convenabilă pentru exemplu.

Elementul viewport, așa cum am menționat deja, ocupă întreaga lățime a blocului pentru slider, are proprietatea overflow:hidden, acest lucru ne va permite să ne ascundem fluxul de imagini, care se extinde dincolo de viewport.

Următoarea proprietate CSS este user-select:none , ceea ce vă permite să scăpați de evidențierea albastră a elementelor glisante individuale atunci când faceți clic pe butoane de mai multe ori.

Trecând la slidewrapper, de ce poziție:relativă și nu absolută? Totul este foarte simplu, pentru că... dacă alegem a doua opțiune, atunci cu viewport overflow:proprietatea ascunsă, nu ne va apărea absolut nimic, deoarece fereastra în sine nu se va ajusta la înălțimea slidewrapper-ului, motiv pentru care va avea înălțime:0 . De ce contează lățimea și de ce o setăm deloc? Ideea este că diapozitivele noastre vor avea o lățime egală cu 100% din fereastra de vizualizare, iar pentru a le alinia avem nevoie de un loc unde vor sta, așa că lățimea slidewrapper-ului ar trebui să fie egală cu 100% din lățimea ferestrei de vizualizare. înmulțit cu numărul de diapozitive (în cazul meu, 4). În ceea ce privește tranziția și funcția de sincronizare a tranziției, aici 1s înseamnă că schimbarea poziției slidewrapper-ului va avea loc în decurs de 1 secundă și o vom observa, iar ease-in-out este un tip de animație în care mai întâi merge încet și accelerează până la mijloc și apoi încetinește din nou, aici puteți seta valorile la discreția dvs.

Următorul bloc de proprietăți setează slidewrapper-ul și copiii săi să aibă zero padding, fără comentarii necesare aici.

Apoi, ne stilăm diapozitivele, lățimea lor ar trebui să fie egală cu lățimea ferestrei de vizualizare, dar deoarece... sunt într-un slidewrapper a cărui lățime este egală cu lățimea ferestrei de vizualizare înmulțită cu numărul de diapozitive, apoi pentru a obține din nou lățimea ferestrei de vizualizare, trebuie să împărțim 100% din lățimea slidewrapperului la numărul de diapozitive (în cazul meu, din nou, prin 4). Apoi le vom transforma în elemente inline folosind display:inline și vom seta float la stânga adăugând proprietatea float:left. Despre list-style:none pot spune că îl folosesc pentru a elimina markerul implicit din li , în cele mai multe cazuri este un fel de standard.

Cu slide-img totul este simplu, imaginea va ocupa toată lățimea diapozitivului, slide-ul se va ajusta la înălțimea sa, slidewrapper se va ajusta la înălțimea diapozitivului, iar înălțimea ferestrei de vizualizare va lua la rândul său valoarea înălțimii de slidewrapper , deci înălțimea sliderului nostru va depinde de proporțiile imaginii și de dimensiunea blocului , prevăzut pentru slider, despre care am scris deja mai sus.

Cred că în acest moment ne-am dat seama de stiluri, haideți să facem o expunere de diapozitive simplă, fără butoane, și după ce ne asigurăm că funcționează corect, le vom adăuga și le vom stila.

Să deschidem fișierul nostru js, care va conține codul slider, nu uitați să conectați jQuery, deoarece Vom scrie folosind acest cadru. Apropo, la momentul scrierii acestui articol, folosesc jQuery versiunea 3.1.0. Fișierul cu scriptul în sine trebuie inclus la sfârșit eticheta corporală, deoarece vom lucra cu elemente DOM care trebuie inițializate mai întâi.

Deocamdată, trebuie să declarăm câteva variabile, una va stoca numărul diapozitivului pe care îl vedem la un moment dat în fereastra de vizualizare, l-am numit slideNow, iar a doua va stoca numărul acestor diapozitive, acesta este slideCount.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Variabila slideNow trebuie setată la o valoare inițială de 1 deoarece Când pagina se încarcă, pe baza markupului nostru, vom vedea primul diapozitiv în fereastra de vizualizare.

În slideCount vom plasa numărul de elemente copil din slidewrapper, totul este logic aici.
Apoi, trebuie să creați o funcție care va fi responsabilă pentru comutarea diapozitivelor de la dreapta la stânga, să o declarăm:

funcția nextSlide() ( )

Îl vom numi în blocul principal al codului nostru, la care vom ajunge mai târziu, dar deocamdată vom spune funcției noastre ce trebuie să facă:

funcția nextSlide() ( dacă (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )

Mai întâi verificăm dacă ne aflăm în prezent pe ultimul slide al feedului nostru? Pentru a face acest lucru, luăm numărul tuturor diapozitivelor noastre folosind $("#slidewrapper").children().length și îl verificăm cu numărul diapozitivului nostru, dacă acestea sunt egale, atunci aceasta înseamnă că trebuie să începem să arătăm feed-ul din nou, de la 1 slide , ceea ce înseamnă că schimbăm proprietatea de transformare CSS a slidewrapper-ului la translate(0, 0) , mutându-l astfel în poziția inițială, astfel încât primul diapozitiv să fie în câmpul nostru vizual, să nu uităm de asemenea despre –webkit și –ms pentru afișare adecvată între browsere (consultați referința proprietăților .css). După aceasta, nu uitați să actualizați valoarea variabilei slideNow, spunându-i că diapozitivul numărul 1 este vizibil: slideNow = 1;

Aceeași condiție include verificarea ca numărul diapozitivei pe care îl vedem să se încadreze în numărul diapozitivelor noastre, dar dacă cumva acest lucru nu este îndeplinit, atunci vom reveni din nou la primul diapozitiv.

Dacă prima condiție nu este îndeplinită, înseamnă că în prezent nu suntem nici pe ultimul diapozitiv, nici pe unul inexistent, ceea ce înseamnă că trebuie să trecem la următorul, vom face acest lucru deplasând slidewrapper-ul la stânga. cu valoarea egală cu lățimea ferestrei de vizualizare, deplasarea va avea loc din nou prin proprietatea translate familiară, a cărei valoare va fi egală cu „translate(” + translateWidth + „px, 0)” , unde translateWidth este distanța la care slidewrapper este deplasat. Apropo, să declarăm această variabilă la începutul codului nostru:

var translateWidth = 0;

După ce trecem la următorul diapozitiv, să spunem slideNow nostru că vedem următorul diapozitiv: slideNow++;

În acest moment, unii cititori s-ar putea să se întrebe: de ce nu am înlocuit $("#viewport").width() cu o variabilă precum slideWidth pentru a avea întotdeauna la îndemână lățimea diapozitivului nostru? Răspunsul este foarte simplu, dacă site-ul nostru este adaptiv, atunci, în consecință, blocul alocat pentru glisor este și adaptiv, pe baza acestui lucru putem înțelege că atunci când redimensionăm lățimea ferestrei fără a reîncărca pagina (de exemplu, pornirea telefonului partea sa), lățimea ferestrei de vizualizare se va modifica și, în consecință, lățimea unui diapozitiv se va modifica. În acest caz, slidewrapper-ul nostru va fi mutat la valoarea lățimii care a fost inițial, ceea ce înseamnă că imaginile vor fi afișate în părți sau nu vor fi afișate deloc în fereastra de vizualizare. Scriind $("#viewport").width() în loc de slideWidth în funcția noastră, îl forțăm să calculeze lățimea ferestrei de vizualizare de fiecare dată când comutăm diapozitive, asigurându-ne astfel că atunci când lățimea ecranului se schimbă brusc, acesta va derula la toboganul de care avem nevoie.

Totuși, am scris o funcție, acum trebuie să o apelăm după un anumit interval de timp, putem stoca și intervalul într-o variabilă, astfel încât dacă vrem să o modificăm, să putem schimba doar o singură valoare din cod:

var slideInterval = 2000;

Timpul în js este indicat în milisecunde.

Acum să scriem următoarea construcție:

$(document).ready(funcție () ( setInterval(nextSlide, slideInterval); ));

Totul nu poate fi mai simplu aici prin construcția $(document).ready(function () ()) spunem că următoarele acțiuni trebuie efectuate după sarcina completa document. Apoi, apelăm pur și simplu funcția nextSlide cu un interval egal cu slideInterval folosind funcția încorporată setInterval.

După toate acțiunile pe care le-am efectuat mai sus, glisorul nostru ar trebui să se rotească perfect, dar dacă ceva nu merge bine pentru tine, atunci problema poate fi fie versiuni jQuery, fie în conexiune incorectă orice fișiere. De asemenea, nu este necesar să excludeți faptul că ați fi putut face o eroare undeva în cod, așa că vă pot sfătui doar să verificați totul.

Între timp, să mergem mai departe, adăugăm la glisorul nostru o funcție, cum ar fi oprirea derulării când trecem cursorul. Pentru a face acest lucru, trebuie să scriem următorul lucru în blocul principal de cod (în interiorul $(document). funcția () ()) structură:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Pentru a începe să analizăm acest cod, trebuie să știm ce este switchInterval. În primul rând, aceasta este o variabilă care stochează apelul periodic la funcția nextSlide, pur și simplu, avem această linie de cod: setInterval(nextSlide, slideInterval); , transformat în acesta: switchInterval = setInterval(nextSlide, slideInterval); . După aceste manipulări, blocul nostru principal de cod a luat următoarea formă:

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval); ( nextSlide, slideInterval);

Aici folosesc evenimentul hover, care înseamnă „la hover”, acest eveniment îmi permite să urmăresc momentul în care trec cursorul peste un obiect, în acest caz fereastra de vizualizare.

După trecerea cu mouse-ul, șterg intervalul, pe care îl indică în paranteze (acesta este switchInterval-ul nostru), apoi, despărțit prin virgule, scriu ce voi face când voi muta cursorul înapoi, în acest bloc atribuim din nou switchInterval-ul nostru unui periodic. apelați la funcția nextSlide.

Acum, dacă testăm, putem vedea cum reacționează cursorul nostru la hover, oprind comutarea slide-ului.

Acum este timpul să adăugați butoane la glisorul nostru, să începem cu butoanele înainte și înapoi.

În primul rând, să le marchem:

La început, acest marcaj poate fi de neînțeles, voi spune imediat că am împachetat aceste două butoane într-un singur div cu clasa prev-next-btns doar pentru confortul dvs., nu trebuie să faceți acest lucru, rezultatul nu va schimbați, acum le vom adăuga stiluri și totul va fi bine. Este clar:

#prev-btn, #next-btn ( poziție: absolut; lățime: 50px; înălțime: 50px; culoarea fundalului: #fff; raza chenarului: 50%; sus: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover (cursor: pointer; ) #prev-btn (stânga: 20px; ) #next-btn (dreapta: 20px; )

Mai întâi, ne poziționăm butoanele utilizând position:absolute, controlând astfel liber poziția lor în fereastra noastră de vizualizare, apoi vom specifica dimensiunile acestor butoane și vom folosi raza de margine pentru a rotunji colțurile, astfel încât aceste butoane să se transforme în cercuri. Culoarea lor va fi albă, adică #fff , iar decalajul lor față de marginea superioară a ferestrei de vizualizare va fi egal cu jumătate din înălțimea acestei ferestre minus jumătate din înălțimea butonului în sine (în cazul meu 25px), astfel încât să putem poziționați-le vertical în centru. Apoi, vom specifica că atunci când trecem cu mouse-ul peste ele, cursorul nostru se va schimba într-un indicator și, în final, vom spune butoanelor noastre individual că ar trebui să fie la 20 de pixeli distanță de marginile lor, astfel încât să le putem vedea într-un mod care ni se potrivește. .

Din nou, puteți stila elementele paginii așa cum doriți, vă dau doar un exemplu al stilurilor pe care am decis să le folosesc.

După coafare, glisorul nostru ar trebui să arate cam așa:

Apoi, ne întoarcem la fișierul nostru js, unde vom descrie funcționarea butoanelor noastre. Ei bine, să adăugăm încă o funcție, ne va arăta diapozitivul anterior:

funcția prevSlide() ( dacă (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ) )

Se numește prevSlide și va fi apelat doar când se face clic pe prev-btn. Mai întâi verificăm dacă suntem sau nu pe primul diapozitiv, aici verificăm și dacă slideNow a depășit raza reală a diapozitivelor noastre și, dacă vreuna dintre condiții este adevărată, vom trece la ultimul diapozitiv, mutând slidewrapper-ul. la valoarea de care avem nevoie. Vom calcula această valoare folosind formula: (lățimea unui diapozitiv) * (numărul de diapozitive - 1), luăm toate acestea cu semnul minus, deoarece o mutam la stanga, rezulta ca vizorul ne va arata acum ultimul slide. La sfârșitul acestui bloc, trebuie să spunem variabilei slideNow că ultimul diapozitiv este acum în viziunea noastră.

Dacă nu ne aflăm pe primul diapozitiv, atunci trebuie să ne întoarcem 1, pentru aceasta schimbăm din nou proprietatea de transformare a slidewrapper . Formula este: (lățimea unui diapozitiv) * (numărul diapozitivului curent - 2), din nou, luăm toate acestea cu semnul minus. Dar de ce -2, și nu -1, trebuie să mutăm doar 1 slide înapoi? Cert este că, dacă ne aflăm, să zicem, pe al 2-lea diapozitiv, atunci variabila x a proprietății transform:translate(x,0) a slidewrapper-ului nostru este deja egală cu lățimea unui diapozitiv, dacă îi spunem că avem nevoie pentru a scădea 1 din numărul slide-ului curent , apoi vom obține din nou unul, prin care slidewrapper-ul a fost deja deplasat, așa că va trebui să deplasăm aceleași lățimi ale ferestrei de vizualizare cu 0, ceea ce înseamnă pe slideNow - 2.

Acum trebuie doar să adăugăm aceste linii la blocul principal de cod:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Aici pur și simplu urmărim dacă butoanele noastre au fost apăsate, iar în acest caz numim funcțiile de care avem nevoie, totul este simplu și logic.

Acum să adăugăm butoanele de navigare din slide și să revenim din nou la marcaj:

După cum puteți vedea, în fereastra de vizualizare a apărut o listă imbricată, să-i dăm identificatorul nav-btns , în interiorul ei sunt butoanele noastre de navigare, le vom atribui clasa slide-nav-btn , cu toate acestea, putem termina cu marcajul, să trecem la stiluri:

#nav-btns ( poziție: absolut; lățime: 100%; jos: 20px; umplutură: 0; margine: 0; text-align: center; ) .slide-nav-btn ( poziție: relativă; afișare: inline-btn; list-style: nici lățimea: 20px margine: .slide-nav-btn: cursor;

Dăm blocului nav-btns, în care se află butoanele noastre, poziția proprietății: absolut pentru a nu întinde fereastra în înălțime, deoarece slidewrapper are proprietatea position:relative, am setat lățimea la 100% pentru a centra butoanele pe orizontală în raport cu fereastra folosind text-align:center , apoi folosind proprietatea de jos, anunțăm blocul nostru că ar trebui să fie la distanță de 20px de la marginea de jos.

Cu butoanele facem același lucru ca și cu slide-urile, dar acum le dăm display:inline-block , pentru că cu display:inline nu răspund la lățime și înălțime deoarece sunt într-un bloc poziționat absolut. Să le facem albe și, folosind raza-chenar deja familiară, să le dăm forma unui cerc. Când trecem cu mouse-ul peste ele, vom schimba aspectul cursorului nostru pentru afișarea obișnuită.

Acum să trecem la partea jQuery:
Mai întâi, să declarăm o variabilă navBtnId, care va stoca indexul butonului pe care l-am făcut clic:

var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "translate": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth); + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1 ));

Aici, când facem clic pe slide-nav-btn-ul nostru, numim o funcție care atribuie în primul rând variabilei navBtnId indexul butonului apăsat, adică numărul de serie al acestuia, deoarece numărătoarea inversă începe de la zero, atunci dacă vom facem clic pe al doilea buton, apoi se scrie la navBtnId valoarea 1. Apoi facem o verificare unde adaugam la număr de serie butonul unu, pentru a obține un număr de parcă numărătoarea inversă a început nu de la 0, ci de la 1, comparăm acest număr cu numărul slide-ului curent, dacă se potrivesc, atunci nu vom întreprinde nicio măsură, deoarece slide-ul dorit este deja în fereastra de vizualizare.

Dacă diapozitivul de care avem nevoie nu se află în câmpul vizual al ferestrei de vizualizare, atunci calculăm distanța cu care trebuie să mutăm slidewrapper-ul la stânga, apoi modificăm valoarea proprietății de transformare CSS pentru a traduce (aceeași distanță în pixeli, 0). ). Am făcut deja acest lucru de mai multe ori, așa că nu ar trebui să existe întrebări. La sfârșit, salvăm din nou valoarea slide-ului curent în variabila slideNow, această valoare poate fi calculată adăugând una la indexul butonului apăsat.

Asta e tot, de fapt, dacă ceva nu este clar, atunci voi lăsa un link către jsfiddle, unde va fi furnizat tot codul scris în material.

Vă mulțumim pentru atenție!

Etichete:

glisorul jquery
css
animație css3
html

Adaugă etichete

Cu ceva timp în urmă, am început să învăț jQuery. Cred că toată lumea știe că acesta este numele celei mai populare biblioteci pentru dezvoltarea și crearea de scripturi în JavaScript. Cu ajutorul acestuia este foarte ușor să creezi elemente de site spectaculoase și interactive.

În acest articol, vreau să vă spun cum să creați un glisor universal simplu folosind jQuery. De fapt, rețeaua este foarte un numar mare de o varietate de glisoare gata făcute, care uneori arată foarte tentante și sunt destul de funcționale, dar o vom face de la zero.

Deci, ce caracteristici ale glisorului nostru jQuery (pe care l-am numit HWSlider) pot fi remarcate?

Ușurință în utilizare și design - am vrut să creez un script simplu, fără clopoței și fluiere, așa că nu am folosit animații CSS3, iar codul s-a dovedit a fi foarte versatil și ușor de înțeles.
Posibilitatea de a insera atât imagini, cât și orice cod HTML în diapozitive.
Posibilitatea de a derula diapozitivele în ordine (înainte - înapoi) și de a selecta fiecare diapozitiv (1,2,3,4...)
Link-uri generate automat (anterior - următor și cu numere de diapozitive). Trebuie doar să introduceți numărul necesar de div-uri și totul va fi calculat de la sine. Ei bine, se poate observa că numărul de diapozitive este nelimitat.

Scriptul este compatibil cu toate browsere moderne: IE, Opera, Firefox, Safari, Chrome, (din moment ce glisorul nu folosește CSS3).

Să începem cu marcajul HTML. Pagina sau șablonul HTML trebuie inserat în locația dorită.

Iată conținutul diapozitivului 1 Iată conținutul diapozitivului 2 Iată conținutul diapozitivului 3

Totul este simplu aici, după cum puteți vedea, puteți introduce câte diapozitive doriți prin crearea de noi div-uri. Puteți introduce orice cod HTML în interiorul lor, de exemplu o imagine sau un bloc de text. Doar nu uitați să includeți biblioteca jQuery în sine împreună cu toate scripturile js. Dacă nu știi cum, uită-te la exemplu.

#slider-wrap( /* Wrapper pentru glisor și butoane */ width:660px; ) #slider( /* Wrapper pentru slider */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* Butoane pentru schimbarea slide-urilor */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center jos no- repetă;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton ( /* Link „Următorul” și „Anterior” */ display:block; lățime:15px; înălțime:100%; poziție:absolut; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) centru stânga fără repetare; opacitate:0,8 contur:niciuna !important;) #prewbutton(stânga:10px;) #nextbutton( dreapta:10px; fundal:url(arrowBg.png) centru dreapta fără repetare; ) #prewbutton:hover, #nextbutton:hover( opacitate:1;)

Să ne uităm la asta mai detaliat. Mai întâi dăm blocului principal, ID „slider-wrap”, lățimea dorită. Deoarece toate celelalte blocuri sunt introduse în el, nu trebuie specificată înălțimea, aceasta va depinde de ceea ce se află în interior. Apoi trebuie să setăm dimensiunile containerului în care vor fi amplasate diapozitivele. Acesta este #slider. Să-i dăm lățime și înălțime, precum și, de exemplu, un chenar de 10 pixeli. Aici lățimea este de 640 px, care este mai mică decât lățimea părintelui, deoarece adăugăm margini de 10 px la dreapta și la stânga. Lățimea diapozitivelor în sine (.slide) depinde și de lățimea acestui div.

Și ultimul lucru: trebuie să setăm poziția: relativă pentru containerul de diapozitive, deoarece diapozitivele din interior sunt cu poziționare absolută. Pentru diapozitivele în sine, numai lățimea și înălțimea sunt setate în CSS. Proprietățile rămase sunt setate în scriptul jQuery.

Selector.sli-links este un bloc care va conține butoane pentru deplasarea la slide-ul dorit. Aceste butoane sunt elemente simple numărul de tip, care va fi introdus automat în cantitatea necesară, împreună cu parent.sli-links. Pentru butoane setam noi vedere frumoasă, și anume, facem fiecare buton pătrat, le aliniem pe toate în centru și, de asemenea, datorită overflow: hidden și text-indent:-9999px, eliminăm textul, lăsând doar pictogramele de fundal, care se schimbă și când treceți cu mouse-ul peste acest element cu cursorul. Pentru comoditate, am folosit sprite-uri, care au redus numărul de imagini.

Următorul este emis butonul activ. Schimbăm doar poziția fundalului. Apoi vom reproiecta linkurile pentru a merge la diapozitivele următoare și anterioare. Le poți oferi orice design, la fel ca butoanele. Aceste link-uri sunt inserate automat în #slider. Dar pentru a le face vizibile, le-am dat o poziție absolută și un strat superior (z-index:3) astfel încât să apară deasupra diapozitivelor. Cred că cu CSS totul este clar și simplu aici: puteți schimba aproape toate proprietățile pentru a proiecta glisorul așa cum aveți nevoie.

Să ne uităm acum la scenariul în sine:

Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = adevărat; $(document).ready(function(e) ( $(".slide").css((("poziție": "absolut", "sus":"0", "stânga": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = $("#slider .slide").size( var animSlide = function(arrow)( clearTimeout(slideTime); $ ("); .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(săgeată == „următorul”)( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( săgeată == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = săgeată; ) $(".slide").eq( slideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + index + "" )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("activ"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pauză = fals; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pauză = adevărat;), function()(pauză = fals; rotator(); )); rotator(); ));

În primul rând, setările sunt salvate în variabile: hwSlideSpeed - viteza de întoarcere a diapozitivelor, hwTimeOut - timpul după care diapozitivul se schimbă automat, hwNeedLinks - controlează legăturile „Următorul” și „Anterior” - dacă valoarea acestei variabile este adevărat, atunci aceste link-uri vor fi afișate, iar dacă false , atunci în consecință nu vor exista (ca în pagina principala blogul meu).

Apoi, setăm proprietățile CSS necesare pentru diapozitive folosind metoda .css(). Stivuim blocuri cu diapozitive unul peste altul folosind poziționarea absolută, apoi le ascundem pe toate.hide(), iar apoi îl arătăm doar pe primul. Variabila slideNum este numărul slide-ului activ, adică contorul.

Logica principală a cursorului nostru jQuery este funcția animSlide. Este nevoie de un singur parametru. Dacă trecem șirurile „next” sau „prew” în el, atunci operatorii condiționali vor funcționa și va fi afișat diapozitivul următor sau anterior, respectiv. Dacă trimitem un număr ca valoare, atunci acest număr va deveni slide-ul activ și va fi afișat.

Deci această funcție ascunde div-ul curent, calculează unul nou și îl arată.

Rețineți că metoda .fadeIn(), care face vizibil slide-ul activ, primește un al doilea argument. Aceasta este așa-numita funcție sună din nou. Se execută când diapozitivul apare complet. În acest caz, acest lucru se face pentru a asigura derularea automată a diapozitivelor. Funcția de rotator definită mai jos apelează din nou funcția animSlide pentru a avansa la următorul diapozitiv la intervalul de timp dorit: vom obține o închidere care asigură derularea constantă.

Totul funcționează bine, dar trebuie să oprim automatizarea dacă utilizatorul mută cursorul pe glisor sau apasă butoanele. Variabila pauză este creată în acest scop. Dacă valoarea sa este pozitivă - adevărată, atunci nu va exista o comutare automată. Folosind metoda .hover(), specificăm: ștergeți cronometrul dacă rulează - clearTimeout(slideTime) și setați pauză = true. Și după ce mutați cursorul, opriți pauza și rulați închiderea rotator().

În plus, trebuie să creăm noi elemente pe pagină și să le plasăm la locul potrivit. Folosind bucla each() pentru fiecare diapozitiv (div cu clasa .slide), vom crea un element span în interiorul căruia există un număr - numărul slide-ului. Acest număr este folosit în funcția de animație pentru a trece la diapozitivul cu acest număr. Să înfășurăm totul într-un div cu clasele necesare și, la final, vom obține următorul marcaj:

0 1 2 3

S-ar părea, de ce creăm markup în interiorul scriptului și nu în codul HTML? Cert este că, de exemplu, dacă utilizatorul are scripturile dezactivate, nu va vedea elemente care nu vor funcționa, iar acest lucru nu îl va deruta. În plus, codul este simplificat, ceea ce este bun pentru SEO.

Ca rezultat, aspectul glisorului va arăta cam așa (am folosit imagini ca diapozitive și am instalat 5 dintre ele):

0 1 2 3

Mai jos puteți vedea cum funcționează glisorul nostru jQuery pe pagina demo și puteți descărca toate sursele necesare.

În sfârșit, câteva puncte despre integrarea acestui glisor cu Drupal. Puteți adăuga acest cod într-un fișier șablon, de exemplu în page.tpl.php, și puteți atașa scriptul ca fișier js separat la temă. Jquery în Drupal este activat implicit, dar rulează în modul de compatibilitate (). Există două opțiuni de îmbunătățire. Sau includeți tot codul js:

(funcția ($) ( // Tot codul tău... ))(jQuery);

sau înlocuiți simbolurile $ din tot scriptul cu jQuery. Ca aceasta:

JQuery(document).ready(function(e) ( jQuery(".slide").css((("poziție": "absolut", "sus":"0", "stânga": "0")). hide ().eq(0).show(); var slideNum = 0; var slideCount = jQuery("#slider .slide").size( var animSlide = function(arrow)( // etc.);

Exemplul a implementat deja prima metodă.

Multumesc pentru lectura! Lasă comentarii, vino din nou. De asemenea, vă puteți abona la RSS pentru a primi mai întâi actualizări de blog!

Adăugat: Asta nu este tot. Citit. Acolo vom adăuga noi caracteristici acestui script.

Acum hai sa scriem! Mai întâi de toate, să deschidem fișierul nostru index și să scriem acolo markupul de care avem nevoie:

Următorul bloc de proprietăți setează slidewrapper-ul și copiii săi să aibă zero padding, fără comentarii necesare aici.

Să deschidem fișierul nostru js, care va conține codul slider, nu uitați să conectați jQuery, deoarece Vom scrie folosind acest cadru. Apropo, la momentul scrierii acestui articol, folosesc jQuery versiunea 3.1.0. Fișierul cu scriptul în sine trebuie inclus la sfârșitul etichetei body, deoarece vom lucra cu elemente DOM care trebuie inițializate mai întâi.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Variabila slideNow trebuie setată la o valoare inițială de 1 deoarece Când pagina se încarcă, pe baza markupului nostru, vom vedea primul diapozitiv în fereastra de vizualizare.

funcția nextSlide() ( )

Îl vom numi în blocul principal al codului nostru, la care vom ajunge mai târziu, dar deocamdată vom spune funcției noastre ce trebuie să facă:

var translateWidth = 0;

După ce trecem la următorul diapozitiv, să spunem slideNow nostru că vedem următorul diapozitiv: slideNow++;

var slideInterval = 2000;

Timpul în js este indicat în milisecunde.

Acum să scriem următoarea construcție:

$(document).ready(funcție () ( setInterval(nextSlide, slideInterval); ));

Totul nu poate fi mai simplu aici prin construcția $(document).ready(function () ()) spunem că următoarele acțiuni trebuie efectuate după ce documentul a fost încărcat complet. Apoi, apelăm pur și simplu funcția nextSlide cu un interval egal cu slideInterval folosind funcția încorporată setInterval.

După toți pașii pe care i-am efectuat mai sus, glisorul nostru ar trebui să se rotească perfect, dar dacă ceva nu merge bine, atunci problema poate fi fie în versiunea jQuery, fie în conexiunea incorectă a oricăror fișiere. De asemenea, nu este necesar să excludeți faptul că ați fi putut face o eroare undeva în cod, așa că vă pot sfătui doar să verificați totul.

Între timp, să mergem mai departe, adăugăm la glisorul nostru o funcție, cum ar fi oprirea derulării când trecem cursorul. Pentru a face acest lucru, trebuie să scriem următorul lucru în blocul principal de cod (în interiorul $(document). funcția () ()) structură:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Aici folosesc evenimentul hover, care înseamnă „la hover”, acest eveniment îmi permite să urmăresc momentul în care trec cursorul peste un obiect, în acest caz fereastra de vizualizare.

Acum, dacă testăm, putem vedea cum reacționează cursorul nostru la hover, oprind comutarea slide-ului.

Acum este timpul să adăugați butoane la glisorul nostru, să începem cu butoanele înainte și înapoi.

În primul rând, să le marchem:

Din nou, puteți stila elementele paginii așa cum doriți, vă dau doar un exemplu al stilurilor pe care am decis să le folosesc.

Acum trebuie doar să adăugăm aceste linii la blocul principal de cod:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Aici pur și simplu urmărim dacă butoanele noastre au fost apăsate, iar în acest caz numim funcțiile de care avem nevoie, totul este simplu și logic.

Acum să adăugăm butoanele de navigare din slide și să revenim din nou la marcaj:

Acum să trecem la partea jQuery:
Mai întâi, să declarăm o variabilă navBtnId, care va stoca indexul butonului pe care l-am făcut clic:

Aici, când facem clic pe slide-nav-btn-ul nostru, numim o funcție care atribuie în primul rând variabilei navBtnId indexul butonului apăsat, adică numărul de serie al acestuia, deoarece numărătoarea inversă începe de la zero, atunci dacă vom facem clic pe al doilea buton, apoi se scrie în navBtnId valoarea 1. În continuare, facem o verificare în care adăugăm unul la numărul de serie al butonului pentru a obține un număr ca și cum numărătoarea inversă a început nu de la 0, ci de la 1, comparați acest număr cu numărul diapozitivului curent, dacă se potrivesc, atunci nu vom întreprinde nicio acțiune, deoarece diapozitivul dorit este deja în fereastra de vizualizare.

Asta e tot, de fapt, dacă ceva nu este clar, atunci voi lăsa un link către jsfiddle, unde va fi furnizat tot codul scris în material.

Vă mulțumim pentru atenție!

Etichete: Adăugați etichete

1. Excelent prezentare jQuery

O prezentare mare, spectaculoasă, folosind tehnologii jQuery.

2. plugin jQuery„Scale Carusel”

Prezentare scalabilă folosind jQuery. Puteți seta dimensiunile de prezentare de diapozitive care vi se potrivesc cel mai bine.

3. Pluginul jQuery „slideJS”

Glisor de imagine cu descriere text.

4. Plugin „JSliderNews”

5. Slider CSS3 jQuery

Când treceți cu mouse-ul peste săgețile de navigare, apare o miniatură circulară a următorului diapozitiv.

6. Slider frumos jQuery „Ciclul de prezentare”.

Slider jQuery cu indicator de încărcare a imaginii. Este prevăzută schimbarea automată a diapozitivelor.

7. Pluginul jQuery „Parallax Slider”

Glisor cu efect volumetric de fundal. Punctul culminant al acestui glisor este mișcarea fundalului, care constă din mai multe straturi, fiecare derulând cu o viteză diferită. Rezultatul este o imitație a efectului volumetric. Arată foarte frumos, poți să vezi singur. Efectul este afișat mai ușor în browsere precum Opera, Google Chrome, IE.

8. Glisor jQuery proaspăt, ușor „bxSlider 3.0”

Pe pagina demo din secțiunea „exemple” puteți găsi link-uri către toate utilizările posibile ale acestui plugin.

9. Slider imagine jQuery, plugin „slideJS”.

Un slider jQuery elegant vă poate decora cu siguranță proiectul.

10. Plugin de prezentare jQuery „Easy Slides” v1.1

Usor de folosind JQuery plugin pentru crearea de diapozitive.

11. Plugin jQuery Slidy

Plugin jQuery ușor în diferite versiuni. Este prevăzută schimbarea automată a diapozitivelor.

12. Galeria jQuery CSS cu schimbare automată a diapozitivelor

Dacă vizitatorul nu face clic pe săgețile „Înainte” sau „Înapoi” într-un anumit timp, galeria va începe să deruleze automat.

13. Slider jQuery „Nivo Slider”

Plugin foarte profesional, de înaltă calitate, ușor, cu cod valid. Există multe efecte diferite de tranziție de diapozitive disponibile.

14. Slider jQuery „MobilySlider”

Glisor proaspăt. Slider jQuery cu diverse efecte de schimbare a imaginii.

15. Pluginul jQuery „Slider²”

Glisor ușor cu schimbător automat de diapozitive.

16. Slider javascript proaspăt

Glisor cu schimbare automată a imaginii.

Plugin pentru implementarea prezentărilor de diapozitive cu schimbare automată a diapozitivelor. Este posibil să controlați afișajul folosind miniaturile imaginilor.

Slider de imagine CSS jQuery folosind pluginul NivoSlider.

19. Slider jQuery „jShowOff”

Plugin de rotație a conținutului. Trei variante de utilizare: fără navigare (cu schimbare automată în format slide show), cu navigare sub formă de butoane, cu navigare sub formă de miniaturi de imagine.

20. Plugin pentru portofoliu Shutter Effect

Plugin jQuery proaspăt pentru proiectarea portofoliului unui fotograf. Galeria are un efect interesant de schimbare a imaginilor. Fotografiile se succed cu un efect asemănător cu operarea unui obturator pentru obiectiv.

21. Glisor CSS javascript ușor „TinySlider 2”

Implementarea unui slider de imagine cu folosind javascriptși CSS.

22. Glisor minunat „Tinycircleslider”

Glisor rotund elegant. Tranziția între imagini se realizează prin tragerea cursorului sub forma unui cerc roșu în jurul circumferinței. Se va potrivi perfect în site-ul dvs. dacă utilizați elemente rotunde în designul dvs.

23. Glisor de imagine cu jQuery

Glisor ușor „Kit glisor”. Glisorul este disponibil în diferite modele: vertical și orizontal. De asemenea, sunt implementate diverse tipuri de navigare între imagini: folosind butoanele „Înainte” și „Înapoi”, folosind rotița mouse-ului, folosind clicul mouse-ului pe slide.

24. Galerie cu miniaturi „Kit Slider”

Galeria „Kit Slider”. Derularea miniaturilor se realizează atât pe verticală, cât și pe orizontală. Tranziția între imagini se realizează folosind: rotița mouse-ului, clicul mouse-ului sau trecând cursorul peste miniatură.

25. Slider de conținut jQuery „Kit Slider”

Glisor de conținut vertical și orizontal folosind jQuery.

26. Prezentare jQuery „Kit Slider”

Prezentare de diapozitive cu schimbare automată a diapozitivelor.

27. Glisor CSS3 javascript profesional ușor

Un slider jQuery și CSS3 îngrijit creat în 2011.

Prezentare de diapozitive jQuery cu miniaturi.

29. Prezentare jQuery simplă

Prezentare de diapozitive cu butoane de navigare.

30. Prezentare minunată jQuery „Skitter”.

Plugin jQuery Skitter pentru a crea prezentări de diapozitive uimitoare. Pluginul acceptă 22 (!) tipuri de efecte de animație diferite la schimbarea imaginilor. Poate lucra cu două opțiuni de navigare în diapozitive: folosind numerele de diapozitive și folosind miniaturi. Asigurați-vă că urmăriți demonstrația, o descoperire de foarte bună calitate. Tehnologii utilizate: CSS, HTML, jQuery, PHP.

31. Prezentare de diapozitive „Incomod”

Prezentare funcțională de diapozitive. Slide-urile pot fi: imagini simple, imagini cu legendă, imagini cu tooltips, videoclipuri. Puteți folosi săgețile, linkurile cu numerele diapozitivelor și tastele stânga/dreapta de pe tastatură pentru a naviga. Prezentarea de diapozitive vine în mai multe versiuni: cu și fără miniaturi. Pentru a vedea toate opțiunile, urmați linkurile Demo #1 - Demo #6 situate în partea de sus a paginii demo.

Un design foarte original pentru glisorul de imagine, care amintește de un ventilator. Tranziție animată de diapozitive. Navigarea între imagini se realizează cu ajutorul săgeților. Există, de asemenea, o schimbare automată care poate fi activată și dezactivată folosind butonul Redare/Pauză situat în partea de sus.

Glisor animat jQuery. Imagini de fundal scala automat atunci când fereastra browserului este redimensionată. Pentru fiecare imagine apare un bloc cu o descriere.

34. Slider „Flux Slider” folosind jQuery și CSS3

Slider nou jQuery. Mai multe efecte animate grozave la schimbarea diapozitivelor.

35. Plugin jQuery „jSwitch”

Galerie animată jQuery.

O prezentare de diapozitive jQuery simplă cu schimbare automată a diapozitivelor.

37. Noua versiune a pluginului „SlideDeck 1.2.2”

Glisor de conținut profesional. Există opțiuni cu schimbare automată a diapozitivelor, precum și o opțiune care utilizează rotița mouse-ului pentru a vă deplasa între diapozitive.

38. Slider jQuery „Sudo Slider”

Glisor de imagine ușor folosind jQuery. Există o mulțime de opțiuni de implementare: schimbarea orizontală și verticală a imaginilor, cu și fără link-uri către numărul de diapozitive, cu și fără legende de imagine, diferite efecte de schimbare a imaginii. Există o funcție de schimbare automată a diapozitivelor. Link-uri către toate exemplele de implementare pot fi găsite pe pagina demo.

39. jQuery CSS3 slideshow