CODEWITHSUNDEEP
reveal.js
Erel Segal-Halevi
Erel Segal-Halevi

Reputation: 36735

In reveal.js, is there a standard way to make left-click advance to the next slide?

In Powerpoint, clicking the left mouse button advances to the next slide. In reveal.js, it is done using the keyboard. Is it possible to configure reveal.js to advance to the next slide also when clicking the mouse button?

Upvotes: 3

Views: 756

Answers (2)

David ROUMANET
David ROUMANET

Reputation: 159

Using the previous answer, I've a problem to use arrows in back end of the slides (normal controls). Then, I'm proposing to exclude a zone of 110 pixels to keep normal controls actives. New code:

window.addEventListener("mousedown", handleClick, false);
window.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
    
function handleClick(e) {
    let zoneSize = 110;
    let x = e.clientX;  // get mouse X position
    let y = e.clientY;  // get mouse Y position
    let wx = window.innerWidth;  // get window width
    let hy = window.innerHeight; // get window height
    if (x>(wx-zoneSize) && y>(hy-zoneSize)) {
    } else {
        // only if not in normal controls zone
        e.preventDefault();
        if(e.button === 0) Reveal.next();
        if(e.button === 2) Reveal.prev();
    }
}

Upvotes: 0

Matt Croak
Matt Croak

Reputation: 2888

It looks like you can add a click event to the entire slide and and check the button for the event. 

window.addEventListener("mousedown", handleClick, false);
window.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);

function handleClick(e) {
    e.preventDefault();
    if(e.button === 0) Reveal.next(); 
    if(e.button === 2) Reveal.prev(); 
}

If you're worried about links on the page not being clickable you can check the target of the event. If it's a link, don't proceed to the next slide.

This site could be useful and has a more in depth explanation. It's where the above code is from.

Upvotes: 1

Related Questions