# Képkörhinta (Kép-carousel) widget

> Képek vízszintesen csúszó megjelenítése: képek kiválasztása, láthatók száma, navigáció, linkek, feliratok, automatikus lejátszás és stílus.

A **Kép-carousel** widget több képet jelenít meg csúszó körhintában. A képek a beállítások szerint vízszintesen mozognak; a pozíció, a navigációs vezérlők és az automatikus lejátszás is állítható.

Hasznos például egy csapat tagjainak fotóihoz (a képek alatt a névvel, amely a közösségi profilra mutat), portfólióhoz, ügyfélvéleményekhez vagy termékjellemzőkhöz.

## A widget hozzáadása

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget.
2. Kattints a **Kép-carousel** widgetre, vagy húzd a vászonra. Lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

## Körhinta készítése lépésről lépésre

1. Add a **Kép-carousel** widgetet a vászonra.
2. A **Tartalom** fülön, a **Kép-carousel** szekcióban kattints a **+** ikonra, válaszd ki a képeket, majd kattints az **Új galéria létrehozása** gombra.
3. A következő oldalon szükség esetén adj feliratot a képeknek, és kattints a **Galéria beszúrása** gombra.
4. A **Képfelbontás** listával a képek méretét állítod: bélyegkép, teljes méret vagy egyéni méret.
5. A **Megjelenítendő diák száma** mezőben megadod, hány kép látszódjon egyszerre (1-10).
6. A **Görgetésenkénti diák száma** mezőben megadod, hány kép lépjen egyszerre egy húzásra vagy kattintásra.
7. A **Kép nyújtása** mezővel döntöd el, hogy a képek kitöltsék-e a körhintát.
8. A **Navigáció** listában válaszd ki a lapozás módját: **Nyilak**, **Pontok**, **Nyilak és pontok** vagy **Nincs**. Nyilaknál az **Előző nyíl ikonja** és a **Következő nyíl ikonja** mellett a csillag gombbal ikont választhatsz a könyvtárból, az SVG gombbal feltöltött SVG-t használhatsz.
9. A **Link** listában válaszd ki, mire mutassanak a képek: **Médiafájlok**, **Egyéni URL** vagy **Nincs**.
   - **Médiafájlok** esetén a **Lightbox** mezővel az alapbeállítástól eltérően kérheted vagy tilthatod a lightboxot (**Igen** / **Nem**). Lásd: [Lightbox beállításai](https://hub.hellowp.io/hu/plugins/elementor/widgetek-lightbox/).
   - **Egyéni URL** esetén a fogaskerék ikonnal új ablakban nyithatod meg a linket, vagy `rel="nofollow"` értéket adhatsz hozzá; az **Egyéni attribútumok** mezőben a kulcsot és az értéket függőleges vonal (`|`) választja el, az attribútumpárokat vessző.
10. A **Felirat** listában válaszd ki, mi jelenjen meg a képek alatt: **Nincs**, **Cím**, **Felirat** vagy **Leírás**.

![A Kép-carousel widget Tartalom füle: kiválasztott képek, Képfelbontás, Megjelenítendő diák száma, Navigáció, Link és Felirat](./kepek/widgetek-kepkorhinta-tartalom.webp)

*A Kép-carousel widget Tartalom füle: kiválasztott képek, Képfelbontás, Megjelenítendő diák száma, Navigáció, Link és Felirat* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a négy kiválasztott kép bélyegképe és az alatta lévő beállítások láthatók; a **További lehetőségek** szekció összecsukva a lap alján van.

## További lehetőségek (Tartalom fül)

| Beállítás | Mit csinál |
|---|---|
| **Lusta betöltés** | A képek csak akkor töltődnek be, amikor a látogatónak meg kell jelenniük, ami gyorsítja az oldalt |
| **Automatikus lejátszás** | **Igen** esetén a diák maguktól lépnek |
| **Szünet rámutatáskor** | Az automatikus lejátszás megáll, amikor a látogató a körhinta fölé viszi az egeret |
| **Szünet interakciókor** | Az automatikus lejátszás megáll, amikor a látogató használja a körhintát |
| **Automatikus lejátszás sebessége** | Az automatikus váltás időköze ezredmásodpercben (1000 ms = 1 másodperc) |
| **Végtelenített ciklus** | A körhinta megszakítás nélkül, körbe forog |
| **Animáció sebessége** | A diák mozgásának sebessége |
| **Irány** | A mozgás iránya: balról vagy jobbról |

## Stílus fül

![A Kép-carousel widget Stílus füle: Navigáció szekció a Nyilak és a Lapozás beállításaival](./kepek/widgetek-kepkorhinta-stilus.webp)

*A Kép-carousel widget Stílus füle: Navigáció szekció a Nyilak és a Lapozás beállításaival* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a **Navigáció** szekció látszik a **Nyilak** és a **Lapozás** beállításaival; alatta a **Kép** szekció.

**Navigáció** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Nyilak: Pozíció** | A nyilak a körhintán **Belül** vagy **Kívül** jelennek meg |
| **Nyilak: Méret** | A nyilak mérete (px, em, rem vagy egyéni egység) |
| **Nyilak: Szín** | A nyilak színe |
| **Lapozás: Pozíció** | A pontok a körhintán **Belül** vagy **Kívül** jelennek meg |
| **Lapozás: Pontok közötti térköz** | A pontok közti távolság |
| **Lapozás: Méret** | A pontok mérete |
| **Lapozás: Szín** | A pontok színe |
| **Lapozás: Aktív szín** | Az éppen aktív pont színe |

**Kép** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Függőleges igazítás** | A kép függőleges helye: felül, középen vagy alul |
| **Térköz** | A diák közti távolság (alapértelmezés: 20 px) |
| **Szegély típusa** | Szegély a képek körül: **Nincs**, **Folytonos**, **Dupla**, **Pontozott**, **Szaggatott** vagy **Hornyolt** |
| **Sarkok lekerekítése** | A képek sarkainak lekerekítése |

**Felirat** szekció: **Igazítás**, **Szöveg színe**, **Tipográfia**, **Szövegárnyék** és **Térköz** (a kép és a felirat távolsága).

## Haladó fül

A **Haladó** fülön a widget helyét, térközeit és egyedi kódját állíthatod. Lásd: [Haladó fül](https://hub.hellowp.io/hu/plugins/elementor/stilus-halado-ful/).

## Az eredmény az oldalon

![Az oldalon a Kép-carousel két látható dián, nyilakkal és pontokkal](./kepek/widgetek-ikonok-es-kepek-elol.webp)

*Az oldalon a Kép-carousel két látható dián, nyilakkal és pontokkal* (https://minta-bolt.hu/widget-demo-4/)

A képen a körhinta két diát mutat, alatta a lapozópontok láthatók.