Image Slider bagoly karusszel 2

előző ◈ a következő

Ebben a cikkben megvizsgáljuk az adaptív képcsúszka Owl Carousel 2 új verziójának telepítését és telepítését minden eszközön.

A csúszka új verziója kb. 60 opciót tartalmaz a karusszel történő hangoláshoz, teljes körű támogatást nyújt minden mobileszköz számára, nevezetesen egy kényelmes, egyujjas érintés.

Az Owl Carousel 2 az összes modern böngésző által támogatott CSS3 Translate3d hardveres gyorsítást használja, valamint támogatja a régi CSS2 böngészőket.

Most az Owl Carousel 2 támogatja a plug-ineket a funkciók bővítéséhez. Ennek a funkciónak köszönhetően kizárhatja a felesleges modulokat a plug-inből, vagy hozzáadhatja a szükséges modult.

Owl Carousel 2 kép csúszka - telepítés, konfiguráció, leírás

Akár kezdő, akár fejlett felhasználó, könnyű kezelni az Owl Carousel 2 körhinta használatát!

Az Owl Carousel 2 nem kompatibilis a plugin első verziójával. Az ötlet és az elv a karusszel ugyanaz marad, és ez már sok köze Owl Carousel 1, de az alapvető kódot újraírták az alapoktól kezdve és a fejlesztő nagyon büszke az új funkciókkal.

Az Owl Carousel 2 sikeresen tesztelt a következő böngészőkben és mobileszközökön:

Google Chrome
Mozilla Firefox
opera
Microsoft IE7 / 8/10/11
Apple iPad Safari
Apple iPod4 Safari
Nexus 7 Chrome
Samsung Galaxy S4
Nokia 8s Windows8
könyvtár

A plugin legújabb verziója letölthető a linkről:

Owl Carousel 2.0.0-béta.2.4
Owl Carousel 2.2.1
Összeállított és csökkentett verzió. A plug-in fájlok, képek és CSS-stílusok szerepelnek.

A kép csúszka telepítése a webhelyen

Csatlakoztassa a jQuery könyvtárat és az Owl Carousel bővítményfájlokat. A jQuery könyvtár minimális verziója 1.7 vagy újabb, ez a verzió az archívumban található.

HTML kód telepítése

A csúszka futtatásához nincs külön HTML jelölés. Mindössze annyit kell tennie, hogy a blokkokat egy div tagben (a bagoly mindenféle tétellel működik) a konténer belsejében

. Az "owl-carousel" osztály kötelező, különben a fájlok owl.carousel.css fájljai helytelenül kerülnek hozzárendelésre.

Hívja a plugint

Inicializáljuk a plugin funkciókat, és a körhinta a képek készen áll.

  • Adaptív képcsúszka Owl Carousel Slider. Rengeteg beállítás van, könnyen telepíthető és működtethető.

    Az Owl Carousel alapvető paraméterei 2

    Ebben a példában a következő beállításokat állíthatom be: hurok: true (végtelen görgetés), margó: 10 (minden oldalról behúzva) és nav: true (navigációs gombok). A plugin mindenféle DOM elemet használ. Minden példa egy elemet használ

    .
    , De használhatsz más div / span / a / img elemeket.

    Húzza és dobja

    végtelen

    Automatikus szélesség

    A válaszadó paraméter segítségével beállíthatja az oldalak számát és méretét a böngésző ablakának szélességétől függően. Próbálja meg módosítani a böngésző szélességét, hogy megnézze, mi történik az elemekkel és a navigációs gombokkal.

    Mit kell tudni az adaptív csúszka Owl Carousel 2-ről?

    • A böngésző ablakának szélessége csak digitális formában van beállítva (mint a példában): '480'.
    • Az Owl Carousel csúszka beépített támogatást nyújt a böngésző szélességi paramétereinek szétválogatásához, de jobb a szélesség növekvő sorrendben történő meghatározása a legkisebb képernyőről a legszélesebbre.
    • A reagáló opcióban lévő értékek mindig az előzetesen beállított paraméterek fölé kerülnek.
    • Különböző eszközökhöz vagy képernyőfelbontásokhoz megadhatja a csúszka bármilyen megjelenítését, engedélyezheti vagy letilthatja a navigációt stb.
    • Default reagáló engedélyezve van, és csúszó elemek kiterjeszti a teljes szélességében a szülő elem (akkor is, ha nem támogatott CSS3 médialekérdezéseket böngészők IE7 / IE8 és m. P.).
    • Ha ki kell kapcsolnia az adaptív csúszka kijelzőt, állítsa be a válaszadó: hamis érték következő értékét.

    A válaszadó paraméter beállításai:

    responsiveClass

    Opcionális paraméter. Hozzáadja az osztály "owl-reponsive-" + "ablak szélességét" a fő elemhez.

    responsiveBaseElement

    Alapértelmezés szerint minden reagáló esemény kiváltója az ablak szélessége. Ez az opció megadja azt a lehetőséget, hogy megváltoztassa a saját osztályodra / azonosítójára, például responseiveBaseElement: "MyCustomWrapper"

    responsiveRefreshRate

    Frissítési sebesség. Ez a késleltetés 200 ms elteltével megváltoztatta a böngésző ablakának szélességét és az elemek átméretezését (az elemek szélességének / klónozásának újratervezése stb.). Az alapértelmezett frissítési sebesség 200 ms. Azt hiszem, ez a legoptimálisabb sebesség, de megváltoztathatja azt, hogy megfeleljen az Ön igényeinek.

    Nem minden plug-in beállítás alkalmazható adaptív formában, az alábbiakban felsoroljuk az elérhető opciók listáját.

    A választható paraméterek listája

    • példány
    • hurok
    • központ
    • MouseDrag
    • touchDrag
    • pullDrag
    • freeDrag
    • margó
    • stagePadding
    • összeolvad
    • mergeFit
    • autoWidth
    • autoHeight
    • nav
    • navRewind
    • slideBy
    • pontok
    • dotsEach
    • robotpilota
    • autoplayTimeout
    • smartSpeed
    • fluidSpeed
    • autoplaySpeed
    • navSpeed
    • dotsSpeed
    • dragEndSpeed
    • responsiveRefreshRate
    • animateOut
    • animateIn
    • fallbackEasing
    • visszahívások
    • info

    A paraméterek csak a beépülő modul betöltésekor aktiválódnak

    • startPosition
    • URLhashListener
    • navText
    • dotData
    • lazyLoad
    • lazyContent
    • autoplayHoverPause
    • responsiveBaseElement
    • responsiveClass
    • videó
    • videoHeight
    • videoWidth
    • nestedItemSelector
    • itemElement
    • stageElement
    • navContainer
    • dotsContainer
    • előző ◈ a következő