# Diavetítés elem

> A klasszikus Diavetítés elem: diák, hatások, automatikus lejátszás, nyilak, pontok és a biztonsági vizsgálók jelzései.

A **Diavetítés** elem teljes szélességű diavetítést készít. Egy dia címet, tartalmat és gombot is tartalmazhat. A megjelenítést a Swiper könyvtár végzi.

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

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

A képen a **Diák** lista a **Hozzáadás dia** gombbal, a **Lekérdezési ciklus** kapcsoló, és a **Beállítások**, **Nyilak** és **Pontok** csoport látszik.

## Diák

A diákat a **Hozzáadás dia** gombbal veszed fel. Minden diának ezek a beállításai vannak:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Cím | A dia címe. | Nincs |
| Címke | A cím HTML-címkéje, `h1` és `h6` között. | `h3` |
| Tartalom | A dia szövege, formázható. | Nincs |
| Gomb szövege | A cselekvésre ösztönző gomb felirata. | Nincs |
| Gomb stílusa | A gomb stílusa. | `light` |
| Gomb mérete | A gomb mérete. | Nincs |
| Gomb szélessége | A gomb szélessége mértékegységgel. | Nincs |
| Gomb linkje | Hová mutat a gomb. | Nincs |
| Gomb háttere, szegélye, árnyéka, tipográfiája | A gomb egyedi megjelenése az adott diára. | Nincs |
| Háttér | A dia háttere: szín, kép vagy színátmenet. | Nincs |
| Átfedés | Színes réteg a háttér fölött. | Nincs |

A **Lekérdezési ciklus** kapcsolóval a diákat egy lekérdezés eredményéből is előállíthatod.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Látható diák száma | Hány dia látszik egyszerre. | 1 |
| Lapozott diák száma | Hány diát léptet egy váltás. | 1 |
| Térköz | A diák közötti távolság pixelben. | 0 |
| Magasság | A diavetítés magassága mértékegységgel. | 300px |
| Hatás | Az áttűnés módja: `slide`, `fade`, `cube`, `coverflow`, `flip`. | `slide` |
| Ismétlés | Végtelen ismétlés: `enable` (be) vagy `disable` (ki). | `enable` |
| Középső mód | Az aktív dia középre kerül. | Ki |
| Késleltetett betöltés tiltása | Minden kép azonnal betöltődik. | Ki |
| Automatikus lejátszás | A diák maguktól váltanak. | Ki |
| Szünet egérrel fölötte | A lejátszás megáll, ha az egér a diavetítés fölött van. | Ki |
| Megállás az utolsó diánál | Az automatikus lejátszás az utolsó diánál véget ér. | Ki |
| Késleltetés (ms) | Két váltás között eltelt idő. | 3000 |
| Animáció sebessége (ms) | Az áttűnés időtartama. | 300 |

## Cím, tartalom, gomb és háttér stílusa

Ezek a beállítások az összes diára vonatkoznak:

- **Cím:** a cím margója és tipográfiája.
- **Tartalom:** a tartalom maximális szélessége, háttérszíne, tipográfiája, margója és belső margója (alapérték: 30px fent, 60px jobbra, 30px lent, 60px balra), a tartalom vízszintes és függőleges igazítása, valamint a szöveg igazítása.
- **Gomb:** a gombok közös stílusa (alapérték: `light`), mérete, szélessége, háttere, szegélye, árnyéka és tipográfiája.
- **Háttér:** a háttérkép eltolása fent, jobbra, lent és balra.

## Nyilak

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Nyilak megjelenítése | A léptető nyilak kijelzése. | Be |
| Magasság, szélesség | A nyílgomb mérete. | 50px, 50px |
| Háttér, szegély, tipográfia | A nyílgomb megjelenése. | Nincs |
| Előző nyíl ikonja | Az előző diára lépő nyíl ikonja. | `ion-ios-arrow-back` |
| Előző nyíl helye | Fent, jobbra, lent és balra érték, valamint átalakítás. | Fent 50%, balra 50px |
| Következő nyíl ikonja | A következő diára lépő nyíl ikonja. | `ion-ios-arrow-forward` |
| Következő nyíl helye | Fent, jobbra, lent és balra érték, valamint átalakítás. | Nincs |

## Pontok

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Pontok megjelenítése | A lapozópontok kijelzése. | Ki |
| Dinamikus pontok | Dinamikus pontjelzés. | Ki |
| Függőleges | A pontok egymás alatt jelennek meg. | Ki |
| Magasság, szélesség | A pontok mérete. | Nincs |
| Fent, jobbra, lent, balra | A pontokat tartalmazó doboz helye. | Nincs |
| Szegély | A pontok szegélye. | Nincs |
| Szín | A nem aktív pontok színe. | Nincs |
| Aktív szín | Az aktív pont színe. | Nincs |
| Margó | Az egyes pontok körüli margó. | Nincs |

## Biztonsági vizsgálók jelzései

A Bricks 2.4 a klasszikus Diavetítés elem által használt régi Swiper-összeállítást javítva szállítja, a CVE-2026-27212 (GHSA-hmx5-qpq5-p643) sérülékenység elleni védelem átvezetésével. A működés változatlan maradt, így a meglévő diavetítések ugyanúgy viselkednek, beleértve azokat az ismétlős beállításokat is, amelyek a Swiper 8 duplikált diáira épülnek.

Egyes biztonsági vizsgálók a minimalizált kód alapján ettől még jelezhetik a Swiper 8-at. Ilyenkor ezt a kivételmegjegyzést használhatod: `Bricks-patched vendored Swiper 8 legacy build with CVE-2026-27212 backport.` A Bricks `bricks-swiper` szkriptjének verziója `bricks-cve-2026-27212-p1`, és a fájl fejléce már nem a gyári `Swiper 8.4.4` feliratot hordozza.