# Diavetítés (Beágyazható elemekkel) elem

> A beágyazható Diavetítés elem: a diák húzással épülnek, Splide-alapú beállításokkal, automatikus lejátszással, nyilakkal és lapozással.

A **Diavetítés (Beágyazható elemekkel)** elemben a diákat a szerkesztőben húzással és ejtéssel építed fel: a dia bármilyen elemet tartalmazhat. A megjelenítést a Splide könyvtár végzi.

![A beágyazható Diavetítés elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-6-slider-nested.webp)

*A beágyazható Diavetítés elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen az **Elem hozzáadása** gomb és a **Beállítások**, **Dia**, **Nyilak** és **Lapozás** csoport látszik.

A diákat az **Elem hozzáadása** gombbal, vagy a **Szerkezet** panelen húzással hozod létre.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Beállítások típusa | `default` (alapbeállítások) vagy `custom` (saját JSON-beállítások). | `default` |
| Egyéni beállítások | A Splide JSON-konfigurációja. Csak `custom` típusnál látszik. | Nincs |
| Típus | A diavetítés működése: `loop` (végtelen), `slide` (csúszás), `fade` (áttűnés). | `loop` |
| Irány | `left to right`, `right to left` vagy `vertical`. Töréspontonként állítható. | Nincs |
| Billentyűzet | Billentyűzetes léptetés: `off`, `focused` (fókuszban) vagy `global`. Töréspontonként állítható. | `global` |
| Automatikus magasság | A magasság a tartalomhoz igazodik. Elrendezésugrást okozhat (CLS). | Ki |
| Magasság | Rögzített magasság. Automatikus magasságnál nem érhető el. Töréspontonként állítható. | 50vh |
| Térköz | A diák közötti távolság. Töréspontonként állítható. | 0 |
| Kezdő index | Melyik diával indul. | 0 |
| Látható elemek | Hány dia látszik egyszerre. `fade` típusnál nem érhető el. Töréspontonként állítható. | 1 |
| Léptetett elemek | Hány diát léptet egy váltás. `fade` típusnál nem érhető el. Töréspontonként állítható. | 1 |
| Sebesség (ms) | Az áttűnés időtartama. Töréspontonként állítható. | 400 |
| Fókusz | Melyik dia legyen aktív, ha az oldalon több dia látszik: szám vagy `center`. Töréspontonként állítható. | Nincs |

### Automatikus lejátszás

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Automatikus lejátszás | A diák maguktól váltanak. | Ki |
| Szünet egérrel fölötte | Megáll, ha az egér a diavetítés fölött van. | Ki |
| Szünet fókuszban | Megáll, ha a diavetítés fókuszban van. | Ki |
| Időköz (ms) | Két váltás között eltelt idő. | 3000 |

### Visszatekerés

Csak akkor érhető el, ha a típus nem `loop`.

| Beállítás | Mit csinál |
| --- | --- |
| Visszatekerés | Az utolsó dia után visszaugrik az elsőre. |
| Visszatekerés húzással | Húzással is vissza lehet tekerni. |
| Sebesség (ms) | A visszatekerés átmenetének ideje. |

## Dia

A diák közös megjelenése:

- belső margó,
- vízszintes igazítás (`flex-start`, `center`, `flex-end`),
- függőleges igazítás (`flex-start`, `center`, `flex-end`, `space-between`, `space-around`),
- háttér,
- szegély.

## Nyilak

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Megjelenítés | A léptető nyilak kijelzése. | Nincs |
| Magasság, szélesség | A nyílgomb mérete. | 50px, 50px |
| Háttér, szegély | A nyílgomb háttere és szegélye. | Nincs |
| Szín, méret, szövegárnyék | A nyílikon megjelenése. | Nincs |
| Előző nyíl | Saját ikon, valamint fent (alapérték 50%), jobbra, lent és balra érték, és átalakítás. | Nincs |
| Következő nyíl | Saját ikon, valamint fent (alapérték 50%), jobbra, lent és balra érték, és átalakítás. | Nincs |

A letiltott nyilaknak (például az első diánál az előzőnek) külön háttér, szegély, szín és átlátszóság (0 és 1 között) állítható.

## Lapozás

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Megjelenítés | A lapozópontok kijelzése. | Be |
| Margó | A pontok körüli margó. | 5px minden oldalon |
| Magasság, szélesség | A pontok mérete. | 10px, 10px |
| Szín | A pontok színe és háttere. | Nincs |
| Szegély | A pontok szegélye. | Nincs |

Az aktív pontnak külön magasság, szélesség, szín és szegély adható.