Hardcoded subslides

Contained within a slide, subslides are DOM elements that tend to start off-stage, and are triggered by the user when wanting to drill down for more information while staying within the same slide. Their key comes from their DOM ID. By convention, they're simply numbered: subslide-1, subslide-2, etc.

<div class="subslide" id="subslide-1"><!--- ... ---></div>
<div class="subslide" id="subslide-2"><!--- ... ---></div>

info

As soon as a slide contains a subslide, the "parent" slide must also become a subslide. For example:

Simple slide:

<article>
	<header></header>
	<section class="content">
		<!-- Slide content -->
	</section>
</article>

Slide with subslides:

<article>
	<header></header>
	<section id="subslide-1" class="subslide page01 content">
		<!-- Subslide-1 content -->
	</section>
	<section id="subslide-2" class="subslide page02 content">
		<!-- Subslide-2 content -->
	</section>
</article>

See the registration and animation section for information on how to navigate between subslides.

Footer navigation

Even though subslides can be triggered from anywhere within a slide, the LivePreso standard treatment is to reserve the bottom right corner of the slide for up and down navigational arrows. Following this standard not only results in faster slide development, but it also has the advantage of setting a clear presentation language for users navigating your content.

tip

We recommend adding labels to your subslide navigation as it draws user attention and introduces the upcoming content.

note

It is also possible to allow for continuous looping between your subslides. eg. Pressing next while on the last subslide can trigger a transition back to the first.

Swipe navigation

Touch device interaction (eg. iPad use) has been programmed to trigger subslides on a vertical swipe.

warning

It is for this reason that we recommend not diverging too far from the standard up and down transitions if applying custom transitions to your subslides. Feel free to experiment, however keep swipe navigation in mind and make sure to test your content on these devices to ensure the transition still feels natural in that scenario.

Custom navigation

Having pre-established standards does not necessarily mean limiting yourself to these will guarantee the best slide design for each individual story you wish to tell. However, retaining existing standards where possible helps cement in your users minds what functionality is available and how to easily trigger it.

A good example would be offering secondary interactivity allowing a user to click on a product to trigger the relevant subslide, while still retaining footer up and down navigation. In this example, even if the user always chooses the product buttons, retaining the footer navigation acts as a cue to the users that subslides are present.

Custom transitions

LivePreso Bridge gives you the ability to override our standard up and down subslide transitions to better match your content's presentation language and style.

Some examples of when you might want to do this:

• Change easing and transition speed
• Change how/if subslides overlap on navigation
• Vary transition-in vs. transition-out animations
• Implement unique transition styles for different slide types etc.

For in instructions on implementing these custom transitions see the declaring transition behaviours section below.

warning

LivePreso slides always transition horizontally (left to right) - this is also reflected in our swipe navigation for touch devices. It is for this reason that we recommend steering clear of using horizontal animations if applying custom transitions to your subslides. Developing subslides to transition left and right, while possible, if not presented carefully can easily result in confusion between slides and subslides.

Example markup

important

This example assumes you are using the Starting Point deck, this deck includes our custom Slide and Subslides js classes for handling the registration, navigation & animation of subslides.

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

	<section id="subslide-1" class="page01 subslide content white-base">
		<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 subslide-1 -->

	<section id="subslide-2" class="page02 subslide content white-base">
		<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 subslide-2 -->
</article>

<script type="text/javascript">
	new Slide({});
</script>

Registration, navigation & animation

This section of the documentation is currently a work in progress. If you are using the supplied Starting Point deck and follow the existing subslide patterns found in the deck, their registration and animation will be handled for you. If you wish to develop your own framework and required further direction, please contact your LivePreso content developer trainer.

Below is some handy information on how to leverage the existing code found in the Starting Point deck to customise your content.

Manually trigger a subslide

In order to manually trigger a subslide, simply hook any event up to the Bridge.Sub.show() function:

src = document.getElementById("button");
src.onclick(Bridge.Sub.show("subslide-1"));

You can use 'next' and 'prev' as keynames here, too.

Declare transition behaviours

The default transition behaviours are currently set by the content using the following logic:

var subslide = Bridge.Sub.get("subslide-1");
var trans_funcs = {
	in: function (other) {
		/* ... */
	},
	out: function (other) {
		/* ... */
	},
};
subslide.transition(trans_funcs);

This allows for increasing the animation time, toggling classes for multi-stage animations, and more advanced usages. The value of this in either function is the Subslide being transitioned. Each function is also passed an argument other, which is the Subslide replacing, or being replaced by, in the current transition.

You will find similar code to what you see here in the Starting Point deck, simply expand or replace it to make it your own.