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

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ó) 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:

<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).

<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>