Crearea unui carusel pe două niveluri folosind jquery. Plugin jQuery „Smooth Div Scroll”. Slider de conținut jQuery receptiv bxSlider
Dar, deoarece trecem peste elementele de bază ale JS, pentru a studia baza, voi descrie cum se creează glisor simplu doar cu ajutorul limbaj JavaScript. Ei bine, să începem să analizăm materialul!
Ce tipuri de glisoare există și unde ar putea fi necesare?Crearea unor galerii convenabile pentru vizualizarea imaginilor este necesară pentru toate serviciile web care conțin cel puțin câteva fotografii. Acestea pot fi magazine online, site-uri de portofoliu, servicii de știri și educaționale, site-uri web ale companiilor și unităților de divertisment cu reportaje foto etc.
Cu toate acestea, aceasta este o utilizare standard a glisoarelor. Tehnologii similare folosit și pentru a atrage clienți la bunuri, servicii promoționale sau pentru a descrie avantajele întreprinderilor.
În cea mai mare parte, clienții cer să o implementeze pe galerii de tip „Carusel”. Acest instrument la îndemână pentru a vizualiza imagini la dimensiuni mari, cu posibilitatea utilizatorului de a comuta diapozitivele înainte și înapoi. În acest caz, imaginile în sine se schimbă de obicei automat după un anumit timp. Acest mecanism a fost poreclit datorită faptului că afișarea imaginilor se repetă într-un cerc.
Astăzi, dacă doriți, puteți găsi cele mai neobișnuite și atractive plugin-uri de pe Internet pentru vizualizarea unui set de fotografii.
Activitate independentăEi bine, acum să începem să creăm propriul nostru glisor. În această etapă de învățare, pentru a o implementa, vă sugerez să folosiți pure . Aceasta va schimba automat imaginile într-un cerc.
Mai jos am atasat codul programului aplicatia ta. Ți-am lăsat comentarii așa cum am codificat.
| 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 |
|
Comutator automat de imagini /*Descrie aspect cadru, baza pentru viitorul glisor */ #slides( poziție: relativă; înălțime: 415px; lățime: 100%; umplutură: 0px; tip list-style: niciunul; umbră casetă: 0 0 7px #010, 0 0 10px albastru , 0 0 15px #010, 0 0 35px #010; ) /* Editez afișarea imaginilor*/ img ( lățime: auto; înălțime: 390px; padding: 13px; ) /* Indică faptul că conținutul elementele din listă vor fi afișate în centrul elementului părinte, adică. V în acest caz,în centrul elementului ul - baza pentru diapozitive */ li ( text-align: center; ) /* Descriu aspectul diapozitivelor în sine */ .slide( poziție: absolut; opacitate: 0; sus: 0px ; stânga: 0px; înălțime: 100 %; z-index: 3; lățime: 100%; fundal: albastru; -moz-tranziție: opacitate 1,5 s; tranziție: opacitate 1,5 s; -webkit-tranziție: opacitate 1,5 s; ) /*Când este afișat, obiectul devine vizibil și se mută în față*/ .showing( opacitate: 1; z-index: 4; )
Sper că nu ați avut probleme cu codul css și html. Dar consider că este necesar să dezasamblam lucrarea scenariului. Deci, să trecem la descifrarea a ceea ce a fost scris.
Deci, mai întâi, folosind metoda querySelectorAll, atribui variabilei MySlider o listă cu toate elementele din intervalul specificat. Indică această intrare
document.querySelectorAll("#slides .slide")
Astfel, MySlider stochează o colecție de patru elemente.
Apoi, specific ce imagine să înceapă să fie afișată setând variabila currentPicture la zero. Apoi indică faptul că schimbarea diapozitivului are loc în 2,7 secunde și trebuie apelată funcția de procesare nextSlide.
Să trecem la funcția în sine.
Inițial, pentru elementul de listă curent, schimb descrierea claselor, adică. Rescriu „prezentare de diapozitive” în „diapozitive”. În consecință, imaginea devine invizibilă.
Acum definesc element nou colecție, care va fi afișată pe ecran. Pentru a face acest lucru iau poziția curentă +1. Poate ați observat că folosesc și împărțirea cu un rest (%) după numărul de diapozitive disponibile. Acest truc cu urechile este necesar pentru a începe spectacolul într-un nou cerc. Cam așa ar arăta literalmente.
01/11/15 310,6KÎn prezent, un slider - carusel - este o funcționalitate pe care pur și simplu trebuie să o ai pe un site web de afaceri, un site de portofoliu sau orice altă resursă. Împreună cu glisoarele pentru imagini pe ecran complet, glisoarele orizontale carusel se potrivesc bine în orice design web.
Uneori, glisorul ar trebui să ocupe o treime din pagina site-ului. Aici glisorul carusel este folosit cu efecte de tranziție și layout-uri adaptive. Site-uri web comerțul electronic utilizați un glisor carusel pentru a afișa multe fotografii în publicații sau pagini separate. Codul glisor poate fi folosit și modificat în mod liber în funcție de nevoile dvs.
Folosind JQuery împreună cu HTML5 și CSS3, vă puteți face paginile mai interesante, le puteți oferi efecte unice și puteți atrage atenția vizitatorilor asupra unei anumite zone a site-ului.
Slick – plugin modern de glisare caruselSlick este un plugin jquery disponibil gratuit ai cărui dezvoltatori susțin că soluția lor va satisface toate cerințele dvs. de glisare. Glisor adaptiv - caruselul poate funcționa în modul „tigle” pentru dispozitivele mobile și în modul „glisare și plasare” pentru versiunea desktop.
Conține un efect de tranziție „decolorat”, o funcție interesantă „mod central”, încărcare leneșă a imaginilor cu defilare automată. Funcționalitatea actualizată include adăugarea de diapozitive și a unui filtru de diapozitive. Toate pentru a vă asigura că configurați pluginul în funcție de cerințele dvs.
Modul demonstrativ | Descarca
Owl Carousel 2.0 – jQuery – plugin pentru utilizare pe dispozitive tactileAcest plugin are următoarele caracteristici: set mare caracteristici potrivite atât pentru începători, cât și pentru dezvoltatorii experimentați. Acest versiune actualizata glisor - carusel. Predecesorul său avea același nume.
Glisorul are câteva plugin-uri încorporate pentru a îmbunătăți funcționalitatea generală. Animație, redare video, redare automată cu glisor, încărcare leneșă, reglare automată a înălțimii - principalele caracteristici ale Owl Carousel 2.0.
Suportul de glisare și plasare este activat pentru mai multe utilizare convenabilă plugin-ul activat dispozitive mobile.
Pluginul este perfect pentru afișarea imaginilor mari chiar și pe ecrane mici ale dispozitivelor mobile.
Exemple | Descarca
Un plugin jquery destul de mic, dar bogat funcțional, care vă permite să plasați un glisor pe o pagină - un carusel, care are un nucleu mic și nu consumă multe resurse ale site-ului. Plugin-ul poate fi folosit pentru a afișa glisoare verticale și orizontale, cu animație și pentru a crea seturi de imagini din galerie.
Exemple | Descarca
Slider jQuery ultra compact - carusel, a cărui funcționalitate este mult mai mare decât cea a unui slider obișnuit. Acestea includ previzualizarea unei singure imagini, afișarea caruselului cu mai multe imagini și afișarea glisorului bazat pe titlu.
Exemple | Descarca
Carusel bufniță – glisor cu suport ecrane tactileși tehnologiile drag and drop, ușor de integrat în codul HTML. Pluginul este unul dintre cele mai bune glisoare, care vă permit să creați carusele frumoase fără nici un marcaj special pregătit.
Exemple | Descarca
Utilizează tranziții 3D bazate pe stiluri CSS și puțin cod Javascript.
Exemple | Descarca
Magnific carusel 3D. Se pare că aceasta este încă o versiune beta, pentru că tocmai acum am descoperit câteva probleme cu ea. Dacă sunteți interesat să testați și să vă creați glisoare proprii– acest carusel va fi de mare ajutor.
Exemple | Descarca
Glisor receptiv - carusel care folosește tehnologia bootstrap doar pentru noul tău site web.
Exemple | Descarca
Cel mai popular pe site-urile web de portofoliu și de afaceri. Acest tip de slider - carusel - se găsește adesea pe site-uri de orice tip.
Exemple | Descarca
Acest glisor de dimensiuni mici este gata să funcționeze pe dispozitive cu orice rezoluție de ecran. Glisorul poate funcționa atât în modul circular, cât și în modul carusel. Cercul minuscul este prezentat ca o alternativă la alte glisoare de acest tip. Există suport încorporat pentru sistemele de operare sisteme iOSși Android.
În modul circular, glisorul arată destul de interesant. Suport excelent pentru metoda drag and drop și un sistem automat de defilare a diapozitivelor.
Exemple | Descarca
Un glisor puternic, adaptiv, carusel este perfect pentru un site web modern. Funcționează corect pe orice dispozitiv. Are moduri orizontale și verticale. Dimensiunea sa este redusă la doar 1 KB. Pluginul ultra compact are, de asemenea, tranziții excelente excelente.
Exemple | Descarca
Conține peste 50 de efecte, care vă pot ajuta să creați un glisor original pentru site-ul dvs. web.
Exemple | Descarca
Redimensionați fereastra browserului pentru a vedea cum se adaptează glisorul. Bxslider vine cu mai mult de 50 de opțiuni de personalizare și își prezintă caracteristicile cu diverse efecte de tranziție.
Exemple | Descarca
jCarousel este un plugin jQuery care vă va ajuta să organizați vizualizarea imaginilor dvs. Puteți crea cu ușurință carusele de imagini personalizate de la baza prezentată în exemplu. Glisorul este adaptiv și optimizat pentru lucrul pe platforme mobile.
Exemple | Descarca
Scrollbox este un plugin compact pentru crearea unui glisor - un carusel sau un crawl de text. Caracteristicile cheie includ verticală și defilare orizontală cu o pauză la trecerea cursorului mouse-ului.
Exemple | Descarca
Un glisor simplu carusel. Dacă aveți nevoie de un plugin rapid, acesta este 100% potrivit. Vine cu doar caracteristicile de bază necesare pentru ca glisorul să funcționeze.
Exemple | Descarca
Creatorii Flexisel s-au inspirat din pluginul jCarousel de școală veche, făcând o copie a acestuia menită să funcţionare corectă glisor pe dispozitive mobile și tablete.
Aspectul receptiv al Flexisel, atunci când rulează pe dispozitive mobile, este diferit de un aspect de dimensiunea ferestrei de browser. Flexisel este perfect adaptat pentru a lucra pe ecrane, atât de joasă, cât și de înaltă rezoluție.
Exemple | Descarca
Elastislide se adaptează perfect la dimensiunea ecranului dispozitivului tău. Puteți seta numărul minim de imagini de afișat la o anumită rezoluție. Funcționează bine ca un glisor carusel cu galerii de imagini, folosind un înveliș fix împreună cu un efect de defilare verticală.
Exemplu | Descarca
Slider gratuit de la Woothemes. Este considerat pe bună dreptate unul dintre cele mai bune glisoare adaptive. Pluginul conține mai multe șabloane și va fi util atât pentru utilizatorii începători, cât și pentru experți.
Exemplu | Descarca
Amazing Carusel – glisor de imagine receptiv folosind jQuery. Suportă multe sisteme de gestionare a conținutului, cum ar fi WordPress, Drupal și Joomla. De asemenea, acceptă sistemele de operare Android și IOS și desktop fără probleme de compatibilitate. Șabloanele de carusel uimitoare încorporate vă permit să utilizați glisorul în modurile vertical, orizontal și circular.
Într-o zi, prietenii mei au decis să-mi facă o surpriză plăcută. Surpriza în sine a fost foarte simplă; a necesitat un tricou foarte obișnuit, fără niciun model.
Și apoi s-au confruntat cu o problemă - toate tricourile din magazine aveau imagini pe ele. Nu au putut găsi cel mai simplu tricou fără poze. Cred că ați întâmpinat o problemă similară când nu puteți găsi cel mai simplu lucru.
Și este aceeași poveste cu caruselele; aproape toate caruselele au deja un design. Și aproape întotdeauna aveți nevoie de un carusel curat, pe care apoi îl puteți proiecta așa cum a intenționat designerul.
Prin urmare, pentru a vă bucura imediat de a lucra cu carusele și pentru a le face rapid, vă sugerez să utilizați următorul plugin.
Plugin jQuery pentru un carusel curat și puternicLucrul tare la acest plugin este că nu are design și este mult mai ușor de lucrat cu el decât alte plugin-uri frumoase.
Poate fi decorat în orice fel doriți.
Și așa, iată acest plugin: Owl Carousel.
Instalarea pluginului1. Conectați jQuery dacă nu este deja conectat, de exemplu astfel
2. Copiați fișierele plugin în folderul site-ului
- Despachetarea
- Copiați folderul bufniță-carusel pe site
3. Conectați aceste fișiere la site:
4. Adăugați codul în pagină
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Lansați pluginul
$(document).ready(function())( // Găsiți blocul carusel var carusel = $("#carusel"); // Lansați pluginul carusel carousel.owlCarousel(); ));
6. Ne aranjam
/* Bloc principal */ .owl-wrapper-outer ( chenar: 1px solid #777; border-radius: 5px; overflow: hidden; fundal: alb; ) /* 1 carusel pătrat */ .carusel-element ( padding: 30px ; text-align: center; font-size: 300%; margine-dreapta: 1px solid #777; )
Butoanele Înapoi și ÎnainteÎn acest exemplu, voi arăta nu cea mai rapidă, ci cea mai universală metodă.
1. Adăugați butoanele în sine
Inapoi inainte
2. Atașarea butoanelor la pluginul carusel
După lansarea pluginului, adăugați codul
// Înapoi // Când faceți clic pe "Înapoi" $("#js-prev").click(function () ( // Începeți înapoi spre stânga carousel.trigger("owl.prev"); return false; )); // Înainte // Când faceți clic pe „Înainte” $("#js-next").click(funcție () ( // Începeți derularea înapoi la dreapta carusel.trigger("owl.next"); return false; ) );
Acum, când faceți clic pe „Înapoi” și „Înainte”, va fi declanșată derularea înapoi.
MarkereAcestea sunt punctele care arată unde suntem acum.
Ele pot fi activate la rularea pluginului prin adăugarea următorului parametru
// Lansați pluginul carusel carousel.owlCarousel(( // Puncte sub paginarea caruselului: true ));
/* Bloc cu puncte */ .owl-pagination ( text-align: center; /* Aliniați punctele la mijloc */ ) /* 1 Punct */ .owl-page ( lățime: 10px; înălțime: 10px; chenar: 1px continuu #777; afișare: bloc în linie; fundal: alb; margine: 10px; rază chenar: 5px; ) /* Punct activ */ .owl-page.active ( fundal: #777; )
Pentru a afișa doar 1 blocAcest lucru este destul de des necesar, pentru aceasta adăugăm următorul parametru
// Lansează pluginul carusel carousel.owlCarousel(( singleItem: true, // Afișează doar 1 bloc la lățime completă ));
Număr diferit de blocuri pe diferite dispozitiveO caracteristică foarte utilă care vă permite să creați un carusel adaptiv pentru dispozitivele mobile.
// Lansați pluginul carusel carousel.owlCarousel(( // Numărul de blocuri afișate // în funcție de dispozitiv (lățimea ecranului) // Numărul de blocuri pe ecrane mari articole: 10, // 5 blocuri pe computere (ecran de la 1400px la 901px) articoleDesktop: , // 3 blocuri pe computere mici (ecran de la 900px la 601px) articoleDesktopSmall: , // 2 elemente pe tablete (ecranul de la 600 la 480 pixeli) ) itemsTablet: , // Setările pentru telefon sunt dezactivate, în acest caz // setările tabletei vor fi folosite itemsMobile: false ));
Ce fel de surpriză este asta?Prietenii vin la petrecerea mea de naștere, zâmbesc bucuroși, deliciul este debordant. Ei îmi oferă solemn un cadou.
Îl deschid și mă uit la tricou. o desfac. La naiba, ce prostie. Văd 3 fotografii cu mine pe acest tricou. Mi-am pus un tricou și toată lumea începe să râdă, a ieșit stupid și amuzant.
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, prin serviciu terț M-as conecta la site. Î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: începutulAstă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 limba dată. 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 marcajul HTML al caruselului 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: relativă; overflow: ascuns; ) .caption ( lățime: 600px; înălțime: 110px; line-height: 1,5; font-size: 15px; font-weight: 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: niciuna; culoare: #000; afișare: inline-block; chenar-rază: 50%; margine: 0 5px; culoare de fundal: #fafafa; ) #slider-nav a.current ( culoare de fundal: #337ab7; ) .control-orizontal (poziție: absolut; afișare: bloc inline; lățime: 12px ; înălțime: 20px; sus: 50%; margin-sus: -10px; ) #prev ( fundal: url(../controls/arrow_left_inactive.png); 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: nu-repeat; fundal-poziție: dreapta; fundal-culoare: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; transform: translate(-50%, -50%) scale(1); ) #cq-popup .header ( afișare: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( lățime: 500px; dimensiunea fontului: 22px; înălțimea liniei: 36px; ) #cq-popup-btclose ( text-decor: niciunul; poziție: absolut; dreapta: -40px; sus: 0; fundal: url(. ./controls/btn_delete_inactive.png); înălțime: 16px; lățime: 16px; ) #cq-popup-btclose:hover ( fundal: url(../controls/btn_delete_active.png); ) #cq-popup-bg (poziția : fix; sus: 0; latime: 100%; inaltime: 100%; fundal: rgba(51,51,51,0.8); indicele z: 22; )
Ca rezultat al aplicării acestor stiluri JS, caruselul arată astfel:
Și marcaj HTML și Stiluri CSS am adus 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 personalizați această decizie in aceste conditii ar fi foarte greu.
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"); this.nextBtn = this.el.querySelector ("#next"); this.prevBtn = this. el.querySelector("#prev"); this.navigate(); ), naviga: 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 în sine, este disponibilă următoarea metodă:
This.class_method();
Principalul lucru este să nu uităm că în JavaScript valoarea acestuia depinde de contextul apelului, astfel încât în corpurile unor metode în care a fost necesar să apelați metode și proprietăți ale unei clase, 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ă apelată la crearea unei instanțe a unei clase î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 link este creată în memorie folosind Funcții JavaScript document.createElement() și i se atribuie valorile tuturor atributelor necesare, inclusiv calea către fișierul CSS cu stilurile de glisare JS. Și în cele din urmă, se adaugă la Pagini HTML s 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, 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-unul nou element div, creat în memorie așa cum am făcut-o 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 utiliza următorul cod în schimb:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Introduceți următoarele, specificând identificatorul dorit al containerului țintă (în cazul meu, glisorul HTML JS 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 principalelor elemente HTML pe care le vom accesa în următorul cod.
La final, este apelată metoda navigate().
naviga ()
În această metodă, acțiunile care apar atunci când daț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, definindu-l pe cel dorit în raport cu cel curent, care are un curent de clasă CSS.
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:
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 trece 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 Slider 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 pentru evidențierea elementului curent este simplă:
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 îl definește sunt eliminate din pagină. fundal translucid. 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ă, poate fi necesar să faceți un carusel de derulare JS, care este adesea numit o prezentare de diapozitive. În cazul meu, acest lucru nu a fost 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("")); ), timeout); )
Cred că este clar ce se întâmplă aici. Pentru a crea aceasta metoda Am copiat codul din evenimentul de clic pe butoanele de glisare manuală și l-am plasat într-un apel JavaScript la funcția setInterval(), care efectuează o 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 slide-ului curent cu acesta pentru a ciclă comutarea automată.
Ei bine, pentru ca acest cod să funcționeze, 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 schimbare automată slideshow-ul nostru JS (am ales 2000 de milisecunde sau 2 secunde, puteți schimba 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 prezentare de diapozitive JS în care diapozitivele comută automat și într-un cerc, de exemplu. când se ajunge la ultimul slide show-ul trece la ciclu nou, iar afișajul pornește 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 a făcut-o comutare manuală. Așa că am decis să fac același lucru în biblioteca mea.
Pentru a întrerupe afișarea automată Diapozitive JavaScript carusel, 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ă.
Ca rezultat, am primit următorul cod, pe care am decis să nu îl scriu ca metodă separată:
ClearInterval(self.slideCycle);
Și așezat-o în locuri în care sunt descrise acțiunile atunci când faceți clic pe diferite elemente de navigare, de exemplu. în cele ce urmează:
Link.addEventListener(„clic”, 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 pe siteDeci, 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ă urmați secvențial următorii pași, care sunt acțiuni standard la integrarea oricărui terț Biblioteci JavaScript deloc.
Pasul 1 . Copiem fișierele bibliotecii pe site-ul nostru î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 JavaScriptTotul 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ă le plasați în el fisierele necesare, care le-a dat anterior aceeași dimensiune ca și celelalte.
Și apoi în codul fișierului assets/popupSlider.html add bloc nouîn container cu înveliș glisor-id:
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 un nou element de navigare sub forma unui cerc, deoarece... În prezent, 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 scriptGata, glisorul JavaScript este gata și conectat. Eu personal recomand folosirea această opțiuneîn practică, dacă ai nevoie de el :)
Pentru a-i accelera funcționarea, apropo, puteți comprima și mai mult componente 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 un singur scenariu Caruselul JavaScript vă va fi util, 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 carusel JavaScript în cloud și în locul căilor către acestea în codul HTML și CSS, să scriu linkurile generate în timpul 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 căile corecte către ele.
Slider JS personalizat - perspective de dezvoltareSincer 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, pe de altă parte, acest slider JavaScript 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ă tu, ca mine, ai nevoie baza de cod pentru experimente și ai măcar 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:
Lista de editări pe care am dat-o este, desigur, nu finală ș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 intermediul social media pentru a-i implica si in 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 proiectelor diverse niveluri: pagini de destinație, site-uri web corporative, magazine online, CRM, portaluri. Inclusiv suport și dezvoltare de proiecte HighLoad. Trimiteți aplicațiile prin e-mail [email protected].
1. Carusel jQuery„clic pe Carusel”
Blocați cu anunțuri de știri care se defilează. Folosiți săgețile stânga/dreapta pentru a derula prin blocuri. În arhivă există un carusel în două styling: lumina si intuneric.
1. Carusel jQuery, plugin „carouFredSel”
Un carusel de imagini curat și proaspăt în jQuery.
4. Plugin jQuery: carusel „Elastislide”
Glisoare de conținut grozave sub forma unui carusel de imagini cu folosind jQuery. Pagina demonstrativă descrie cum să atașați acest carusel la site-ul dvs.
Conecteaza " Kit glisor„, un carusel ușor cu diverse metode de defilare.
7. carusel javascript
Navigare originală între miniaturile imaginilor. Pentru a vedea efectul în partea dreaptă a paginii demo, faceți clic pe butoanele Sus și Jos. Această soluție jQuery oferă, de asemenea, un efect de hover asupra miniaturii și derularea cu rotița mouse-ului.
9. Carusel ușor 10. Carusel realizat din blocuri „Easy Paginate”.
Plugin jQuery „Easy Paginate”. Fiecare bloc dreptunghiular reprezintă un element obișnuit din listă, iar dacă există mai mult de trei elemente, atunci pentru a le vizualiza pe toate trebuie să utilizați navigarea sub formă de glisor (folosind săgețile înainte și înapoi și folosind butoanele de navigare din partea de jos).
11. Rotator vertical Ticker
Rotator vertical pe jQuery: defilare automată a conținutului de pe pagină. Sunt furnizate butoane de navigare, precum și posibilitatea de a opri rotația și de a o reporni. Când treceți cursorul mouse-ului, mișcarea se oprește. La nivel de marcare HTML, blocurile de defilare sunt reprezentate de elemente obișnuite din listă.
12. zona de derulare javascript CSS
soluție javascript „TinyScroller” pentru a crea o zonă de defilare plasată într-un container DIV.
13. Pluginul jQuery „Smooth Div Scroll”
Plugin pentru implementarea derulării orizontale a conținutului într-o anumită zonă. Când treceți mouse-ul peste marginea din stânga sau din dreapta zonei, începe derularea.
Navigarea între diapozitivele de conținut se poate face folosind săgeți sau făcând clic pe miniatură. În partea de jos există un buton „Afișați” care vă permite să ascundeți/afișați miniaturile sau Descriere completa diapozitiv.
15. Rotatorul de conținut „Carusel de conținut circular”
Un bloc cu un scroller care apare atunci când treceți cursorul. Puteți derula conținut folosind fie bara de defilare, fie rotița mouse-ului.
Această soluție jQuery a fost inspirată de un efect similar pe site-ul Apple. Dezvoltatorii acestei corporații au găsit întotdeauna soluții interesante care i-au inspirat pe webmasteri din întreaga lume. Pentru a demonstra pluginul, selectați o categorie din listă.
19. Slider minunat
Glisorul este generat automat. Datele cu numele produsului, descrierea, linkul și adresa imaginii sunt preluate din fișierul slider.db.txt. Tehnologii folosite: CSS, PHP, jQuery.
20. Rotirea blocurilor folosind jQuery
Pentru a vedea efectul de rotație a blocurilor, faceți clic pe unul dintre dreptunghiurile mici de pe pagina demo
Un plugin de defilare a conținutului, de exemplu, poate fi folosit pentru a afișa cele mai recente știri sau pentru a afișa fluturași Twitter pe un site web.
22. Bloc dinamic „Recenzii clienților”
Rotirea automată a conținutului blocului. Tehnologii utilizate: PHP, XML, CSS, jQuery.
Acest plugin convertește elementele din listă (ul li) în elemente jQuery carusele.
26. carusel javascript „ImageFlow”
Este ușor să defilați prin imagini folosind rotița mouse-ului.
27. Derularea conținutului
Un bloc compact cu anunțul celor mai recente materiale pe site sau știri. Coloana din stânga afișează o listă paginată cu anunțuri scurte cu cele mai recente știri. Când selectați unul dintre ele, în coloana din dreapta sunt afișate o descriere mai detaliată și un link de citit text complet publicații. Implementat folosind jQuery.
Imaginile cu linkuri sunt derulate, când treceți cu mouse-ul, defilarea se oprește și apare bara de navigare. Când treceți mouse-ul peste o imagine, numele acesteia este de asemenea afișat între butoanele de control. Arata foarte bine pe pagina
33. Derularea conținutului, pluginul Mootools „Scrollbar”
Defilarea se face folosind atât bara de defilare, cât și rotița mouse-ului.
