# Vízszintes görgetés widget: áttekintés és az összes beállítás

> A Vízszintes görgetés widget bekapcsolása, a sablon kiválasztása, a Görgetési opciók és az Extra opciók beállításai, valamint a kisebb képernyőkre vonatkozó kikapcsolás.

A **Vízszintes görgetés** widget egy Elementor-sablonból diák sorát csinálja, amely oldalirányban halad, miközben a látogató lefelé görget. A kiválasztott sablon minden felső szintű szakasza egy dia. Ez a fejezet a widget összes beállítását végigveszi. A görgetés közbeni effektről, a diára mutató hivatkozásról és a diánként váltakozó háttérről a [Vízszintes görgetés: átmeneti effekt, hivatkozás egy diára és háttérkép váltása](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-vizszintes-gorgetes/) fejezet szól.

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

## Mielőtt elkezdesz

- A widgetet a **The Plus Addons → Widgets** oldalon kapcsold be (**Horizontal Scroll**). Ha a navigációs elemeket (pontok, gombok, lapozás, folyamatjelző sáv) is használni szeretnéd, a **Carousel Remote** widgetet is kapcsold be.
- A Pro bővítmény nélkül a widget eltűnik a szerkesztőből, és az oldal, amely már használja, üresen marad a widget helyén. Figyelmeztetés nincs.
- Szükséged van egy Elementor-könyvtári sablonra, amelynek felső szintű szakaszai a diák.
- Tedd a widgetet teljes szélességű tárolóba, belső margó nélkül. A diák méretét a nézetablak szélessége adja, ezért az oldalsó belső margó miatt a következő dia egy sávja bekukucskál.

## A tartalom beállítása

Húzd az oldalra a widgetet, és nyisd meg a **Tartalom** szakaszt.

![A Vízszintes görgetés widget Tartalom szakasza a kiválasztott sablonnal](./kepek/kepek-media-vizszintes-panel-tartalom.webp)

*A Vízszintes görgetés widget Tartalom szakasza a kiválasztott sablonnal* (https://minta-bolt.hu/wp-admin/post.php?post=232&action=elementor)

1. A **Sablonminta kiválasztása** listából válaszd ki a diák sablonját. A lista az Elementor-könyvtár elemeit mutatja.
2. Ha még nincs sablonod, kattints a **Create Template** gombra: a szerkesztő felugró ablakban nyílik meg, így az oldal elhagyása nélkül megépítheted a diákat.
3. Később az **Edit Template** gombbal térhetsz vissza a sablonhoz.
4. A szakasz tetején az **Import Presets** kész elrendezést hoz be.

A sablon szakaszaiból lesznek a diák. Ha teljes képernyős diákat szeretnél, adj a szakaszoknak 100vh minimális magasságot. Ha nincs sablon kiválasztva, az oldalon a „No Template Selected! Please Select Template To Get The Desired Result.” üzenet látszik.

## Görgetési opciók

![A Görgetési opciók szakasz az összes kapcsolóval](./kepek/kepek-media-vizszintes-panel-gorgetes.webp)

*A Görgetési opciók szakasz az összes kapcsolóval* (https://minta-bolt.hu/wp-admin/post.php?post=221&action=elementor)

A képen a beállítások a táblázat sorrendjében követik egymást.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Görgetés közbeni csúsztatási effektusok** | A mozgó csíkra átalakítást tesz: **Dőlés**, **Méretezés** vagy **Ugrálás**. Nem sokkal a görgetés megállta után visszaáll. | **Normál** |
| **Dőlés értéke** / **Méretarány értéke** | Az átalakítás erőssége. | 3 és 0,9 |
| **Háttérátmenet** | Minden diának saját háttérszínt vagy háttérképet ad a sablon mögé. | Ki |
| **Háttérátmenet időtartama** | Mennyi idő alatt úszik át egyik háttér a másikba (másodperc). | 0,7 |
| **Rögzített szakasz** | Egy második sablont rögzít a diák fölé a teljes vízszintes szakaszra. | Ki |
| **Átlátszatlanság-alapú görgetés** | A még előttünk álló diákat elhalványítja, az **Érték** adja meg, mennyire. | Ki, érték 0,5 |
| **Teljes diás görgetés** | A csík mindig egy egész dián áll meg. | Ki |
| **RTL-kompatibilitás** | A csík jobbról balra halad. | Ki |
| **Görgetési sebesség** | Mennyi oldalgörgetést foglal le a teljes vízszintes szakasz. | 4 |

### A Görgetési sebesség távolság, nem sebesség

A vízszintes szakasz addig marad rögzítve, ameddig a nézetablak szélességének és a **Görgetési sebesség** értékének szorzata kitesz. Egy 1440 pixeles képernyőn négy diával a rögzített terület magassága 6660 px volt az alapértéken (4), 2340 px az 1-es és 15 300 px a 10-es értéknél. A diák mindig ugyanazt a távolságot teszik meg oldalra, a nagyobb szám ezt több görgetésre osztja szét, ezért a csík lassabban mozog. Ha túl lassúnak érzed, csökkentsd az értéket.

## Extra opciók

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

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

Az **Egyedi kapcsolati ID** és a **Szakasz ID** a Carousel Remote összekötéséhez kell.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Távolság az utolsó dia után** | Plusz oldalirányú mozgás, miután az utolsó dia a helyére került. Az oldalt nem teszi magasabbá. | 0 |
| **Diák szélessége** | A diák szélessége nézetablak-szélességben, `|` jellel elválasztva, szóköz nélkül. Egyetlen érték minden diára érvényes. | 100 |
| **Szakasz ID** | Azonosító minden diához, `|` jellel elválasztva, szóköz nélkül. Hivatkozásokhoz és a Carousel Remote pontjaihoz kell. | üres |
| **URL-paraméter** | A `#azonosito` végű címmel megnyitott oldal azon a diánál nyílik. | Ki |
| **Egyedi kapcsolati ID** | Összeköti a widgetet egy Carousel Remote widgettel. | üres |
| **Reszponzív láthatóság** | A **Szélesség** alatt a diák egymás alá kerülnek, és az oldal egyszerűen görgethető. | Ki, szélesség 300 |

A **Diák szélessége** diánként egy értéket vár. A `100|50|100|150` egy 1440 pixeles képernyőn 1440, 720, 1440 és 2160 pixeles diákat adott.

### Vízszintes görgetés kikapcsolása kis képernyőn

Telefonon kényelmetlen az oldalirányú görgetés. Kapcsold be a **Reszponzív láthatóság** kapcsolót, és a **Szélesség** mezőben add meg azt a képernyőszélességet, amely alatt vagy amelynél a hatás megszűnik. Egy 390 pixeles telefonképernyőn, 1024-es szélességi értéknél a diák egymás alá kerültek, és az oldal normálisan görgethető volt.

Az érték az eszköz képernyőjének szélességéhez viszonyít, nem a böngészőablakéhoz. Egy asztali böngészőablak összehúzása ezért nem kapcsolja ki a hatást, csak egy valóban kis képernyős eszköz.

## Hogyan viselkedik

- A kiválasztott sablon minden felső szintű szakasza egy dia, a sablon sorrendjében.
- A csík mozgás közben rögzített, az oldal magassága a **Görgetési sebesség** minden egységével egy nézetablak-szélességgel nő.
- Az Elementor **Elrejtés asztali nézetben / tableten / mobilon** beállításával elrejtett dia kiesik a csíkból az adott eszközön. Vele együtt kiesik a hozzá tartozó háttérsor és a Carousel Remote pontja is.
- A widget négy plusz szkriptet tölt be, csak azokon az oldalakon, ahol használod: GSAP, ScrollToPlugin, ScrollTrigger és a saját kezelőjét.

## Korlátozások

- A **Távolság az utolsó dia után** az utolsó diát a bal szélen túlra húzza, és ugyanekkora rés nyílik jobb oldalon.
- Az egyetlen szakaszból álló sablon is lefoglalja a teljes rögzített szakaszt, vagyis hosszan görgetsz úgy, hogy semmi nem mozdul.
- A **Szakasz ID** nem vágja le a szóközöket. Ha kevesebb azonosítót adsz meg, mint ahány dia van, a maradék diák szó szerint `undefined` azonosítót kapnak.

## Hibaelhárítás

### Az oldal csak lefelé görög, oldalra semmi sem mozdul

Ellenőrizd, hogy van-e kiválasztott sablon, és hogy több felső szintű szakaszból áll-e. Egyetlen szakasz nem ad mit végiggörgetni.

### A következő dia egy sávja mindig látszik

A tároló, amelyben a widget van, legyen teljes szélességű, és töröld a belső margóját.

### Telefonon is oldalra görget

Kapcsold be a **Reszponzív láthatóság** kapcsolót, és a **Szélesség** értéke legyen nagyobb a telefon képernyőszélességénél. Ne feledd: a képernyőhöz viszonyít, nem a böngészőablakhoz.

### A görgetés túl lassú

Csökkentsd a **Görgetési sebesség** értékét.