Szerkesztése jquery csúszka

Az alábbiakban néhány általános trendeket és módszereket, hogy a fejlesztők használják:

  • Multi-level csúszkák - a legújabb a csúszkák parallaxis hatást.
  • Sliders hatásokkal Fade In / Out - ezek csúszkák nincs ellenőrzés. Tartalom eltűnik egyesével.
  • Rotator bannerek - csúszkák futó körpályán.

Vannak más csúszkákat. Minden típusú csúszka alkalmas egy adott célra. Ezért a tervezők nagyon fontos, hogy válasszon a csúszkát, amely alkalmas egy adott feladat is. Sliders nagy méretű lehet használni megjeleníthető termék vagy projektek, csúszka kisebb méretű, például, hogy megjelenjen a legnépszerűbb cikkeket a blog. Akkor beszélünk egy kicsit a kihívások fejlesztők szembe, ha tartalmazza a két csúszka ugyanazon az oldalon.

A hátrányok segítségével több JQuery csúszkák

Ahogy azt már fent különféle csúszkák mutatja a különböző hatásokat, és fel lehet használni a különböző elrendezések. Sok hátránya, hogy a több csúszkák ugyanazon az oldalon.

  • Minden csúszka sok szkriptek és CSS fájlok. Jelentős számú szkriptek és CSS fájlok, viszont lelassul a letöltési idő a webhelyen, amely megjelenik a SEO.
  • A különböző csúszkák előírhatja különböző változatai jQuery. Ezért JQuery-fájlokat fogják másolni.
  • annak lehetőségét, hogy a konfliktus a kódokat más csúszkákat.

Figyelembe véve a fenti pontok, célszerű használni a csúszka egy oldalon. De ez nem kötelező. Ön is létrehozhat különböző minták segítségével egy csúszka. Ehhez csak meg kell választani egy rugalmas csúszka, bizonyos készségek dolgozni jQuery és a CSS, hogy állítsa fel. Ebben a leckében úgy Rhino Slider, mert ez az egyik rugalmas elérhető csúszkák magukat.

Bevezetés a Rhino csúszka

Rhino Slider kettős JQuery csúszka MIT licenc alatt. További információ itt olvashatunk. Az alábbi képen egy Rhino csúszka.

Arról, hogy milyen ez a csúszka lehet használni, akkor olvassa el a cikk „Hogyan hozzunk létre egy űrlapot RhinoSlider». Ebben a cikkben lesz képes látni, hogyan működik. A mai leckében megnézzük, hogyan lehet létrehozni elrendezések a különböző funkciójú és egy csúszka.

Tervezése egyedi navigációs a csúszka

Navigáció, talán az egyik legfontosabb része a csúszkát. Még ha létrehoz egy csúszka automata időintervallum képfrissítés előnyös ez még a vezetés ellenőrzése felhasználók. Általában a Következő és az Előző gombok segítségével a csúszkák nagyon népszerűek. Rhino csúszka, mellyel a bemutató tartalmaz egy számozott navigáció, ami emlékeztet a lapszámozás.

Mi lehet elég könnyen változtatni a megjelenését a csúszkát. Ebben a bemutató, akkor hogyan lehet megváltoztatni az alapvető navigációs stílusok. Vágjunk bele.

Meghatározása a kezelőgombok

Rhino Slider három navigációs gombok - következő előző dia és tördelését. Ezek az elemek külön CSS osztályokat, hogy így azonosítani lehet elég könnyen.

Előző dia - rhino-dok

Következő dia - orr-next

Most, egy gyors pillantást az alábbi képre, hogy kap egy ötletet, hogyan fogunk változtatni a design.

Nézzük meg az alábbi képet, hogy hogyan fogjuk változtatni a design.

1. lépés - Management Előző / Következő

Mint látható, az elrendezés a gombok / NEXT megváltozott. Most állni a középső helyett az alsó és elhelyezni a fekete háttér. Nézzük meg a változás stílusok:

létrehozása megtekintett

Ez a rész egy kicsit trükkös. Itt nézd meg, hogyan lehet egy doboz prevshkami képek kerülnek helyett számozás. Fogjuk használni kombinációját CSS és JQuery.

Miután alkalmazni CSS stílusokat, a csúszka lesz a következő.

Most már láthatja a kép előnézete, amint azt az alábbi ábra mutatja.

Slider függőleges megtekintett

A következők a változások, amelyeket meg kell tenni a stílust változtatni a design.

A csúszkákkal ugyanazon az oldalon

Az előző részekben már megváltozott a funkcionalitást a csúszka segítségével ugyanazt a csúszka, változtassa meg a CSS stílusokat az eredeti Rhino csúszka. De amikor ugyanazon az oldalon, meg kell, hogy több csúszkák, nem tudunk változtatni a stílusát, mint korábban. Ahhoz, hogy meghatározzuk a különböző stílusok azonos osztályok és elemek szükségünk van egy alternatív módszert.

Először is, fel kell ismernünk, a Rhino csúszka külön meghatározva a különböző azonosító.

    Az alábbi kód JQuery hozzá egy osztályt a navigációs