# Diavetítés (beágyazható): testreszabás JavaScripttel

> Fejlesztőknek: a beágyazható Diavetítés Splide-példányának elérése, beállításainak módosítása és saját navigációs nyilak az elemen kívül.

A beágyazható **Diavetítés (Beágyazható elemek)** elem a SplideJS könyvtárra épül. Ez a fejezet fejlesztőknek szól: bemutatja, hogyan érheted el és szabhatod testre a Splide-példányt. Az elem szokásos beállításait a [Diavetítés (beágyazható)](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-diavetites-beagyazhato/) fejezet írja le.

Minden elindított Splide-példány a `window.bricksData.splideInstances` objektumban érhető el. A megfelelő példány lekéréséhez előbb meg kell ismerned a diavetítés elemének egyedi azonosítóját. Ezt a szerkesztőben az elem szerkesztésekor, vagy a böngésző fejlesztői eszközeiben találod meg.

Ha például az azonosító `rrbqsp`, a Splide-példányt így éred el: `window.bricksData.splideInstances['rrbqsp']`.

## A diavetítés beállításainak módosítása JavaScripttel

Cél: a `noDrag` beállítás módosítása az aktuális oldal összes beágyazható diavetítésén. Az alábbi kód minden példányon beállítja, hogy a `.no-drag` osztályú elemek ne legyenek húzhatók:

```html
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  // Függvény, amely az oldal összes Splide-példányán módosítja a noDrag beállítást
  const updateNoDragOption = () => {
    for (const splideId in window.bricksData.splideInstances) {
      const splideInstance = window.bricksData.splideInstances[splideId]

      if (splideInstance) {
        // A .no-drag osztályú elemek nem húzhatók
        splideInstance.options = { noDrag: '.no-drag' }
      }
    }
  }

  // Kis késleltetés, hogy a Bricks elindíthassa a diavetítéseket
  setTimeout(updateNoDragOption, 250)
})
</script>
```

## Egyéni navigációs nyilak a diavetítésen kívül

Cél: a diavetítésen kívül elhelyezett saját navigációs gombok.

1. Adj a gombjaidnak egyedi osztályokat. A példában a `my-prev` és `my-next` osztályt használjuk.
2. A diavetítés beállításaiban a nyilak maradjanak kikapcsolva.
3. Helyezz el egy **Kód** elemet, és írd bele az alábbi JavaScriptet. Kapcsold be a **Kód futtatása** jelölőnégyzetet (és írd alá a kódot, lásd [Egyéni kód](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-egyeni-kod/)).

```html
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  // Idő a Bricksnek a diavetítések elindításához
  setTimeout(() => {
    // Cseréld az rrbqsp értéket a saját diavetítésed elemazonosítójára! NEM a CSS-azonosítóra!
    const mySlider = window.bricksData?.splideInstances['rrbqsp'] || false

    // Cseréld a gombosztályokat a saját esetednek megfelelően
    const myPrevBtn = document.querySelector('.my-prev')
    const myNextBtn = document.querySelector('.my-next')

    if (mySlider && myPrevBtn && myNextBtn) {
      // Kattintáskezelők az egyéni gombokhoz
      myPrevBtn.addEventListener('click', function () {
        mySlider.go('-1') // a SplideJS go() függvénye
      })

      myNextBtn.addEventListener('click', function () {
        mySlider.go('+1') // a SplideJS go() függvénye
      })
    }
  }, 250)
})
</script>
```