# Vízszintes görgetés: pontok, gombok, lapozás és folyamatjelző sáv

> A Vízszintes görgetés widget összekötése a Távoli carousel widgettel: navigációs pontok, Előző/következő gombok, 2 / 4 típusú lapozás és folyamatjelző sáv.

A vízszintes görgetés szakasz nem árulja el a látogatónak, hány dia van, és hol tart. A **Távoli carousel** (Carousel Remote) widget ezt oldja meg: összekötöd a **Vízszintes görgetés** widgettel, és megjeleníthetsz vele navigációs pontokat, **Következő** és **Előző** gombokat, egy lapozásszámlálót vagy egy folyamatjelző sávot. Mindegyik ugyanazzal a kétlépéses összekötéssel indul.

Mindkét widget a Pro bővítmény része.

## Mielőtt elkezdesz

- A **The Plus Addons → Widgets** oldalon kapcsold be a **Horizontal Scroll** és a **Carousel Remote** widgetet is.
- Szükséged van egy sablonra, amelynek felső szintű szakaszai a diák.

## Összekötés a két widget között

### 1. lépés: kapcsolati azonosító a görgetés widgeten

1. Jelöld ki a **Vízszintes görgetés** widgetet, és nyisd meg az **Extra opciók** szakaszt.
2. Az **Egyedi kapcsolati ID** mezőbe írj egy saját nevet. Ez köti össze a két widgetet, ezért egyedinek kell lennie az oldalon.
3. Ha pontokat is használsz, a **Szakasz ID** mezőbe írd be a diák azonosítóit, `|` jellel elválasztva, szóköz nélkül (például `dia1|dia2|dia3|dia4`). A pontok ebből tudják, hova ugorjanak.

![Az Extra opciók szakasz: szakaszazonosítók és egyedi kapcsolati azonosító](./kepek/kepek-media-vizszintes-panel-extra.webp)

*Az Extra opciók szakasz: szakaszazonosítók és egyedi kapcsolati azonosító* (https://minta-bolt.hu/wp-admin/post.php?post=222&action=elementor)

### 2. lépés: a Távoli carousel ráhangolása

1. Add hozzá az oldalhoz a **Távoli carousel** widgetet, és nyisd meg a **Tartalom** szakaszt.
2. Az **Egyedi kapcsolati ID** mezőbe írd ugyanazt az értéket.
3. A **Távoli vezérlés típusa** legyen **Vízszintes görgetés**. Alapértéke **Carousel**.

![A Távoli carousel Tartalom szakasza kitöltött kapcsolati azonosítóval és Vízszintes görgetés típussal](./kepek/kepek-media-vizszintes-panel-tavvezerlo.webp)

*A Távoli carousel Tartalom szakasza kitöltött kapcsolati azonosítóval és Vízszintes görgetés típussal* (https://minta-bolt.hu/wp-admin/post.php?post=228&action=elementor)

A widget szakaszai: **Előző/következő**, **Pontok**, **Folyamatjelző sáv** és **Lapozás**. Mindegyiket külön kapcsolod be, és mindegyik a diák fölött jelenik meg.

### Mindegyikre igaz

- Futás közben a widget kódja a vízszintes görgetés szakaszon belülre kerül, ezért a pontok, gombok, számláló és sáv az egész oldalirányú út alatt a képernyőn maradnak, és nem görögnek el az oldallal.
- Az elrejtett diák (Elementor eszközönkénti elrejtés) a hozzájuk tartozó elemekkel együtt kiesnek.
- Ha a kapcsolat nem működik (a két azonosító eltér, vagy a **Távoli vezérlés típusa** nem **Vízszintes görgetés**), semmi nem mozdul, és az elemek ott jelennek meg, ahová a widgetet tetted.
- A Pro bővítmény nélkül sem a diák, sem a vezérlők nem látszanak.

## Navigációs pontok

1. Nyisd meg a **Pontok** szakaszt, és kapcsold be a **Pontok** kapcsolót.
2. Az **X pozíció** és **Y pozíció** csúszkákkal helyezd el a ponttömböt a diák fölött.
3. Nyisd ki a **Dot 1** sort, és a **Szakasz ID** mezőbe írd az első dia azonosítóját. Ha tooltipet szeretnél, adj **Címkét**, az **Ikon kiválasztása** listában pedig ikont vagy képet.
4. Ismételd a többi sorral, és az **Elem hozzáadása** gombbal vegyél fel annyi pontot, ahány dia van.
5. A sorok alatt az **Elrendezés** a pontokat **Vízszintes** vagy **Függőleges** sorba rendezi, az **Aktív pont stílusa** pedig **Stílus 1** és **Stílus 2** közül választ a látható dia pontjához.

![A Pontok szakasz négy ponttal, az Elrendezés és az Aktív pont stílusa beállítással](./kepek/kepek-media-vizszintes-panel-pontok.webp)

*A Pontok szakasz négy ponttal, az Elrendezés és az Aktív pont stílusa beállítással* (https://minta-bolt.hu/wp-admin/post.php?post=228&action=elementor)

Egy nyitott pontsor a **Címke**, **Ikon kiválasztása** és **Szakasz ID** mezőkkel, valamint a **Normál** és **Aktív** állapot szín- és háttérbeállításaival:

![A Dot 1 sor kinyitva: címke, ikon és szakasz azonosítója](./kepek/kepek-media-vizszintes-panel-pont-sor.webp)

*A Dot 1 sor kinyitva: címke, ikon és szakasz azonosítója* (https://minta-bolt.hu/wp-admin/post.php?post=228&action=elementor)

Az eredmény: a négy pont a görgetés szakasz fölött áll, és a dia haladtával nem mozdul.

![Négy navigációs pont a vízszintes görgetés fölött, a második diával](./kepek/kepek-media-vizszintes-pontok.webp)

*Négy navigációs pont a vízszintes görgetés fölött, a második diával* (https://minta-bolt.hu/km7-hs-pontok/)

- Az a pont az aktív, amelynek **Szakasz ID** értéke a látható diáéval egyezik, és ez görgetés közben frissül.
- A pontra kattintva az oldal úgy görög, hogy az adott dia a bal szélre kerül.
- Ha a görgetés widgeten az **URL-paraméter** be van kapcsolva, a pontra kattintáskor a dia azonosítója a címsorba is bekerül.

**Korlátozások:**

- A pontsorok száma egyezzen a diák számával. Három ponttal és négy diával az utolsó dián egyetlen pont sem világít.
- A **Szakasz ID** mezőt kézzel kell kitölteni, semmi sem kerül be magától.
- Ha a diák szélessége a **Diák szélessége** beállítással eltér, a kattintás nem középre érkezik, mert az ugrást az első dia szélességéből számolja.
- Az aktív pont stílusa két változat közül választható.

## Következő és Előző gomb

Az **Előző/következő** szakaszban a **Következő/előző gomb** kapcsoló már alapból be van kapcsolva, így az összekötés után a gombok megjelennek.

1. Az **X pozíció** és **Y pozíció** csúszkákkal helyezd el a gombokat a diák fölött.
2. Az **1. gomb szövege** a következő, a **2. gomb szövege** az előző gomb felirata.
3. Az **Ikon stílusa** **Nincs**, **Stílus 1** vagy **Egyéni** (saját képek). Az **Igazítás** a szöveg és az ikon egymáshoz viszonyított helyét adja meg.

![Az Előző/következő szakasz a gombok szövegével és az ikonstílussal](./kepek/kepek-media-vizszintes-panel-gombok.webp)

*Az Előző/következő szakasz a gombok szövegével és az ikonstílussal* (https://minta-bolt.hu/wp-admin/post.php?post=229&action=elementor)

![Az Előző és Következő gomb a vízszintes görgetés fölött, a második diával](./kepek/kepek-media-vizszintes-gombok.webp)

*Az Előző és Következő gomb a vízszintes görgetés fölött, a második diával* (https://minta-bolt.hu/km7-hs-gombok/)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Következő/előző gomb** | Megjeleníti a gombpárt. | Be |
| **X pozíció** / **Y pozíció** | A gombok helye a diák fölött. | 10 |
| **1. gomb szövege** | A következő gomb felirata. | Következő |
| **2. gomb szövege** | Az előző gomb felirata. | Előző |
| **Igazítás** | Balra, középre vagy jobbra a gombon belül. | Balra |
| **Ikon stílusa** | **Nincs**, beépített **Stílus 1** nyilak vagy **Egyéni** képek. | **Stílus 1** |

- Egy kattintás pontosan egy diát léptet, az oldal finoman odagörög.
- A gombok az elején és a végén megállnak: az első dia előtt és az utolsó után nincs hova menni. Nem szürkülnek ki, egyszerűen nem csinálnak semmit.
- Ha a görgetés widgeten az **RTL-kompatibilitás** be van kapcsolva, a két gomb szerepe felcserélődik. Ha így a felirat nem illik, cseréld meg az **1. gomb szövegét** és a **2. gomb szövegét**.
- Csak szavak nélküli nyilakat úgy kapsz, ha törlöd mindkét szöveget, és az **Ikon stílusa** **Stílus 1** marad.
- Egy widgetből egy gombpár jön. Nem tehetsz a következőt és az előzőt az oldal két külön pontjára.
- Eltérő diaszélességeknél a kattintás itt is eltérhet a középtől.

## Lapozás (2 / 4)

A **Lapozás** szakasz a számlálót mutatja a „jelenlegi dia / összes dia” formában.

1. Nyisd meg a **Lapozás** szakaszt, és kapcsold be a **Lapozás** kapcsolót.
2. Az **Y pozíció** alatt az **Eltolás** fel-le, az **X pozíció** alatt a **Jobb oldali eltolás** balra-jobbra mozgatja a számlálót.

![A Lapozás szakasz bekapcsolva, eltolásokkal](./kepek/kepek-media-vizszintes-panel-szamlalo.webp)

*A Lapozás szakasz bekapcsolva, eltolásokkal* (https://minta-bolt.hu/wp-admin/post.php?post=231&action=elementor)

![A 2 / 4 számláló a vízszintes görgetés fölött](./kepek/kepek-media-vizszintes-szamlalo.webp)

*A 2 / 4 számláló a vízszintes görgetés fölött* (https://minta-bolt.hu/km7-hs-szamlalo/)

A **Stílus** fülön a **Lapozás** szakasz **Elválasztó elrendezése** listája **Nincs**, **Alapértelmezett** (perjel) és **Egyéni** lehet, utóbbinál az **Elválasztó ikon** választható. Ugyanitt külön színt kap az aktuális szám, az elválasztó és az összeg.

- Az összeg a diasablon felső szintű szakaszainak száma az oldalon, sehol nem kell beírnod.
- A **Rögzített szakasz** révén hozzáadott sáv nem számít diának.
- Az elrejtett diák nem számítanak az összegbe az adott eszközön.
- A számláló csak jelző: nem kattintható, és a szöveg szerkezete (szám, elválasztó, szám) rögzített.
- Csak a felső szintű szakaszokat számolja, a belső szakaszok a dia részei.

## Folyamatjelző sáv

1. Nyisd meg a **Folyamatjelző sáv** szakaszt, és kapcsold be a **Folyamatjelző sáv** kapcsolót.
2. Az **Elrendezés** **Vízszintes** vagy **Függőleges**.
3. Az **Eltolás** csúszkával mozgasd a helyére.

![A Folyamatjelző sáv szakasz bekapcsolva, vízszintes elrendezéssel](./kepek/kepek-media-vizszintes-panel-folyamatjelzo.webp)

*A Folyamatjelző sáv szakasz bekapcsolva, vízszintes elrendezéssel* (https://minta-bolt.hu/wp-admin/post.php?post=230&action=elementor)

![A vízszintes görgetés tetején a folyamatjelző sáv a második diánál](./kepek/kepek-media-vizszintes-folyamatjelzo.webp)

*A vízszintes görgetés tetején a folyamatjelző sáv a második diánál* (https://minta-bolt.hu/km7-hs-folyamatjelzo/)

A **Stílus** fül **Folyamatjelző sáv** szakaszában a **Stílusok** lista három változatot ad, ugyanitt a sáv szélessége, magassága, színei és sarokkerekítése is állítható:

| Stílus | Mit kapsz |
|---|---|
| **Stílus 1** | Egyszerű sáv, amely megtelik. Szám nincs. |
| **Stílus 2** | Sáv és egy kis buborék a százalékkal. |
| **Stílus 3** | Sáv, amelyre a százalék rá van írva. |

- A sáv a teljes vízszintes úton 0-tól 100 százalékig tölt, nem diánként lépcsőzik.
- A **Vízszintes** elrendezés a szélességet, a **Függőleges** a magasságot tölti.
- A százalék lefelé kerekedik, ezért az út végéig 99 százalékot mutat.
- A sáv a görgetés helyzetét követi, visszagörgetéskor kiürül.
- Csak jelző: nem húzható és nem kattintható. Dia sorszámot a **Lapozás** ad.
- Függőleges elrendezésnél a sáv a magasságot tölti, ezért add meg a tároló magasságát a **Stílus** fülön, különben üresnek látszik.

## Hibaelhárítás

### A pontok, gombok, számláló vagy sáv nem csinál semmit

A két **Egyedi kapcsolati ID** értékének pontosan egyeznie kell, és a **Távoli vezérlés típusa** legyen **Vízszintes görgetés**.

### A pontra kattintva nem történik semmi

A pont **Szakasz ID** értéke nem egyezik a görgetés widget **Szakasz ID** listájának egyik elemével sem. Nézd meg a gépelési hibát és a `|` körüli szóközöket.

### Az utolsó diához nem tartozik világító pont

Vegyél fel még egy pontsort az **Elem hozzáadása** gombbal, hogy a számuk egyezzen a diák számával.

### A vezérlők együtt görögnek az oldallal

Csak akkor kerülnek be a görgetés szakaszba, ha a kapcsolat működik. Javítsd az összekötést, és a diákkal együtt mozognak majd.

### A „Következő” visszafelé léptet

A görgetés widgeten bekapcsoltad az **RTL-kompatibilitást**, ami felcseréli a gombokat.

### Rossz a lapozás összege

A kiválasztott sablon felső szintű szakaszait számolja. Nézd meg, nincs-e felesleges üres szakasz, vagy olyan, amelyet az eszközön elrejtettél.

### Nem látszik százalék a sávon

A **Stílus 1** nem mutat számot. A **Stílus** fülön válts **Stílus 2**-re vagy **Stílus 3**-ra.