• Copy (and rename) blank.html somewhere
• Also copy talk.css, theme.css
• Add Your Own Content
• Add talk-specific styling to talk.css

If you were using CSSS and would rather stay at it, run git checkout v1.0.0 and stay there.

• Almost all HTML syntax is the same! The same JS events are still fired. So, very little should break.
• slideshow.css is now inspire.css
• slideshow.js is now inspire.js
• You don't need to run JS to create a slideshow, it is created automatically.
• The SlideShow JS class is now Inspire
• The slideshow JS variable is now Inspire
• Presenter view will not be loaded unless there is at least one class="presenter-notes" item.
• The CSS Controls plugin is now gone. Use Mavo if you need this functionality.
• The CSS Snippets plugin is now gone. We will soon add a much better one, extracted based on the live demo script in https://github.com/leaverou/talks.
• Incrementable is no longer a plugin. Use the separate script from https://github.com/leaverou/incrementable.
• reusable.css has now been merged into the default theme, theme.css.
• data-import is now data-insert

await Inspire.importsLoaded;
// code to run after imports have loaded

Note that await needs to be inside an async function otherwise it will error. However, this could just be a self-executing async function.

await Inspire.importsLoaded;
await Inspire.plugins.loaded.PLUGIN_ID.loaded;
// code to run after the plugin with id PLUGIN_ID has loaded and executed

or:

await Inspire.loadPlugin(PLUGIN_ID);
// code to run after the plugin with id PLUGIN_ID has loaded and executed

The second example would load the plugin if it hasn't otherwise been loaded, but if it will never be loaded twice.

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id") {
		// Code to run
	}
});

or, via an event:

document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id") {
		// Code to run
	}
});

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id" && env.firstTime) {
		// Code to run
	}
});

or, via an event:

document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id" && evt.firstTime) {
		// Code to run
	}
});

or:

$("#slide-id").addEventListener("slidechange", evt => {
	// Code to run
}, {once: true});

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
	if (env.prevSlide.id === "slide-id") {
		// Code to run
	}
});

or, via an event:

document.addEventListener("slidechange", evt => {
	if (evt.prevSlide.id === "slide-id") {
		// Code to run
	}
});