Imagine carusel bufniță bufniță 2

În acest articol vom analiza configurarea și instalarea unei noi versiuni a sliderului de adaptare Owl Carousel 2 care rulează pe toate dispozitivele.

Noua versiune a glisorului include aproximativ 60 de opțiuni pentru reglarea caruselului, suport complet pentru toate dispozitivele mobile, și anume o apăsare simplă cu atingerea unui deget.







Owl Carousel 2 foloseste accelerare hardware CSS3 Translate3d suportat de toate browserele moderne și au, de asemenea, suport pentru browsere mai vechi CSS2.

Acum Owl Carousel 2 acceptă pluginuri pentru a extinde funcționalitatea. Datorită acestei caracteristici, puteți exclude pluginurile inutile din plug-in sau adăugați cele necesare.

Owl Carousel 2 slider imagine - instalare, configurare, descriere

Indiferent dacă sunteți un începător sau un utilizator avansat, începeți să lucrați cu caruselul Owl Carousel 2 este ușor!

Owl Carousel 2 nu este compatibilă cu prima versiune a pluginului. Ideea și principiul caruselului au rămas aceleași și au multe în comun cu Owl Carousel 1, dar codul principal a fost rescris de la zero și dezvoltatorul este foarte mândru de toate noile caracteristici.

Owl Carousel 2 a fost testat cu succes în următoarele browsere și pe dispozitivele mobile:

Google Chrome
Mozilla Firefox
operă
Microsoft IE7 / 8/10/11
Apple iPad Safari
Apple iPod4 Safari
Nexus 7 Chrome
Samsung Galaxy S4
Nokia 8s Windows8
bibliotecă

Ultima versiune a plugin-ului poate fi descărcată de pe link-ul:

Owl Carousel 2.0.0-beta.2.4
Carousel de owl 2.2.1
Versiune redactată și redusă. Fișierele plug-in, imaginile și stilurile CSS sunt incluse.

Instalarea cursorului de imagine pe site

Conectați fișierele de bibliotecă jQuery și fișierele plugin Owl Carousel. Versiunea minimă a bibliotecii jQuery este de 1,7 sau mai mare, această versiune fiind inclusă în arhivă.

Instalarea codului HTML

Nu este necesar un marcaj HTML special pentru a executa cursorul. Tot ce trebuie să faceți este să înfășurați blocurile într-o etichetă div (bufnița funcționează cu orice tip de elemente) în interiorul containerului

. Clasa "owl-carousel" este obligatorie, altfel stilurile din fișierul owl.carousel.css vor fi atribuite incorect.

Sunați pluginul

Inițializăm funcțiile pluginului, iar caruselul pentru imagini este gata.

  • Glisor de imagine adaptat Glisorul cu carusel de ouă. Are un număr destul de mare de setări, ușor de instalat și de utilizat.







    Parametrii de bază ai Caruselului Owl 2

    În acest exemplu, am setat următoarele opțiuni: buclă: true (derulare infinită), margine: 10 (liniuță pe toate laturile) și nav: true (butoane de navigare). Pluginul funcționează cu toate tipurile de elemente DOM. Toate exemplele folosesc un element

    .
    , Dar puteți folosi un alt element div / span / a / img.

    Trageți și fixați

    fără sfârșit

    Lățimea automată

    Parametrul de răspuns vă permite să setați numărul și dimensiunea articolelor în pagină, în funcție de lățimea ferestrei browserului. Încercați să modificați lățimea browserului pentru a vedea ce se întâmplă cu elementele și butoanele de navigare.

    Ce trebuie să știți despre cursorul adaptabil Caruselul Owl 2

    • Lățimea ferestrei browserului este setată numai în formă digitală (ca în exemplu): '480'.
    • Glisorul caruselului Owl are suport încorporat pentru sortarea parametrilor lățimii browserului, dar este mai bine să specificați lățimea în ordine ascendentă de la cel mai mic ecran la cel mai larg.
    • Valorile din opțiunea receptivă au întotdeauna prioritate față de parametrii de afișare setați anterior.
    • Pentru diferite dispozitive sau rezoluții ale ecranului, puteți specifica orice fel de afișare a cursorului, puteți activa sau dezactiva navigarea etc.
    • În mod prestabilit, opțiunea receptivă este activată, iar glisorul de elemente este întins la lățimea completă a elementului părinte (chiar dacă interogările media CSS3 nu sunt acceptate în browserele IE7 / IE8 etc.).
    • Dacă trebuie să dezactivați afișajul glisant adaptiv, setați următoarea valoare a opțiunii responsive: false.

    Opțiuni pentru parametrul de răspuns:

    responsiveClass

    Parametru opțional. Adăugă lățimea ferestrei de tip "owl-reponsive-" + "la elementul principal.

    responsiveBaseElement

    În mod implicit, toate declanșatoarele de evenimente care reacționează sunt lățimea ferestrei. Această opțiune vă oferă opțiunea de a o schimba în propria clasă / id, de exemplu, responsiveBaseElement: "MyCustomWrapper"

    responsiveRefreshRate

    Actualizați viteza. Aceasta este o întârziere de 200 ms după ce ați modificat lățimea ferestrei browserului și ați redimensionat elementele (recalculând lățimea elementului / clonarea elementelor etc.) Rata implicită de actualizare este de 200 ms. Cred că aceasta este viteza cea mai optimă, dar o puteți schimba pentru a se potrivi nevoilor dvs.

    Nu toate setările plug-in pot fi utilizate într-o formă adaptivă, mai jos este o listă cu opțiunile disponibile.

    Lista opțiunilor pentru parametrul receptiv

    • articole
    • buclă
    • centru
    • mouseDrag
    • touchDrag
    • pullDrag
    • freeDrag
    • margine
    • stagePadding
    • îmbina
    • mergeFit
    • autoWidth
    • autoHeight
    • nav
    • navRewind
    • slideBy
    • puncte
    • dotsEach
    • autoplay
    • autoplayTimeout
    • smartSpeed
    • fluidSpeed
    • autoplaySpeed
    • navSpeed
    • dotsSpeed
    • dragEndSpeed
    • responsiveRefreshRate
    • animateOut
    • animateIn
    • fallbackEasing
    • callback
    • info

    Parametrii activi numai atunci când plug-in-ul este încărcat

    • startPosition
    • URLhashListener
    • navText
    • dotData
    • lazyLoad
    • lazyContent
    • autoplayHoverPause
    • responsiveBaseElement
    • responsiveClass
    • video
    • videoHeight
    • videoWidth
    • nestedItemSelector
    • itemElement
    • stageElement
    • navContainer
    • dotsContainer






    Pagina anterioară

    Pagina următoare

    Trimiteți-le prietenilor: