# Divi 5 modul: képkarusszel

> A Divi 5 Visual Builder képkarusszel (Image Carousel) moduljának beállításai: képek, karusszel és diavetítés, lightbox, nyilak, lapozópontok.

A **Supreme Image Carousel** képek karusszelje portfólióhoz, termékképekhez, ügyféllogókhoz. A **Divi Supreme** kategóriában van a modulválasztóban, és a **Divi Supreme Pro → Modulok beállításai** fülön kell bekapcsolnod. A beállítások feliratai a builderben angolul maradnak. A szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció) ott érhetők el, ahol a modul támogatja őket. Egyszerű dekorációs képhez elég a sima Divi kép modul, nagyon nagy képkészletnél pedig érdemes külön galéria-bővítményt használni.

1. Add hozzá a **Supreme Image Carousel** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön válaszd ki a képeket az **Image Carousel** mezőben, és állítsd be a sorrendet, a képméretet.
3. Válaszd ki a típust (karusszel vagy diavetítés), és állítsd be a működését.
4. A **Design** fülön állítsd be a nyilak és a lapozópontok megjelenését.
5. Mentsd az oldalt, és nézd meg a weboldalon.

## Content: képek

| Beállítás | Mit csinál |
|---|---|
| **Image Carousel** | A karusszelben megjelenő képek kiválasztása. |
| **Order By** | A képek sorrendje. |
| **Image Size** | A használt WordPress-képméret. Ha a képhez a médiabeállításokban hivatkozást adsz meg, az érvényesül, különben a kép címére mutat. |
| **Use Image Overlay** | Szín vagy színátmenet kerül minden dia képére. Diavetítésnél a cím és a képaláírás alatt van. A színét a **Design → Image Overlay** csoportban állítod. |
| **Image Fit** | A kép illeszkedése a keretbe. |
| **Image Position** | A kép pozíciója a keretben. |
| **Enabled Lazy Load** | Bekapcsolva a fő karusszel késleltetett betöltést használ (a diák képein natív `loading="lazy"`), a diavetítés hátterei és az előnézeti sáv késleltetett háttér-URL-ekkel töltődnek. Kikapcsolva a képek azonnal betöltődnek. Egyes gyorsítótár- vagy teljesítménybővítmények módosíthatják a működést, ezért próbáld ki a saját oldaladon. |

## Content: típus és működés

| Beállítás | Mit csinál |
|---|---|
| **Type** | Karusszel vagy diavetítés (slideshow). |
| **Carousel Orientation** | A karusszel iránya (vízszintes vagy függőleges). |
| **Height** | A karusszel magassága. |
| **Carousel Effect** | A váltás effektje. Az effekttől függően megjelenik a **Show Shadow**, a **Coverflow Rotate** és a **Coverflow Depth** beállítás. |
| **Slideshow Effect** | A diavetítés váltóeffektje. |
| **Height** (diavetítés) | A diavetítés magassága. |
| **Carousel Direction** | A haladás iránya. |
| **Centered Mode** | Az aktív dia középen van, nem mindig a bal szélen. |
| **Slides To Show** | Egyszerre látható diák száma. |
| **Slides To Scroll** | Egy lépésben görgetett diák száma. |
| **Use Multiple Row** | Többsoros elrendezés. |
| **Row Per Slide** | A sorok száma többsoros elrendezésnél. |
| **Slider Speed** | A váltás sebessége. |
| **Autoplay** | Automatikus léptetés. |
| **Autoplay Change Interval** | Az automatikus léptetés időköze. |
| **Autoplay Only On Viewport** | Az automatikus léptetés csak akkor fut, ha a karusszel látszik a képernyőn. |
| **Use Mouse Wheel** | Az egérgörgő lépteti a diákat. |
| **Pause on Hover** | Egérráhúzásra megáll a léptetés. |
| **Spacing** | A diák közti rés. |
| **Loop** | Végtelen körbeforgás. |
| **Infinite Smooth Scrolling** | Folyamatos, egyenletes görgetés. Bekapcsolva a nyilak és a lapozópontok el vannak rejtve. |
| **Show Arrow** | Előző és következő nyíl. |
| **Show Pagination** | Lapozópontok, csak karusszel módban. |
| **Disable Touch/Dragging** | Letiltja az érintéses és egérrel húzós léptetést. |
| **Use Grab Cursor** | Megfogó egérkurzor. |

## Content: diavetítés előnézeti sávja

| Beállítás | Mit csinál |
|---|---|
| **Thumbnail To Show** | Az előnézeti sávban látható bélyegképek száma. |
| **Thumbnail Image Size** | A bélyegképek WordPress-képmérete. |
| **Thumbnail Image Ration** | A bélyegképek képaránya. |
| **Thumbnail Image Fit**, **Thumbnail Image Position** | A bélyegképek illeszkedése és pozíciója. |
| **Thumbnail Position** | Az előnézeti sáv a fő diavetítés alatt, fölött, vagy szabadon elhelyezett fedőrétegként. A **Custom** értéknél a pozíció eltolását külön adod meg. |

## Content: diacím és leírás animációja

Diavetítésnél a dia képén cím és leírás jelenhet meg, külön be- és kimenő animációval.

| Beállítás | Mit csinál |
|---|---|
| **Show Slide Title** | A csatolmány címe, ennek hiányában az alternatív szöveg fedőrétegként a diákon. |
| **Slide Title Animation In** | A cím belépő animációja az aktív dián, minden váltás után. Ha az animáció nem „None”, az Animate.css betöltődik. |
| **Title Animation Duration** | Az animáció hossza ezredmásodpercben (100 és 5000 között). |
| **Title Animation Delay** | Késleltetés ezredmásodpercben (0 és 3000 között). |
| **Slide Title Animation Out** | A cím kilépő animációja a következő dia előtt. „None” esetén azonnal vált. |
| **Title Animation Out Duration**, **Title Animation Out Delay** | A kilépő animáció hossza és késleltetése. |
| **Show Slide Description** | A csatolmány képaláírása, ennek hiányában a leírása a cím alatt. |
| **Slide Description Animation In** | A leírás belépő animációja (a **Show Slide Description** bekapcsolása kell hozzá), az időzítés a címével azonos szabályú. |
| **Description Animation Duration**, **Description Animation Delay** | A belépő animáció hossza és késleltetése. |
| **Slide Description Animation Out** | A leírás kilépő animációja a cím kilépésével együtt. A karusszel a leghosszabb kilépési időt megvárja. |
| **Description Animation Out Duration**, **Description Animation Out Delay** | A kilépő animáció hossza és késleltetése. |
| **Content Wrapper Animation In** | A cím és a leírás közös burkolójának belépő animációja. Az egyedi animációkkal együtt fut. |
| **Wrapper Animation In Duration**, **Wrapper Animation In Delay** | A burkoló belépő animációjának hossza és késleltetése. |
| **Content Wrapper Animation Out** | A burkoló kilépő animációja a cím és a leírás mellett. |
| **Wrapper Animation Out Duration**, **Wrapper Animation Out Delay** | A burkoló kilépő animációjának hossza és késleltetése. |

## Content: lightbox

| Beállítás | Mit csinál |
|---|---|
| **Open Image in Lightbox** | A kép kattintásra lightboxban nyílik meg. |
| **Image Size** | A lightboxban használt képméret. |
| **Lightbox in Gallery Mode** | A lightbox galéria módban nyílik, léptethető a képek között. |
| **Display Title** | A lightbox megjeleníti a címet. |
| **Display Caption** | A lightbox megjeleníti a képaláírást vagy leírást. |

## Design

| Beállítás | Mit csinál |
|---|---|
| **Vertical Alignment** | A tartalom igazítása. |
| **Arrow Horizontal Position** | A nyilak vízszintes helye. |
| **Top Arrow Position**, **Bottom Arrow Position** | A nyilak függőleges helye felül és alul. |
| **Arrow Position** | A nyilak a képen belül vagy kívül vannak, külön a számítógépre, a táblagépre és a telefonra. |
| **Use Arrow Custom Position**, **Arrow Custom Position** | Saját nyílpozíció bekapcsolása és értéke. |
| **Use Custom Previous Arrow Icon**, **Previous Arrow Icon** | Saját ikon az előző nyílhoz. |
| **Use Custom Next Arrow Icon**, **Next Arrow Icon** | Saját ikon a következő nyílhoz. |
| **Arrow Size** | A nyilak mérete. |
| **Arrow Color**, **Arrow Background Color** | A nyilak színe és háttere. |
| **Pagination Horizontal Placement**, **Pagination Vertical Placement** | A lapozópontok vízszintes és függőleges helye. |
| **Pagination Active Color**, **Pagination In-Active Color** | Az aktív és az inaktív pont színe. |
| **Pagination Position** | A lapozópontok elhelyezése. |
| **Horizontal**, **Vertical** | A diacím és a leírás vízszintes és függőleges igazítása. |
| **Inactive Thumbnail Opacity** | A ki nem választott bélyegképek átlátszósága (0 és 1 között, alapérték 0,4). |
| **Active Thumbnail Opacity** | A kiválasztott bélyegkép átlátszósága (0 és 1 között, alapérték 1). |

A beállításokat érdemes előbb a **Content**, utána a **Design** fülön elvégezni, a méreteket pedig külön a táblagépre és a telefonra is megadni.