Get the next slide section from the main slide

[ljfreelancer88]

Hi, I'm having hard time implementing on how to get the next or upcoming slide section from the main slide.

<div id="slide-current">
  <div class="reveal">
    <div class="slides">
      <section>Slide 1</section>
      <section>Slide 2</section>
      <section>Slide 3</section>
    </div>
  </div>
</div>
<div id="slide-next">
<!-- SHOW THE NEXT SLIDE HERE -->
</div>

I can able to get the current slide using currentSlide. But I didn't see any nextSlide. This is what I have in my mind.

Reveal.on( 'slidechanged', event => {
  // event.currentSlide, event.indexh, event.indexv
  console.log(event.currentSlide);
  document.querySelector('#slide-next').value = event.nextSlide; //nextSlide seems not exist though.
} );

Thank you in advance.

[Martinomagnifico]

event.currentSlide.nextElementSibling will work. You'll need to rewrite that if the next slide or the current slide is in a vertical stack.

[Sharni17]

Thank you 😊

[ljfreelancer88]

event.currentSlide.nextElementSibling will work. You'll need to rewrite that if the next slide or the current slide is in a vertical stack.

Is it possible to get the styling also? Like background image etc.

[Martinomagnifico]

Is it possible to get the styling also? Like background image etc.

You can get any attribute:

event.currentSlide.nextElementSibling.attributes.class
event.currentSlide.nextElementSibling.attributes.style
event.currentSlide.nextElementSibling.getAttribute('data-background-image')

This issue is kind of done. It is more about JavaScript in general than Reveal.js. You can close it now.

[ljfreelancer88]

Thank you