Reveal.js: Auto Show Fragments

[jessejamesrich]

I'm curious is there's a way to get the first fragment in a slide to show automatically?

[bnjmnt4n]

There's no built in method, but you can add an event listener for slide changes to activate the next fragment:

Reveal.addEventListener( 'slidechanged', function( event ) {
    Reveal.nextFragment();
} );

[jessejamesrich]

That's precisely what I have. Wasn't sure if there was something native that I missed in the docs. Thanks.

[denehyg]

Alternatively you could try this, using CSS rather than js... http://stackoverflow.com/a/33337886/5487537

[swill]

In my case I needed the auto show to work with a fragment because I have use cases which use the current-visible class to hide fragments as you cycle through. Because of this, I needed to be able to leverage the fragments features, but also have optional support for having the first fragment preload.

In may case, I have to minimize the usability requirements on the slide maintainer as well as support both preloading and the standard functionality.

Since I was unable to find an elegant solution for this problem via Google, and this is the first result when searching, I am posting back my solution here and hopefully it helps others.

My content maintainers use Markdown, so here is an example using Markdown.

- Preloaded fragment on slide transition <!-- .element: class="fragment preload" -->
- Next fragment to load <!-- .element: class="fragment" -->
- Last fragment to load <!-- .element: class="fragment" -->

In my case, I want both the forward direction and backward direction to work. So when you go forward, the preload fragment should be automatically shown. When you go backwards, I don't want the preload fragment to disappear before transitioning to the previous slide, so on hide of the preload fragment, I am also transitioning to the previous slide so the implementation feels smooth and obvious.

Here is the code:

// automatically load the initial fragment on a slide if the fragment
// has been defined with the 'preload' class
Reveal.addEventListener('slidechanged', function(event) {
  if (event.currentSlide.querySelectorAll('.preload[data-fragment-index="0"]').length > 0) {
    Reveal.nextFragment();
  }
});

// if the initial fragment on a slide has been defined with a 'preload' class
// then transition to the previous slide if the fragment is hidden
Reveal.addEventListener('fragmenthidden', function(event) {
  if (event.fragment.hasAttribute('data-fragment-index') && event.fragment.classList.contains('preload')) {
    if (event.fragment.attributes['data-fragment-index'].value == "0") {
      Reveal.prev();
    }
  }
});

Enjoy, hopefully this is helpful for others...

[G1305]

@swill sorry, I don't understand... I'm beginner;
this code must be inserted in reveal.js ?
please help me step by step :(

[swill]

@G1305 I put these two functions right after my Reveal.initialize({ ... }); call in my slides template file. I am not sure if this is the correct place to put it, but it works for me. I am actually working off a fork of this project https://github.com/yusukebe/revealgo, so my implementation is likely a little different from yours. I have rebased that project to include the latest reveal.js code, so I suspect everything will work as expected for you once you include those calls in your template. Cheers...

[G1305]

HOW fix it for mobile? where is dimensions for RESPONSIVE?