# Előtte-Utána csúszka widget

> Két kép összehasonlítása csúszkával: képforrás, címkék, tájolás, mozgatás rámutatáskor, fogantyú.

Az **Előtte-Utána csúszka** widget ugyanannak a képnek két változatát (például felújítás előtt és után) mutatja egy mozgatható csúszkával. A csúszka minden része testre szabható, és egy oldalon több csúszka is lehet.

Főbb tudnivalók:

- a kép a médiatárból vagy külső webcímről is jöhet;
- a képekre egyéni címke írható;
- a csúszka vízszintesen vagy függőlegesen mozoghat;
- a csúszkát húzni kell, vagy beállítható, hogy rámutatásra mozogjon;
- a fogantyú teljesen testre szabható.

## Képek és címkék

A **Tartalom** fül **Előtte** és **Utána** szakaszában adod meg a két képet. Mindkét képnél választhatsz:

- a kép forrását: **Média** (a médiatárból) vagy **URL** (külső webcím);
- a képfelbontást;
- a kép címkéjét, amely a képen jelenik meg.

![Az Utána szakasz a képforrással és a címkével](./kepek/tartalom-elotte-utana-utana.webp)

*Az Utána szakasz a képforrással és a címkével* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

A képen az **Utána látható kép forrása**, az **Utána látható fotó**, a **Képfelbontás** és az **Az utána állapot címkéje** mezők látszanak.

A címkék kinézetét a **Stílus** fül **Előtte/utána címke** szakaszában állíthatod.

## Tájolás

A **Tájolás** szakasz a csúszka irányát és viselkedését adja meg.

![A Tájolás szakasz](./kepek/tartalom-elotte-utana-tajolas.webp)

*A Tájolás szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Előtte-Utána csúszka tájolása** | A csúszka vízszintesen vagy függőlegesen mozog a képen. |
| **Igazítás** | A képek igazítása balra, középre vagy jobbra. |
| **Mozgatás rámutatáskor** | Alapból a csúszkát meg kell fogni és húzni. Bekapcsolva elég az egérrel ráhúzni. |
| **Fedvény színe** | A kép fölé kerülő fedvény színe. |

## Összehasonlító fogantyú

Az **Összehasonlító fogantyú** szakasz a csúszka fogantyúját alakítja.

![Az Összehasonlító fogantyú szakasz](./kepek/tartalom-elotte-utana-fogantyu.webp)

*Az Összehasonlító fogantyú szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Fogantyú kezdeti eltolása** | Hol áll a csúszka az oldal betöltésekor. |
| **Fogantyú színe** | A fogantyú színe. |
| **Fogantyú vastagsága** | A csúszkavonal vastagsága. |
| **Kör szélessége**, **Kör sugara** | A fogantyú közepén lévő kör szegélye és mérete. |
| **Háromszög mérete** | A kör két oldalán lévő nyilak mérete. |