CODEWITHSUNDEEP
javascripthtmlreveal.js
user3783339
user3783339

Reputation: 11

reveal.js - Navigate through slides like on a grid or a checkerboard

I would like to know if it's possible to navigate between slides in reveal.js like moving on a grid or a checkerboard (reason is explained at the bottom of the post). At the moment when you move to a new stack of slides, the one that takes focus is the topmost of the next stack. This is a normal behavior for a presentation-oriented software but not for a slideshow-oriented tool.

I'd like to override this behavior for some presentations that require moving back and forth along rows of different columns, but I am not confident with Javascript at all. Until now I've found that the right places in the source where the changes should occur might be:

A possible solution that does not involve the source code was posted a year ago here on stackoverflow by jfriend00 (using-arrowkeys-to-navigate-through-4x4-grid) but I don't know how it should be implemented in an external .js file or in the main .html file.

Why do I think this is important?
I'll make an example that is not my case but easy enough to understand.
Let's assume that you perform a clinical study of 15 analyses on 50 patients, and you want to look at all graphs (generated by Python, MATLAB or R in raster or vector format) like they were on a photo grid, arranged with patients on columns and analyses on rows. And let's say that you want to see all the results of the 9th analysis for all the patients. The problem is that if you click "right arrow" key, reveal.js shows the 1st (or the last visited) slide on the next column.
Intuitively, this is what you would like to have during a presentation to a public audience, but not to your boss or collaborators during a private office/lab meeting.

Upvotes: 0

Views: 875

Answers (1)

user3783339
user3783339

Reputation: 11

Ok, I found the solution and I hope this is going to help somebody else with the same problem.

In the file reveal.js, you can just comment the lines 1550 and 1561, and replace the second argument of the function setPreviousVerticalIndex (a zero) with indexv. The final result looks like this.

//if ( document.querySelector( HOME_SLIDE_SELECTOR ).classList.contains( 'present' ) ) {
// Launch async task
    setTimeout( function () {
        var slides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') ), i;
        for( i in slides ) {
            if( slides[i] ) {
                // Reset stack
                setPreviousVerticalIndex( slides[i], indexv );
            }
        }
    }, 0 );
//}

In this way, every time you change slide (the function slide is called) every stack's vertical index become the same of the slide you're moving towards.
Please don't forget to minify the code again or just switch to reveal.js instead of reveal.min.js in you html file.

Upvotes: 1

Related Questions