CODEWITHSUNDEEP
javascriptjquerycssslideshowreveal.js
Murphy1976
Murphy1976

Reputation: 1475

Reveal.js Custom Keyboard Bindings negate Fade Transition

I have about 20 slides, and I have assigned the keyboard reassignments to go to each slide depending on which key you press. I took note of the already assigned key commands as to not overwrite anything important (full screen, next, previous, etc.)

The problem I'm running into is that I can transition from slide 1 to slide 2, slide 1 to slide 3, slide 1 to slide 4, and so on for a bit, but then around slide 6 or 7, the fade simply refuses to work, and it's just a quick cut to the next slide. I'm wondering if I've written something incorrectly in my initialize script.

Reveal.initialize({
          controls: false,
          progress: false,
          history: false,
          center: true,
          transition: 'fade',
          transitionSpeed: 'slow',
          loop: true,
          keyboard: {
                    81: function() { Reveal.slide(0) }, // Q Key
                    87: function() { Reveal.slide(1) }, // W Key
                    69: function() { Reveal.slide(2) }, // E Key
                    82: function() { Reveal.slide(3) }, // R Key
                    84: function() { Reveal.slide(4) }, // T Key
                    89: function() { Reveal.slide(5) }, // Y Key
                    85: function() { Reveal.slide(6) }, // U Key
                    73: function() { Reveal.slide(7) }, // I Key
                    219: function() { Reveal.slide(8) }, // [ Key
                    221: function() { Reveal.slide(9) }, // ] Key
                    220: function() { Reveal.slide(10) }, // \ Key
                    65: function() { Reveal.slide(11) }, // A Key
                    68: function() { Reveal.slide(12) }, // D Key
                    71: function() { Reveal.slide(13) }, // G Key
                    186: function() { Reveal.slide(14) }, // ; Key
                    222: function() { Reveal.slide(15) }, // ' Key
                    90: function() { Reveal.slide(16) }, // Z Key
                    88: function() { Reveal.slide(17) }, // X Key
                    67: function() { Reveal.slide(18) }, // C Key
                    77: function() { Reveal.slide(19); } // M Key
          },
          dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/search/search.js', async: true },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true }
          ]
});

The documentation on how to properly use the .slide() is mediocre at best. The documentation clearly states the call is:

Reveal.slide( indexh, indexv, indexf );

But it never actually says what indexh, indexv or indexf are.

Upvotes: 1

Views: 204

Answers (1)

Greg Denehy
Greg Denehy

Reputation: 81

You need to change the viewDistance parameter in the initialisation options to be larger than the number of slides, eg...

Reveal.initialize({
    //...
    viewDistance: 20
});

By default, reveal uses lazy loading of slides to preload slides that are within a certain 'distance' of the current slide, and unload slides that are further away. This is primarily used to load and unload media that use the data-src attribute, but it also hides the slides by setting the slides style to display: none. In your case the slide transition does not occur when the jumping to a slide further than 3 slides ahead as the slide is not displayed before the transition. Setting a large viewDistance will avoid this, but beware that this will circumvent any lazy loading media you have configured.

As for the Reveal.slide( indexh, indexv, indexf ) function:

  • indexh is the horizontal index of the slide
  • indexv is the vertical index of the slide
  • indexf is the index of the fragment within the target slide

When you call Reveal.slide(1) you're not actually changing to slide 1 but you're changing to the second horizontal slide (0-indexed). I assume you don't have any vertical slides so the indexes will match the numbers directly.

Upvotes: 1

Related Questions