Can slidev support mouse click?

[femto]

Is your feature request related to a problem? Please describe. Hello, I found clicking mouse doesn't have any effect on slide, so must tell others before sending it to others to use keyboard, which is inconvenient.

Describe the solution you'd like Make mouse click , mouse wheel etc work

Describe alternatives you've considered

[mdrobisch]

Hi @femto

I came across the same question today. It is actually possible to have a PPT-like expereience with 2 options.

1. Use a plugin - https://github.com/Smile-SA/slidev-component-scroll - Only for wheel navigation
2. Use your own Global Layer - https://sli.dev/features/global-layers#global-layers - Find mine below

This is a extended version of my custom nav control layer using the idea of slidev-component-scroll. A big thank you for creating the plugin @tonai & @Smile-SA . You can now copy the code to custom-nav-controls.vue in your root project directory.

Functionality:

• The mouse wheel can be used to navigate through your slides.
• A double click will trigger a transition to the next slide

./custom-nav-controls.vue

// Licence: MIT. Please reference https://github.com/Smile-SA/slidev-component-scroll .

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { useNav } from '@slidev/client'
const { isPrintMode, next, prev } = useNav()
  
const scrollableOverflow = ["auto", "scroll", "overlay"];

function onWheel(event: WheelEvent) {
  if (isPrintMode.value) {
    return;
  }

  let element: HTMLElement | null = event.target as HTMLElement;
  let scrollable = false;
  do {
    scrollable =
      element.scrollHeight > element.clientHeight &&
      scrollableOverflow.includes(window.getComputedStyle(element).overflowY);
    element = element.parentElement;
  } while (!scrollable && element);

  if (!scrollable) {
    if (event.deltaY > 0) {
      next();
    } else {
      prev();
    }
  }
}


function onDblClick(event: MouseEvent) {
    next();
}

onMounted(() => {
  window.addEventListener("wheel", onWheel, { passive: true });
  window.addEventListener("dblclick", onDblClick);
});

onUnmounted(() => {
  window.removeEventListener("wheel", onWheel);
  window.removeEventListener("dblclick", onDblClick);
});
</script>

<template></template>