Building a slide

Related links:

A slide is made up of a single html file and any assets the slide requires. Slides can be simple single page designs or they can support complex functionality and/or be made up of multiple subslides.

Unique Keys

All slides (disregarding the welcome slide) require unique keys, these are used to reference and track each slide and are taken from the slide's directory name. You can read more about choosing keys in the project file guide.

info

Although not compulsory, for ease of writing JS and slide-specific CSS, it has become standard practice to reference the slide's unique key as an ID in the wrapping article tag:

<article id="super_stats" class="">
	<!-- slide content -->
</article>

Markup

At LivePreso we endevour to keep our markup requirements such that content developers have the freedom to choose any frameworks or compilers they want. As long as the output conforms to our folder structure requirements, and your markup follows a few simple rules, you are free to use the editor you love, any frameworks you wish, and your favourite compilers to develop just how you like it.

A few rules to follow:

Cannot be wrapped in an html tag
Cannot contain body or head tags
Must be wrapped in an article tag
script tag to be placed outside of the article tag
All IDs must be unique across the whole deck
article ID highly recommended

warning

If making use of slide events, an article ID becomes compulsory.

Basic example:

<article id="example_slide" class="white-bg">
	<header>
		<h5 class="section-title">Digital transformation</h5>
	</header>

	<section class="page01 content">
		<h3 class="content__header">Why digital is awesome</h3>

		<section class="content__body charcoal-bg">
			<p class="body-text">All of the information you need to know</p>
		</section>
		<!-- EO content__body -->
	</section>
	<!-- EO page01 -->
</article>

info

Other than the compulsory article tag, you are not required to use the same tags as we have in our example. eg. if you want, a slide can be made up entirely of div tags, or even tables.

CSS requirements

To prevent slide styles leaking into the LivePreso app, it is compulsory to wrap all CSS with #slideshow. This ID belongs to the root of the Presenter, and wraps all SP content wherever it appears: both inside of the app, and outside of the app in Share Presos and Remote Presos.

note

If you are using our deck-gulp-tasks tools, the SCSS compilation task will automatically wrap your classes in #slideshow for you.

Presenter's structure:

<div
	class="slideshow"
	id="slideshow"
	style="width: 1024px; height: 768px; transform: scale(1, 1); top: 0px;"
>
	<div id="slideshow-slides" class="" style="display: block; opacity: 1;">
		<!-- previous slide -->
		<div class="presoSlide prev">
			<div class="presenter-content">
				<article id="welcome" class="title-slide">
					<!-- slide content -->
				</article>
			</div>
		</div>

		<!-- current slide -->
		<div class="presoSlide current swiper-slide-active editable">
			<div class="presenter-content">
				<article id="editable_introduction" class="editable-slide">
					<!-- slide content -->
				</article>
			</div>
		</div>

		<!-- next slide -->
		<div class="presoSlide next">
			<div class="presenter-content">
				<article id="LivePreso_introduction">
					<!-- slide content -->
				</article>
			</div>
		</div>
	</div>
</div>

`animation-complete` class

This class is added by the app to the affected slide's article tag whenever there is the need to jump to the end frame of a slide's animation, triggering a completely static version of the slide. This is primarily done when screenshotting slides (for both thumbnails and PDFs) so unless you have thumbnail or PDF specific requirements, you will find yourself targeting animation-complete more often than screenshot, screenshot-full or screenshot-thumbnail.

How it's presented in the affected slide:

<article id="slide_id'" class="animation-complete">
	<!-- slide contents -->
</article>

Referencing in CSS:

#slideshow article#slide_id.animation-complete {
  <!-- jump all animations to their final frame -->
}

Referencing with JS:

$("#slide_id").on("slideready", function () {
	if ($("#slide_id").hasClass("animation-complete")) {
		// Functionality when slide_id viewed in animation-complete mode
	} else {
		// Functionality when NOT viewed in animation-complete mode
	}
});

info

animation-complete can be added at any time, so you may wish to employ a mutation observer.

Example:

<article id="slide_id" class="">
	<!-- ... -->

	<section class="page01 content">
		<!-- ... -->

		<div class="asset"></div>
	</section>
</article>

#slideshow article#slide_id {
	.page01 {
		.asset {
			position: relative;
			top: -15px;
			opacity: 0;
			-webkit-transition: top 500ms ease-out, opacity 500ms ease-out;
			-moz-transition: top 500ms ease-out, opacity 500ms ease-out;
			transition: top 500ms ease-out, opacity 500ms ease-out;
		}

		&.currentpage {
			.asset {
				top: 0px;
				opacity: 1;
			}
		}
	}

	&.animation-complete {
		.page01 {
			.asset {
				top: 0px;
				opacity: 1;
				-webkit-transition: none !important;
				-moz-transition: none !important;
				transition: none !important;
			}
		}
	}
}

Script Tag

One script tag can be added per slide after the closing article tag. It feels a little strange adding a script tag without any wrapping HTML, however, this is all resolved when the slides are wrapped by LivePreso's Presenter module.

Use this script tag to run any slide specific code you require, including (but not limited to) calling any functions and variables you may have already defined in the deck's common JS.

As you'll learn in the slide events section, three slides are loaded in at a time so you will need to further wrap your code in either .on("sliderendered") or .on("slideready") to ensure it is triggered at the desired time for the appropriate slide.

<script type="text/javascript">
	$("#slide_id").on("sliderendered", function () {
		// Set up functionality goes here
		// eg. inject data values

		$("#slide_id").on("slideready", function () {
			$("#slide_id .page01").addClass("currentpage");
			// The slide is on stage and ready to go
			// eg. add event listeners for interactive elements
		});
	});
</script>

warning

Do not include any variables or functions outside of these wrappers. Anything in the root of the script tag can negatively affect surrounding slides and the LivePreso application.

Slide events

Slide events are triggered when slides change state. These events can be used in order to perform animations and set up javascript.

Slides are loaded into the Presenter in sets of three; previous, current and next - with the current slide on stage, and previous and next slides offset to the left and right respectively.

A slide's current position dictates what event is fired (sliderendered and/or slideready). This allows you to trigger functions, styles and calculations as soon as the slide has rendered (but might still be off screen, ie. prev or next) as well as wait for it to finish animating to center stage (ie. current) before performing any required actions.

.on("sliderendered")

Called when the slide's DOM has been rendered on the page. This is similar to the jQuery ready. Once this event has been triggered it is safe for you to manipulate DOM elements in the slide. This is useful for triggering animations and setting up event listeners on elements in the slide.

$("#slide_id").on("sliderendered", function (e, done) {
	// Example: inject values from the context or feeds
	done();
});

.on("slideready")

Called when the slide has come to rest in center stage of the the Presenter as the current slide.

$("#slide_id").on("slideready", function (e, done) {
	// Example: trigger animations and add event listeners
	done();
});

info

When jumping straight to a specific slide (that wasn't already in the prev or next position) both sliderendered and slideready are fired for the new current slide. sliderendered is always fired before slideready.

.on("slideclosed")

Alias: slide:closed

Called when the slide is no longer in prev, next or current position and has been removed from the Presenter. Use slideclosed to clear timeouts and intervals when a slide is unloaded.

$("#slide_id").on("slide:closed", function () {
	// Example: clear timeouts and remove event listeners
});

done()

The done function delays completion of the sliderendered, slideready and showpage events. Its primary use is to prevent the screenshot server from taking a screenshot until all of the content is ready. It can also be used to prevent the user from navigating to the next slide before the content is ready.

done is passed through to the sliderendered, slideready and showpage functions by Bridge. In order to use it in your slide, declare it as an argument of the listener.

info

done is an optional argument, do not declare it unless required.

warning

Once done is declared, it MUST be called to be resolved. Otherwise the slide will get stuck until it times out.

Complete example

<article id="example_slide" class="basic-slide">
	<header>
		<h5 class="section-title">Digital transformation</h5>
	</header>

	<section class="page01 content white-bg">
		<section class="content__body bg-charcoal">
			<div class="content__header">
				<h3>Current activity and status</h3>
			</div>

			<p class="body-text">Current activity</p>
		</section>
		<!-- EO content__body -->
	</section>
	<!-- EO page01 -->
</article>

<script type="text/javascript">
	$("#slide_id").on("sliderendered", function () {
		$("#slide_id").on("slideready", function () {
			$("#slide_id .page01").addClass("currentpage");
		});
	});
</script>

Unique Keys​

Markup​

CSS requirements​

animation-complete class​

Script Tag​

Slide events​

.on("sliderendered")​

.on("slideready")​

.on("slideclosed")​

done()​

Complete example​

Unique Keys

Markup

CSS requirements

`animation-complete` class

Script Tag

Slide events

.on("sliderendered")

.on("slideready")

.on("slideclosed")

done()

Complete example