Bună ziua, vreau să vă spun despre glisorul slick pentru site, care s-a dovedit a fi ușor, versatil și ușor de instalat. Poate fi folosit pentru a implementa tot ceea ce este legat de glisoare și carusele. După cum afirmă creatorul pluginului, „ultimul carusel de care veți avea nevoie vreodată”, care poate fi interpretat ca singurul carusel universal care este potrivit pentru oricare dintre ideile dvs. Și acest lucru este adevărat. Există tot ce nu are, de la un glisor obișnuit la un carusel adaptiv cu diapozitive pe mai multe rânduri.

Pluginul poate fi utilizat cu ușurință atât de către începători, cât și de către dezvoltatorii web experimentați. Acesta este un concurent foarte puternic al celui familiar. Din cutie obținem un instrument foarte multi-tasking.

Pentru a instala un glisor/carusel pe site-ul dvs., trebuie doar să urmați 3 pași simpli.

Instalarea glisorului slickExemplu nr. 1 (glisor)

1. Pas - Conectarea stilurilor de script și plugin.

pagina dvs. html.

$(document).ready(function())( $(".clasa ta").slick(); ));

Trebuie să vă conectați între etichetele paginii dvs. html, dar după codul pe care l-ați introdus la pasul nr. 1

În acest exemplu, am arătat cum să instalați un glisor slick ca un carusel cu un slide principal.

Mai jos puteți vedea un exemplu clar a ceea ce este descris mai sus.

Exemplul nr. 2 (carusel)

Pentru a instala caruselul, trebuie să faceți totul la fel ca în descrierea anterioară, dar vom schimba puțin pasul nr. 2 și pasul nr. 3.

2. Pas - introduceți codul html al sliderului.

Acest cod trebuie introdus între etichete, în locul în care doriți să afișați glisorul în sine.

3. Pas - inițializarea glisorului.

$(document).ready(function())( $(".clasa ta").slick(( infinit: adevărat, slidesToShow: 3, slidesToScroll: 3 )); ));

Și în acest exemplu am folosit slider slick ca un carusel (cu 3 slide-uri principale) și pentru asta am folosit câteva setări de plugin.

Puteți vedea cum funcționează acest carusel folosind exemplul de mai jos.

După cum puteți vedea, doar 3 pași și veți obține un carusel sau un slider pentru nevoile dvs. Dar există o mulțime de posibilități și setări pentru acest glisor. Dacă întâmpinați dificultăți sau aveți întrebări, întrebați-le în comentarii și voi încerca să le răspund rapid.

Salutare prieteni. Astăzi vom vorbi despre glisoare jQuery adaptive care vă vor ajuta să vă decorați pagina de destinație, să structurați corect informațiile și să le prezentați concis.

Odată am realizat un sondaj pe rețelele sociale și am cerut să vă sugerez un script slider util pe care îl utilizați singur. Postarea nu a avut un succes deosebit, dar am fost sfătuit un instrument excelent, care va fi pe primul loc astăzi. Pentru asta - mulțumesc foarte mult. Poate după acest articol cineva va recomanda un scenariu și mai bun.

TOP scripturi care implementează un glisor pe site

Deoarece toate scripturile prezentate mai jos sunt plugin-uri jQuery, acestea pot fi integrate cu ușurință în site-uri html obișnuite, precum și în orice CMS și multe .

Carusel cu bufnițe 2

După părerea mea, Owl Carousel 2 este cel mai bun slider jQuery gratuit. O mulțime de setări, disponibilitate API și posibilitatea de personalizare completă. M-am îndrăgostit de toate acestea la prima vedere. Răspuns perfect pe smartphone-uri și tablete, acceptă Swiping și multe altele.

Glisor slick

Pe locul doi, acum, aș pune glisorul Slick. O variantă destul de interesantă pe care am folosit-o de ceva vreme. Pentru sarcini, pagina de destinație mi s-a potrivit destul de bine. Comentarii de proiectare, logo-uri ale mărcilor și partenerilor, acest glisor a făcut față tuturor acestor lucruri cu brio. Este posibil să folosiți metode și evenimente, precum și să afișați glisorul în mai multe locuri de pe pagină.

Glisor Sudo

slick este o soluție cuprinzătoare pentru crearea funcționalității caruselului în diferitele sale manifestări. Demonstrațiile și opțiunile standard și sursele pot fi vizualizate/descărcate.

Tăierea excesului

În configurația de bază, slick are mai multe scripturi, mai multe stiluri și propriul font. Folosesc o versiune trunchiată:

• slick.min.js (minimificat)
• slick.css (+ stilurile pot fi curățate)
• slick-theme.css (+ stilurile pot fi curățate)

Stilurile pot fi combinate într-unul singur dacă se dorește.
Înlocuiesc link-urile către fontul slick cu un FontAwesome mai convenabil

Carusel de bază Bloc repetat

Funcționalitatea principală a caruselului este setată de div class="multiple-items". div class="carusel" este necesar doar pentru a seta indentarea din carusel.

Script de inițializare a scriptului

$(document).ready(function() ( $(".multiple-items").slick(( //infinit: adevărat, //defilare într-un cerc redare automată: adevărat, slidesToShow: 3, slidesToScroll: 3 )); ) );

Slick-slider (lățime: 100%; float: stânga;).slick-slide (cursor: pointer;).multiple-items .slick-slide (marja: 0 15px;).carusel (padding: 0 3%; float: stânga; lățime: 100%; dimensionare cutie: border-box;) /* pentru produse woocommerce */ .carusel .woocommerce ul.products (marja: 1em 0 1.992em 0; lățime: 100%;)

Carusel pentru produse woocommerce

Versiune modificată

Am simplificat puțin afișarea produselor pentru carusel (! nu este o soluție universală, poate fi afișată diferit în diferite opțiuni de aspect):

La încărcarea scripturilor carusel, apar distorsiuni în aspect. Să creăm stiluri inițiale care vor păstra caruselul în aspectul curent:

Multiple-items (afișare: flex !important; flex-wrap: wrap; margin-bottom: 25px;).multiple-items img ( -moz-backface-visibility: vizibil; -webkit-backface-visibility: vizibil; backface-visibility : vizibil; ) .slick-list (marja: 0 -1px 0 0 !important; padding: 0 1px 0 0 !important; lățime: 100%;) .slick-track (bord: solid #e9eaec; border-width: 0 0 0 1px; afișare: flex !important; padding-bottom: .1rem;) .carusel .product ( chenar: solid #e9eaec; margine: 1px 1px 1px 0; fundal: #fff; padding: 15px; : niciun text-align: poziție: margine-inferioară: -.1rem;

Am specificat proprietățile feței din spate pentru imagini deoarece... Dacă îl lăsați ascuns, atunci când derulați înapoi ei ascund etichetele.

Reactivitatea caruselului

Scriptul poate fi personalizat pentru diferite rezoluții de ecran. Pentru a face acest lucru, setați parametrii de răspuns în setări

Reactiv: [ ( punct de întrerupere: 1280, setări: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( breakpoint: 1024, setări: ( slidesToShow: 3, slidesToScroll: 3, ) ), ( breakpoint: 800, setări: ( slidesToShow): : 2, slidesToScroll: 2 ) ), ( punct de întrerupere: 480, setări: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]

Sau dezactivați-l complet la o anumită rezoluție - setări: „unslick”

Glisor slick

Recent, am făcut și glisorul principal bazat pe slick. Există o mică problemă - când pagina se încarcă, toate diapozitivele sunt afișate pentru câteva secunde, apoi sunt adăugate. L-am deghizat astfel:

Faceți totul invizibil, cu excepția unui diapozitiv:

Slick-track > div:nth-child(2) img (afișare: bloc !important;) #index-slider img (afișare: niciuna;)

Și când pagina se încarcă, includem restul:

JQuery(document).ready(function())( jQuery("#index-slider img").css("afisare", "blocare"); ));

Se încarcă diapozitive

Slick are o altă funcție utilă numită lazyload(). Trebuie doar să adăugați proprietatea lazyLoad: „la cerere” în script. Și modificați rezultatul imaginii:

Sau o poți simplifica și așa:

">

Și pentru ca diapozitivele să se încarce inițial, trebuie să setați proprietatea lazyLoad: „progresiv”

Încărcarea standard a imaginilor nu funcționează destul de corect, recomand să o folosiți împreună cu lazyload .

Versiunea mobilă a glisorului
Poate fi mărită în mobil. versiunea înălțimii glisorului, marginile imaginilor vor fi tăiate, dar imaginea va fi mai mare:

@media ecran și (max-device-width: 480px) ( #index-slider, .hotel-photos (height: 200px;).slick-list, .slick-track (height: 100%;) #index-slider img , .hotel-photos img (înălțime: 100%; potrivire obiect: coperta;) )

potrivire obiect: acoperire; - proprietate CSS 3 cool, acceptată de majoritatea browserelor

Galerie Slick

Recent, unul dintre site-uri a observat o utilizare interesantă a Slick sub forma unei galerii. Particularitatea este că imaginile galeriei ajung la marginile ecranului (o milă de site în ecran complet).

Pentru a-l implementa, trebuie să plasați glisorul (#index-slider) într-un container (.s2) și să adăugați următoarele stiluri:

S2 (depășire: ascuns; afișare: bloc;) #index-slider (lățime maximă: 1000px; margine: 0 auto;) .s2 .slick-list (depășire: vizibil;) #index-slider .slick-slide img ( lățime maximă: 800px marjă: 0 auto;)

sau chiar mai simplu:

Pentru a face o astfel de galerie, trebuie doar să specificați 2 stiluri:

#index-slider (lățime maximă: 1280px; margine: 0 automat;) #index-slider .slick-list (depășire: vizibil;)

Salutare tuturor și astăzi vă voi spune despre un glisor foarte tare și, cel mai important, simplu - slick.

Accesați site-ul http://kenwheeler.github.io/slick/ Acolo puteți găsi o mulțime de exemple despre cum funcționează glisorul slick. Acest glisor are într-adevăr o mulțime de efecte diferite și are, de asemenea, derulare cu mouse-ul. Aceste. puteți face clic pe orice element din glisor cu butonul stâng al mouse-ului și, în timp ce îl țineți, derulați glisorul la stânga sau la dreapta. Această funcție nu este în întregime utilă pentru computere, dar pe smartphone-uri și tablete este grozavă!

Deci, pentru a-l conecta, descărcați fișierele de pe site-ul prezentat mai sus. Acum să creăm html și să conectăm componentele necesare, în special jquery, deoarece Glisorul folosește această bibliotecă pentru lucrul său.

continutul tau
continutul tau
continutul tau

Conectați stiluri

Și conectați scripturile

Pentru a inițializa glisorul, scrieți următoarele în eticheta de script:

$(".clasa ta").slick((
nume-setare: valoare-setare
});
});

Fișierul dvs. html va arăta cam așa:

Slick

continutul tau
continutul tau
continutul tau

$(document).gata(funcție())(
$(".clasa ta").slick((
nume-setare: valoare-setare
});
});

Acest glisor are multe setări pe care le puteți seta singur. Le puteți găsi pe toate pe același site, în partea de jos a paginii în semn. Ele ar trebui să fie setate în timpul inițializării în obiect.

$(document).gata(funcție())( $(".clasa ta").slick(( redare automată: adevărat; )); ));

În acest exemplu, am indicat că merită să defilați automat prin diapozitive.

Deci, după cum puteți vedea, glisorul este foarte ușor de instalat și configurat, dar vă permite să faceți niște lucruri foarte interesante. Vă mulțumim pentru atenție și ne vedem curând!

Articolul oferă o privire de ansamblu asupra instalării și funcționării glisorului slick. Sunt luate în considerare opțiunile posibile pentru implementarea glisorului, caracteristicile comutării diapozitivelor și metoda de ieșire.

Destul de des pe diverse resurse de Internet puteți găsi o tehnică funcțională precum un slider. Glisorul sunt mai multe imagini arbitrare care informează vizitatorul despre posibilele direcții în care își desfășoară activitatea compania. Comutarea cursorului poate fi setată în modul automat, adică după o anumită perioadă de timp, glisierele se mișcă independent. De asemenea, este de remarcat faptul că în zona vizibilă pot exista mai multe tobogane. În plus, conținutul lor poate fi nu numai o imagine, ci și un link, un formular de feedback sau un alt dispozitiv funcțional.

Există destul de multe tipuri de glisoare și modalități de a le implementa. În acest articol ne vom uita la modul în care funcționează glisorul slick. Acesta este cel mai comun și universal glisor, de remarcat, de asemenea, ușurința în funcționare.

Primul pas pentru a instala un glisor este descărcarea pluginului. Poate fi descărcat din resursa autorului pluginului, de asemenea, sunt descrise diverse setări, dar în limba engleză.

Câmpul despre cum a fost descărcată arhiva descărcată cu glisorul - extrageți folderul în directorul site-ului nostru. Dacă te uiți la fișierele slider, vei vedea că pluginul are propriile foi de stil. În consecință, pentru ca ei să se conecteze, trebuie să scrieți un anumit cod în zona etichetei head. Va arata cam asa

< link rel= "stylesheet" type= "text/css" href= "slick/slick.css" /> < link rel= "stylesheet" type= "text/css" href= "slick/slick-theme.css" />

Procesul de includere a stilurilor nu este diferit de un fișier CSS obișnuit. După aceasta, trebuie să conectați bibliotecile de glisare. Ele sunt de obicei incluse într-un fișier separat, care conține toate linkurile către fișierele de cod js. Dacă nu aveți un astfel de fișier, atunci codul trebuie introdus în interiorul etichetei body, și anume înainte de a fi închis. Așa arată codul

< script type= "text/javascript" src= "//code.jquery.com/jquery-1.11.0.min.js" > < script type= "text/javascript" src= "//code.jquery.com/jquery-migrate-1.2.1.min.js" > < script type= "text/javascript" src= "slick/slick.min.js" >

După aceasta, putem începe să creăm corpul HTML al glisorului nostru. Aici aș dori să subliniez una dintre caracteristicile slick. Majoritatea glisoarelor sunt construite folosind liste, ale căror componente acționează ca slide-uri. Pluginul în cauză nu funcționează cu liste, ci cu elemente de bloc. Acest lucru este fundamental, deoarece dacă diapozitivele sunt plasate într-o listă, codul nu va funcționa. Codul HTML glisor ar trebui să arate cam așa

< div class = "slick-slider" > < div>Slide 1< div>Slide 2< div>Slide 3

Etapa finală a instalării glisorului va fi inserarea unui script care începe să funcționeze. În același timp, acest script este responsabil pentru configurarea glisorului. În funcție de clasele și comenzile utilizate, putem obține diferite slidere cu diferite moduri de a prezenta diapozitive și de a le răsturna. Acest lucru va fi discutat mai detaliat mai jos, dar acum vom arăta un exemplu de script.

$(document) . gata(funcția () ( $(".slick-slider).slick(( nume-setare: valoare-setare )); ));

Acest script este inserat într-un fișier separat, unde sunt colectate toate scripturile care rulează pe site, sau după corpul HTML al glisorului din eticheta de script.

Exemple de utilizare a diferitelor configurații de glisor Slick

Primul și cel mai simplu tip de plugin pe care îl învățăm este o prezentare cu un singur diapozitiv. În acest caz, vom avea un diapozitiv afișat pe toată lățimea ecranului. Când comutați de-a lungul săgeților, doar un singur slide se va schimba. Pentru a implementa o astfel de soluție, trebuie să inserați următorul cod în scriptul activator

$(".single-slide") . slick() ;

Pur vizual, un astfel de glisor va arăta cam așa

Nu este greu de ghicit că, dacă există o singură versiune a glisorului, atunci în paralel cu aceasta puteți implementa una multiplă. Cu alte cuvinte, mai multe diapozitive vor fi afișate pe ecran deodată și vă puteți asigura că diapozitivele comută fie pe rând, fie mai multe sau toate deodată. Un astfel de glisor este organizat folosind următorul script

$(".multiple- slide " ) . slick(( infinit: adevărat , slidesToShow: 3 , //numărul de diapozitive care sunt afișate pe ecran slidesToScroll: 2 //numărul de diapozitive care sunt derulate la un moment dat ) ) ;

În practică, va arăta așa

Nu un glisor în buclă

În practică, majoritatea glisoarelor sunt în buclă. Mai simplu spus, după ce ultimul diapozitiv a fost afișat, trece la începutul listei și glisorul funcționează din nou. Există o soluție care vă permite să creați un glisor fără buclă. Adică, comutarea nu va avea loc dincolo de ultimul diapozitiv, la fel cum în direcția opusă, nimic nu va fi afișat înainte de prima imagine. Ne uităm și ne amintim combinația de cod care conectează un astfel de glisor

SlidesToShow: 4 , slidesToScroll: 2 , ) ) ;

Și în browser obținem ceva de genul acesta:

Nota

Aș dori să remarc că pentru acest tip de slider puteți configura afișarea adaptivă a unui anumit număr de diapozitive în funcție de lățimea ecranului. De exemplu, trebuie să afișați doar 2 diapozitive când lățimea ecranului este mai mică de 600 de pixeli și acestea se schimbă pe rând. Soluția la această problemă va arăta astfel

$(".uncycle") . slick(( infinit: fals , viteza: 350 , // determina viteza de defilare slidesToShow: 4 , // numărul de diapozitive pentru a afișa slidesToScroll: 2 , // câte diapozitive vor derula la un moment dat în funcție de: [ ( breakpoint: 600) , // informează când ce lățime a ecranului trebuie să fie activată setările: ( slidesToShow: 2 , slidesToScroll: 1 , infinite: true , ) ) ] ) );

Lățimea și înălțimea variabile a toboganelor

Următorul tip de glisor pe care îl vom analiza este unul cu lățimi variabile de diapozitiv. Această soluție ne permite să folosim imagini cu lățimi diferite, ceea ce în anumite cazuri le păstrează calitatea. De asemenea, puteți centra glisorul curent pentru o ieșire mai frumoasă.

$(".var-width" ) . slick(( infinit: adevărat , viteza: 250 , // determina viteza de defilare slidesToShow: 1 , // numărul de diapozitive de afișat în centruMode: true , // slide-ul curent este centrat variabilWidth: true // setează o lățime variabilă ) );

Există, de asemenea, o opțiune similară care vă permite să creați un glisor cu înălțimi variabile de diapozitiv. Pentru a face acest lucru, trebuie să schimbați ultima linie din codul prezentat mai sus în

adaptiveHeight: adevărat

Configurarea unui glisor folosind un atribut

Pentru versiunea Slick 1.5, a devenit posibilă adăugarea parametrilor de glisare prin codul HTML folosind atributul data-slick. Acest atribut a fost conceput special pentru a exclude utilizarea codului js într-un document HTML. Mai jos este un exemplu de utilizare a atributului

< div class = "slick-slider" data- slick= "{"slidesToShow": 3, "slidesToScroll": 1}" > < div>Slide 1< div>Slide 2< div>Slide 3

Efectul vizual nu va fi diferit de atunci când folosim codul js în interiorul unei etichete de script.

Aduceți glisorul curent în centrul ecranului

O opțiune foarte populară este atunci când slide-ul principal, care este în centrul atenției utilizatorului, este plasat în mijlocul ecranului. În acest caz, toboganele cele mai exterioare se extind puțin dincolo de zona vizibilă. Acest lucru creează un efect vizual plăcut. De asemenea, în paralel cu aceasta, ne vom asigura că diapozitivul căruia îi este atribuită focalizarea este ușor mărit. Pentru a face acest lucru, vom adăuga umplutură internă pentru blocuri cu diapozitive numai dacă imaginile sunt folosite ca diapozitive, efectul va fi invizibil. Acest lucru se face după cum urmează

$(".mijloc" ) . slick(( centerMode: true , //centrează centrul actual al diapozitiveiPadding: "50px" , //mărește ușor diapozitivele curenteToShow: 3 //afișează 3 diapozitive pentru vizualizare) );

Până la urmă obținem așa ceva

Comutare lină

În starea standard, glisorul efectuează înlocuirea bruscă a diapozitivelor. Dar funcționalitatea Slick oferă un mod de înlocuire lină a diapozitivelor. Pentru a face acest lucru, trebuie să utilizați atributul data-lazy, care specifică calea către imagine. Atributul nu trebuie atribuit wrapper-ului, ci etichetei de imagine. Acest lucru va evita utilizarea codului js. O alternativă ar fi această comandă

lazyLoad: „la cerere”

atributul ar trebui scris astfel

< img data- lazy = " images/slaid.jpg" >

Schimbarea lină, fără mișcare

Particularitatea acestui glisor este că pe ecran există un singur slide, care, atunci când este comutat, trece treptat în următorul. Efectul se bazează pe principiul creșterii fără probleme a transparenței. Adică, este selectată o anumită perioadă de timp, în care transparența primului diapozitiv se schimbă de la 0% la 100%, datorită căreia următorul diapozitiv devine vizibil. Scriptul pentru un astfel de glisor va arăta astfel

$(".fade") . slick(( infinit: adevărat, viteză: 400, estompare: adevărat, cssEase: „liniar”) );

Glisor de sincronizare

Acest tip de glisor are mai multe diferențe speciale decât cele anterioare. Efectul de sincronizare se manifestă prin faptul că glisorul însuși cu diapozitivele este retrogradat pe fundal. O vedere mai mare a diapozitivului curent este esențială. Această previzualizare este situată deasupra glisorului. Secretul acestei animații constă în ieșirea a 2 glisoare, care comută sincron diapozitivele, doar unul dintre ele afișează un singur bloc, iar al doilea mai multe. Script glisor:

$(".principal" ) . slick(( slidesToShow: 1 , slidesToScroll: 1 , săgeți: false , fade: true , asNavFor: ".slider-nav" ) );

$(".second).slick(( slidesToShow: 3, slidesToScroll: 1, asNavFor: " . slider- for ", dots: true, centerMode: true, focusOnSelect: true ));

Așa va arăta pe ecran

Setări

• După cum probabil ați observat deja, rolul principal în glisor este jucat de scriptul activator. Leagă toate funcționalitățile glisorului la un anumit bloc cu imagini sau alte informații. Și în funcție de ce comenzi sunt scrise în acest script, există diferite tipuri de glisoare Slick cu funcționalități diferite. Mai jos este o listă a acestor comenzi cu o descriere a fiecăreia. Aceasta va fi o foaie bună pentru tine dacă ești încă nou la acest glisor.
• accesibilitate - valoarea inițială a acestui parametru este setată la adevărat, este responsabil pentru conectarea butoanelor de navigare pentru glisor - acestea sunt săgeți înainte și înapoi, precum și butoane sub formă de puncte.
• adaptiveHeight – se aplică doar unui singur glisor, care va modifica înălțimea containerului părinte în funcție de înălțimea glisorului. În condițiile inițiale, setarea nu este conectată.
• redare automată – setează automat rotirea diapozitivei, fără intervenția utilizatorului. Valoarea implicită pentru această setare este false.
• autoplaySpeed ​​​​- acest parametru este auxiliar pentru redarea automată și setează perioada de timp după care slide-ul se va întoarce automat. Inițial, a fost setat la 3000 de milisecunde.
• săgeți – conectează săgețile înainte și înapoi la glisor. Puteți utiliza o foaie de stil externă pentru a schimba poziția și aspectul acestor săgeți.
• asNavFor – stabilește o conexiune de navigare între două glisoare folosind un identificator sau o clasă. În condițiile inițiale, parametrul corespunde unei valori zero.
• prevArrow – vă permite să schimbați aspectul săgeții de navigare standard, care derulează prin diapozitivul anterior.
• nextArrow – similar cu funcțiile parametrului anterior, dar este responsabil pentru săgeata care comută slide-ul înainte.
• centerMode – fixează slide-ul curent în centrul containerului părinte, inițial parametrul este dezactivat.
• cssEase – este responsabil pentru animația comutării imaginilor, o poate face mai netedă sau mai clară. Preia valoarea implicită „ease”.
• customPaging – vă permite să introduceți propriul șablon pentru vizualizarea glisorului.
• puncte – conectează punctele comutatoare, este dezactivat implicit.
• draggable – permite posibilitatea de a derula diapozitive ținând apăsat mouse-ul. Adică, dacă treceți cursorul mouse-ului peste glisor, îl țineți apăsat și îl mutați în lateral, slide-ul va trece la următorul.
• fade – creează efectul de estompare a diapozitivei la comutare, un efect de animație.
• focusOnSelect – concentrează elementul glisor specificat.
• easing – vă permite să setați un mod special de animație atunci când comutați imaginile.
• edgeFriction – dezactivează comutarea slide-ului pe ultimul element. Se declanșează numai dacă glisorul nu este în buclă.
• infinit – trece în buclă prezentarea de diapozitive. Aceasta înseamnă că atunci când comutați ultima imagine, prezentarea de diapozitive va începe de la capăt.
• initialSlide – definește imaginea de la care va începe expunerea de diapozitive. În mod implicit, glisorul de pornire selectează prima imagine în ordine.
• lazyLoad – vă permite să setați modul de încărcare pentru diapozitivele următoare. Există doar 2 setări disponibile: „la cerere” și „progresiv”, aceasta din urmă fiind valoarea implicită.
• pauseOnHover – oprește defilarea diapozitivelor când treceți mouse-ul peste corpul glisorului. Funcționează numai dacă este definită comutarea automată a diapozitivelor.
• pauseOnDotsHover - oprește defilarea diapozitivelor când treceți mouse-ul peste comutatoarele cu puncte. Funcționează numai dacă este definită comutarea automată a diapozitivelor.
• respondTo – provoacă o reacție la modificările lățimii ferestrei browserului. Există trei valori disponibile pentru utilizare: „fereastră”, „glisor” sau „min”.
• receptiv – vă permite să adaptați setările cursorului la lățimea ecranului. Aceasta diferă de setarea anterioară prin faptul că limita de lățime este determinată de o valoare exactă în pixeli. Folosit pentru aspect adaptiv pentru dispozitive mobile.
• slidesToShow – vă permite să setați numărul de imagini afișate în zona vizibilă. Inițial, este afișat 1 diapozitiv, dar această valoare poate fi variată.
• slidesToScroll – îi spune glisorului câte imagini să schimbe la comutare.
• viteza – fixează viteza cu care se vor comuta glisierele.
• variabilWidth – adaptează lățimea containerelor glisante la lățimea fiecărei imagini afișate.

Pentru a rezuma

În concluzie, aș dori să remarc că Slick este cel mai versatil și ușor de utilizat slider de astăzi. Gama largă de setări de glisor acoperă o mare varietate de soluții de implementare a glisoarelor, care este probabil cel mai semnificativ avantaj al acestui glisor.