Flexslider - slider adaptiv - scripturi pentru site-uri

Luați în considerare utilizarea de bază a cursorului, și anume primul exemplu din Demo.

Containerul din interiorul căruia este o listă neordonată cu imaginile noastre:

Fișa de stiluri pentru plugin-uri este atașată:

JQuery este conectat. plugin-ul însuși și inițializarea acestuia cu opțiunile necesare:

Alte exemple, vezi Demo.

Spațiu de nume. "flex-", // String: Prefixul atașat la clasa fiecărui element generat de plugin
selector. ".slides> li", // Selector: Trebuie să se potrivească cu un model simplu. '>' - Ignorați șablonul pe propriul risc
animație. "fade", // String: Tipul de animație, "fade" sau "slide"
relaxare. "swing", // String: Specifică tranziția acceptată de pluginul jQuery easing.
direcție. "orizontală", // String: Selectează direcția schimbării imaginii "orizontală" sau "verticală"
inversă. false, // Boolean: inversează direcția animației
animationLoop. true, // Boolean: ciclicitatea animației. În cazul în care false, directionNav va adăuga o clasă de "dezactivare" la ambele capete ale cursorului
smoothHeight. false, // Boolean: Permiteți înălțimea cursorului să animeze fără probleme în modul orizontal
startAt. 0, // Integer: Diapozitivul din care ar trebui să înceapă prezentarea. Array (0 = primul slide)
slideshow. true, // Boolean: Activați prezentarea automată
slideshowSpeed. 7000, // Integer: Viteza de prezentare în ms
animationSpeed. 600, // Integer: Viteza de animație în ms
initDelay. 0, // Integer: Întârziere de inițializare în ms
randomiza. false, // Boolean: Ordine aleatorie a diapozitivelor

pauseOnAction. true, // Boolean: Întrerupeți prezentarea de diapozitive atunci când interacționați cu elementele de control, foarte recomandat.
pauseOnHover. false, // Boolean: Întrerupeți prezentarea de diapozitive atunci când plasați cursorul pe glisor, apoi reluați atunci când nu mai treceți
useCSS. true, // Boolean: Slider va folosi tranzițiile CSS3 dacă este disponibil
atingeți. true, // Boolean: Permiteți atingeți navigarea pe glisor pe dispozitivele cu atingere
video. false, // Boolean: dacă se folosește un videoclip în cursă, se va împiedica transformările 3D CSS3 pentru a evita problemele grafice

controlNav. true, // Boolean: creați navigare pentru gestionarea fiecărui diapozitiv. Notă: lăsați-le să utilizeze manualControls
directionNav. true, // Boolean: Creați navigare pentru butoanele din spate / înainte (true / false)
prevText. "Previous", // String: Testați butonul "anterior" al direcțieiNav
nextText. "Next", // String: Testați butonul "Next" din direcțiaNav

itemWidth. 0, // Integer: Lățimea modelului Box de elemente individuale ale caruselului, inclusiv margini orizontale și umplutură (padding)
itemMargin. 0, // Integer: Indent între obiectele carusel
minItems. 0, // Integer: Numărul minim de elemente ale caruselului care va fi vizibil. Elementele vor redimensiona fără probleme o valoare inferioară celei specificate
maxItems. 0, // Integer: Numărul maxim de elemente ale caruselului care va fi vizibil. Elementele vor redimensiona fără probleme când această limită este depășită.
muta. 0, // Integer: Numărul elementelor din carusel, care trebuie să treacă prin animație. Dacă este 0, atunci cursorul va muta toate elementele vizibile

începe. funcția ()<>, // Callback: funcție (cursor) - Declanșează când glisorul încarcă primul diapozitiv
înainte. funcția ()<>, // Callback: funcție (cursor) - Declanșator asincron cu fiecare animație a cursorului
după. funcția ()<>, // Callback: funcție (cursor) - Funcționează după fiecare animație a cursorului
end. funcția ()<>, // Callback: funcție (glisor) - declanșează când cursorul ajunge la ultimul element (asincron)
adăugat. funcția ()<>, // Callback: funcție (cursor) - declanșează după adăugarea diapozitivului
eliminat. funcția ()<> // Callback: funcție (cursor) - declanșează după ștergerea diapozitivului

DESCĂRCAȚI Salt la: Navigare, căutare

1,07 Mb Cine a descărcat-o?