Carusel adaptiv cu mai multe rânduri. Cum să creați un carusel folosind numai HTML și CSS. Slider de conținut jQuery receptiv bxSlider

Faceți un carusel folosind JS pur, de la zero și singur? De ce să reinventeze roata când există soluții gata făcute, glisoare slick/bufniță? Există cel puțin două motive pentru aceasta:

• în scop educativ
• pentru a finaliza sarcinile de testare

Când aplicați pentru un loc de muncă, chiar și pentru postul vacant de designer de layout HTML, vi se va cere nu numai să creați un carusel, ci și să îl implementați în JS, fără a utiliza biblioteci terțe.

Exemplu de carusel Ce face JavaScript cu elementele?

Modifică proprietățile elementelor folosind metode atunci când apar evenimente. Trei piloni pe care se bazează JavaScript:

• proprietăți
• metode
• evenimente

Utilizatorul declanșează evenimentul onclick atunci când se face clic pe butonul. Sarcina programatorului este să atașeze un eveniment de clic la elementul dorit și să scrie instrucțiuni (funcție) pentru browser ce ar trebui să se întâmple când se face clic.

Markup HTML pentru carusel

Să creăm un container pentru imagini, să inserăm imaginile în sine și două butoane - Redirecţiona / Înapoi.

Înapoi
Redirecţiona

Stiluri CSS #galerie(
lățime: 640px;
marja: 20px automat;
text-align: centru;
}

#galerie.fotografii img(
latime: 100%;
afișaj: niciunul;
}

#galerie .fotografii img:primul-copil(
afisare: bloc;
}

Butoane (
margine-sus: 20px;
}

Logica caruselului

Cum scrii cod JS când nu înțelegi logica a ceea ce se întâmplă? Când apăsați butonul Redirecţiona, imaginea curentă dispare și în locul ei apare una nouă. Există întotdeauna o singură imagine în zona de vizibilitate, dar restul unde sunt atunci? Și am ascuns restul, setați afișare: niciuna pentru toate imaginile, lăsând doar prima, setându-l afișare: bloc, prin pseudoclasa primul copil.

Cum să faceți astfel încât de fiecare dată când faceți clic pe un buton Redirecţiona, prima poză a dispărut, a apărut a doua, iar în loc de a doua, a treia. Este necesar să comutați proprietatea de afișare între none / block când faceți clic pe butonul.

Cod JS Efectuarea unei selecții de elemente

Să luăm butoanele Redirecţiona / Înapoi prin selector, folosind metoda querySelector și punându-le în variabilele btn_prev / btn_next.

Let btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");

Să obținem toate imaginile prin selector folosind metoda querySelectopAll și, de asemenea, să le plasăm în variabila imagini.

querySelectopAll – primește o serie de elemente, adică toate imaginile.

Let images = document.querySelectorAll("#gallery .photos img");

Într-o matrice, elementele sunt stocate, deja numerotate, începând de la zero. Prin urmare, îi putem contacta la numărul. Dar mai întâi, să creăm o nouă variabilă și să plasăm în ea numărul primei imagini, cea care are afișarea: proprietatea bloc.

Fie i = 0; // numărul imaginii curente de pe ecran

Ne întoarcem la imaginea curentă și îi schimbăm proprietatea de afișare în stiluri.

Imagini[i].style.display = „niciuna”; // ascunde imaginea curentă

Acum, nu există nici o singură imagine pe ecran. Cum va apărea următoarea poză acolo? Știm că numărul imaginii următoare va fi întotdeauna mai mare decât numărul celei anterioare, cu unu.

I++ ; // crește variabila i cu una

images.length este numărul de imagini care se pot schimba, deci nu este nevoie să indicăm că avem 3 imagini, browserul știe deja acest lucru. Creștem contorul i, de fiecare dată cu câte unul, până când apare ultima poză, apoi forțăm caruselul să revină din nou la prima poză. Aceasta se numește looping.

Notăm condiția ca atunci când contorul i devine mai mare decât numărul de imagini disponibile, acesta va reveni la imaginea curentă, numărul 0.

Dacă(i >= imagini.lungime)(
i = 0; // variabila i este 0
}

Când parcurgeți imaginile în ordine inversă, contorul i ar trebui să scadă cu unu. Dacă valoarea variabilei devine mai mică decât zero, atunci trebuie să puneți în ea numărul ultimei imagini.

Btn_prev.onclick = function())(
imagini[i].style.display = „niciuna”;
i = i - 1;
dacă eu< 0){
i = imagini.lungime - 1;
}
imagini[i].style.display = „bloc”;
}

Scădem unul din numărul total de imagini.lungime și obținem imaginea numărul 2. Aceasta va fi ultima imagine, deoarece calculul în programare începe de la zero.

Pentru a trece testul pentru poziția de designer de layout, aveți nevoie de o înțelegere sigură a JS, care se adresează în mod special designerilor de layout.

Da, subiectul este destul de complicat. Dar totuși, este adesea dificil să găsești ceea ce ai nevoie cu adevărat. Toate oferă scripturi extrem de sofisticate, cu o mulțime de funcționalități inutile. Și, de obicei, acestea sunt deja pluginuri comprimate.

Prin urmare, voi oferi versiunea mea alternativă a unui carusel foarte simplu folosind jQuery.

Poate fi folosit ca carusel de imagini, precum și ca carusel de știri sau orice alt conținut =)

Singura răsucire mică pe care mi-am permis-o a fost o umbră lângă blocul carusel.

UPD: 07/06/2014

Va arata cam asa:
Descărcați DEMO

Structura va lua următoarea formă:

TJ carusel adaptiv simplu

Să descriem stilurile:

Carusel (max-width: 1080px; /* lățimea întregului bloc */ margin: 50px auto; width:100%; ) .carusel-wrapper (marja: 10px 30px; /* padding for arrows */ overflow: hidden; / * ascunde conținutul care se extinde dincolo de zona principală */ position:relative; ) .carusel-items ( lățime: 10000px; /* setează o lățime mai mare pentru setul de elemente */ poziție: relativ; /* poziționează blocul în raport cu zona principală a caruselului */ ) .carusel -block ( float: stânga; /* aliniați toate elementele caruselului */ lățime: 250px; /* setați lățimea fiecărui element */ padding: 10px 10px 10px 0px; /* faceți margini astfel încât elementele să nu se îmbină */ ) .carusel -block img( display:block; ) /********** BUTONE ***********/ .carusel-button -stânga a, .carusel-button-right a( lățime: 25px; înălțime: 36px; poziție: relativă; sus: 80px; cursor: pointer; text-decoration:none; ) .carusel-button-left a( float: stânga ; fundal: url(../images/carousel- left.png); .carusel-button-right a( float: dreapta; fundal: url(../images/carousel-right.png); ) /******** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); )

Și, în sfârșit, cum ar trebui să funcționeze:

//Manevrând un clic pe săgeata dreapta $(document).on("click", ".carusel-button-right",function())( var carusel = $(this).parents(".carusel"); dreapta_carusel(carusel); return false; )); //Manevrând un clic pe săgeata din stânga $(document).on("click",".carusel-button-left",function())( var carusel = $(this).parents(".carusel"); stânga_carusel(carusel); return false; )); function left_carusel(carusel)( var block_width = $(carusel).find(".carusel-block").outerWidth(); $(carusel).find(".carusel-items .carusel-block").eq(- 1).clone().prependTo($(carusel).find(".carusel-items")); $(carusel).find(".carusel-items").css(("stânga":"-" +block_width+"px")); $(carusel).find(".carusel-items .carusel-block").eq(-1).remove(); $(carusel).find(".carusel-items" ).animate((stânga: "0px"), 200); ) function right_carusel(carusel)( var block_width = $(carusel).find(".carusel-block").outerWidth(); $(carusel).find ("".carusel-items").animate((stânga: "-"+ block_width +"px"), 200, function())( $(carusel).find(".carusel-items .carusel-block") . eq(0).clone().appendTo($(carusel).find(".carusel-items")); $(carusel).find(".carusel-items .carusel-block").eq(0 ) .remove(); $(carusel).find(".carusel-items").css((("left":"0px")); )); ) $(function() ( //Anulați comentariul liniei de mai jos pentru a activa derularea automată a caruselului auto_right(".carusel:first"); )) // Funcția de defilare automată auto_right(carusel)( setInterval(function())( if (!$(carusel).is(".hover") )) carusel_dreapta( carusel); ), 3000) ) // Mutați cursorul peste carusel $(document).on("mouseenter", ".carousel", function())($(this).addClass("hover"))) // Eliminați cursorul din carusel $(document).on("mouseleave", ".carusel", function())($(this).removeClass("hover")))

În consecință, umbra poate fi îndepărtată. Și pentru a-l folosi, trebuie doar să modificați dimensiunea blocului principal și a blocurilor de „defilare” imbricate în CSS. De asemenea, este foarte ușor să faceți bucla acest proces, astfel încât să deruleze automat (în acest caz, trebuie doar să decomentați apelul funcției auto_right). Adică, din această galerie simplă puteți face tot ce aveți nevoie în cadrul sarcinii!

De asemenea, trebuie menționat că exemplul dat este adaptativ, adică dimensiunea caruselului se adaptează în funcție de dimensiunea ecranului și va fi afișată corect atât pe ecranul computerului sau laptopului, cât și pe ecranele tabletelor și smartphone-urilor.

Î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 machete receptive. Site-urile de comerț electronic folosesc un glisor carusel pentru a afișa mai multe fotografii în postări sau pagini individuale. 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 carusel

Slick 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 tactile

Acest plugin are un set mare de funcții, potrivite atât pentru începători, cât și pentru dezvoltatori experimentați. Aceasta este o versiune actualizată a glisorului 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ă slider, încărcare leneșă, reglare automată a înălțimii - acestea sunt principalele caracteristici ale Owl Carousel 2.0.

Suportul de glisare și plasare este inclus pentru o utilizare mai convenabilă a pluginului dispozitive mobile.
Pluginul este perfect pentru afișarea imaginilor mari chiar și pe ecrane mici ale dispozitivelor mobile.

Exemple | Descarca

Pluginul jQuery Pista de argint

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

AnoSlide – adaptiv ultra compact Slider jQuery

Slider jQuery ultra compact - carusel, a cărui funcționalitate este mult mai mare decât cea a unui slider obișnuit. Include previzualizare o singură imagine, afișând mai multe imagini sub formă de carusel și glisor bazat pe titluri.

Exemple | Descarca

Owl Carusel – glisor Jquery – carusel

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

Galerie 3D - carusel

Utilizează tranziții 3D bazate pe stiluri CSS și puțin cod Javascript.

Exemple | Descarca

Carusel 3D folosind TweenMax.js și jQuery

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 propriile glisoare, acest carusel vă va fi de mare ajutor.

Exemple | Descarca

Carusel folosind bootstrap

Glisor receptiv - carusel care folosește tehnologia bootstrap doar pentru noul tău site web.

Exemple | Descarca

Glisor pentru carusel Moving Box bazat pe cadrul Bootstrap

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

Tiny Circleslider

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. Suport încorporat disponibil sisteme de operare 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

Slider de conținut Thumbelina

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

Wow – glisor – carusel

Conține peste 50 de efecte, care vă pot ajuta să creați un glisor original pentru site-ul dvs. web.

Exemple | Descarca

Slider de conținut jQuery receptiv bxSlider

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

jCarusel

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 - plugin jQuery

Scrollbox este un plugin compact pentru crearea unui glisor - un carusel sau un crawl de text. Caracteristicile cheie includ efecte de defilare pe verticală și orizontală cu pauză la mouse-ul deasupra.

Exemple | Descarca

dbpasCarusel

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

Flexisel: Responsive JQuery Slider Plugin - Carusel

Creatorii Flexisel s-au inspirat din pluginul old school jCarousel, realizând o copie a acestuia având ca scop funcționarea corectă a glisorului pe dispozitivele 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 - glisor adaptiv- carusel

Elastislide se adaptează perfect la dimensiunea ecranului dispozitivului tău. Poți întreba cantitate minimă imaginile afișate 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

FlexSlider 2

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

Carusel uimitor

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.

Exemple | Descarca

/* Aici începe caruselul nostru. Block.carusel-wrapper este pozitionat relativ, wrapper.carusel-item este pozitionat absolut. . */ .carusel-wrapper( position:relative; /* Cutiile poziționate absolut își primesc înălțimea și lățimea de la părintele lor. Le-am făcut transparente în mod implicit, iar apoi vor apărea fără probleme când dați clic pe links.arrow-prev și.arrow- următorul. * / .carusel-element( poziție: absolut; sus:0; jos:0; stânga:0; dreapta:0; padding:25px50px; opacitate:0; transition:all0.5sease-in-out; /* Observat padding-ul în stânga și 50px în dreapta? În acest fel ne putem poziționa link-urile! Fiecare va avea 50px lățime. De asemenea, folosesc link-uri goale cu imagine de fundal astfel încât legăturile să arate ca săgeți. Verificați dacă ați schimbat adresa URL a linkurilor cu adresa URL inițială, astfel încât linkurile dvs. să nu fie doar dreptunghiuri transparente. */ .săgeată(poziție:absolut; sus:0; afișare:bloc; lățime:50px; înălțime:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); fundal:url( „/carousel-arrow-dark.png”)50%50%/20pxno-repeat; /* Să ne întoarcem săgeata la stânga. */ &.arrow-prev( left:0; ) /* Și a doua la dreapta. Pentru că folosesc aceeași imagine pentru săgeată, o rotesc cu 180 de grade. */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Îmi place foarte mult cum arată diapozitivele carusel fundal întunecat, iar dacă block.carousel-item are clasa „light”, îi vom schimba textul în alb și vom folosi săgeți albe în loc de cele gri. Verificați de două ori dacă calea către imaginea săgeții este corectă */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Să scriem o interogare media pentru a modifica dimensiunea săgeților de pe dispozitivele cu dimensiuni mai mici ale ecranului.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background -position:10px50% ; ) ) ) /* Setați link-urile ținte pentru a afișa: none; În acest fel, scăpăm de browserul care sare în mod constant în partea de sus a caruselului de fiecare dată când facem clic pe săgeți. Această proprietate este eficientă pentru orice elemente al căror ID începe cu „articol-țintă”. */ ( display:none; ) /* Mai sus, am făcut toate diapozitivele noastre carusel transparente, ceea ce înseamnă că atunci când caruselul se încarcă, vom primi o cutie mare goală. Să modificăm valoarea transparenței pentru primul diapozitiv la 1 pentru afișare. De asemenea, setăm indexul z la 2, poziționându-l deasupra restului diapozitivelor. */ .item-1( z-index:2; opacitate:1; ) /* Dar nu dorim ca primul diapozitiv să aibă întotdeauna o valoare de opacitate de opacitate: 1; altfel, va trebui să ne străduim drumul prin acest diapozitiv în timp ce le rotim pe celelalte. */ *:target~.item-1( opacitate:0; ) /* ..dar dacă #target-item-1 este focalizat și vrem să arătăm primul diapozitiv, apoi selectați-l folosind pictograma ~ și setați opacitate din nou la 1:-) */ #target-item-1:target~.item-1( opacitate:1; ) /* Dacă alte elemente-țintă-# sunt focalizate, selectați-le folosind selectorul ~, afișați fără probleme le și plasați-le deasupra folosind z-index: 3. Aici puteți adăuga intervale suplimentare cu identificatorul articolului țintă dacă aveți mai mult de trei dintre ele. Poate adăuga 10 bucăți deodată.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacitate:1; ) )

Owl Carousel este un plugin jQuery cu suport tactil care vă permite să creați un glisor (carusel) receptiv (adaptabil).
Este foarte convenabil, simplu și plugin adaptiv pentru crearea de cursoare, carusele etc.
În acest articol voi încerca să explic și să vă arăt cum funcționează.

Instalarea pluginului Owl Carousel
Mai întâi trebuie să descarcăm arhiva cu pluginul

Mai jos voi arăta un exemplu de instalare a pluginului în șablonul DataLife Engine.

După ce am descărcat arhiva, deschideți-o și distribuiți fișierele după cum urmează:
Fișierul owl.carousel.css și owl.transitions.css sunt plasate în folder stil deci sau css.
Fișierul owl.carousel.js este plasat în folderul js

Acum trebuie să conectăm aceste fișiere, astfel încât să funcționeze în șablonul nostru.
Deschideți fișierul main.tpl și înainte de linie introduceți următoarele rânduri:
Schimbați folderul css cu cel în care aveți stiluri css!
Apoi, în partea de jos, înainte de linie, introducem următoarea linie:
OK, totul sa terminat acum! Am terminat cu instalarea.

Acum trebuie să inserăm și să configuram glisorul în sine.
Vă voi arăta cu un exemplu știri de top acestea Voi afișa știri populare prin caruselul nostru de bufnițe.

Pagina de documentație descrie toate opțiunile, demonstrațiile și modalitățile de utilizare a pluginului nostru Owl Carousel.
Urmați linkul și selectați orice glisor care vă place.
Pentru ai noștri știri de top Am ales-o pe prima cu nume Imagini.În fila javascript, copiați aceste rânduri:
$(document).ready(function() ( $("#owl-demo").owlCarousel(( redare automată: 3000, articole: 4, articoleDesktop: , articoleDesktopSmall: )); )); și introduceți-le în fișierul main.tpl înainte de linie

Apoi în fila CSS copiem liniile:
#owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) și conectați-le la orice css fișier fie în fișierul main.tpl înainte de linie, dar după linie !
Acum vom analiza codul nostru HTML și îl vom conecta la știri de top.În fișierul main.tpl, introduceți eticheta (topnews) în locul dorit, care la rândul său afișează o listă de știri populare, aspect care poate fi configurat în fișierul topnews.tpl, mai multe despre asta mai jos.
Codul nostru de etichetă ar trebui să arate astfel:
(topnews) Ei bine, acum trebuie doar să stabilim știrile în sine.
Deschideți fișierul opnews.tpl și introduceți următoarele de la început:
la final închidem atributul

Dacă utilizați unul dintre șabloanele mele cu Bootstrap, atunci, ca opțiune, puteți utiliza următoarele rânduri în fișierul topnews.tpl:
(title limit="55")

(text limit="100")

Citiți știrile vor fi afișate astfel

Acest plugin poate fi folosit aproape oriunde, folosind și eticheta (categorie personalizată)
Poate înlocui și galeria DLE standard, voi publica un articol separat despre asta. Bucură-te de el pentru sănătatea ta ;)

Salutări, admin. descărcare Atenție: limita de descărcare a fost atinsă. Vino maine =)