如何检测Slidy中的幻灯片变化？

Question

I use rmarkdown to produce a Slidy slide show using slidy_presentation . I would like to execute some Javascript when a slide is shown. In ioslides_presentation there's a slideenter event triggered when a page is shown (see Event when slide is displayed in ioslides? ), but I don't see anything like that in Slidy.

I can detect whether a particular slide is being shown (by looking at the class of its div ), but I don't know how to trigger the code to do that.

Is there some way to detect that a slide change is happening?

Answer 1

I researched a little and found an easy hack on how to detect which slide is currently shown:

---

Using a MutationObserver

In the following script we use a MutationObserver (see here and here ) to observe changes in the content of the title element. Having the title we can extract the integer part of it, which represents a slide number. In this example we just show an alert containing the text "Current Slide: " followed by the number we extracted.

Here ist the JavaScript snippet:

<script>
var target = document.querySelector('head > title');
var observer = new window.WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        var title   = mutation.target.textContent;
        var current = +title.toString().match(/\d+/g);
        alert('Current Slide: ' + current);
    });
});
observer.observe(target, { subtree: true, characterData: true, childList: true });
</script>

Since we don't want the snippet to be interpreted as the content of a slide itself, we include it via the YAML header. Check the reproducible example below, where header.html contains only the the javascript snippet above:

MRE:

---
title: "Untitled"
author: "Martin Schmelzer"
date: "18 3 2017"
output: 
  slidy_presentation:
    includes:
      in_header: header.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## R Markdown

Slide 2 (Title slide is #1!)

## Slide with Bullets

This is slide 3!

## Slide with R Output

...and number 4!

---

EDIT: Modified script for ioslides

If somehow needed in ioslides, you can modify the JavaScript snippet the following way:

<script>
$(document).ready(function() {
  var target = document.querySelector('slides');
  var observer = new window.WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if(mutation.target.getAttribute('class').indexOf('current') != -1 ) {
          alert(mutation.target.getAttribute('data-slide-num'));
      }
    });
  });
  observer.observe(target, { subtree: true, attributes: true});
});
</script>

In slidy each slide consists of its own div container. The approach in ioslides is different. Here we only have a couple of <slide> elements for the past, current, next and far-next slides. The current slide element is the one which has the class current . So we just search for that class inside the forEach loop and grab it's data-slide-num attribute.