Created: 8 March 2019
Updated: $Date: 2019/03/13 14:26:01 $ by $Author: bbos $
Slides can be elements with
class=slide, but can
also just start with an
in the old Slidemaker.
B6+ handles the keyboard, mouse and gesture navigation.
Below is the manual for the functionality provided by b6+.js. The script will work without any style sheet (unlike Shower), but a style sheet may provide additional features. See the The W3C slide style (b6+) for the functions provided by the style sheet used by this manual.
The b6+.js script works with document in which slides are marked up in one of two ways:
The script offers the following functions:
Different styles can be applied in slide mode and in index mode. The media attribute determines what each style sheet is for.
<link rel="stylesheet" media="screen" href=...>or
<link rel="stylesheet" media="(overflow-block: optional-paged)" href=...>or
<style media="(overflow-block: optional-paged)">…</style>. (‘projection’ is an old, but now deprecated media type.)
B6+.js implements a subset of Shower's functionality:
<bodyin slide mode
class=activeon the currently displayed slide
class=visitedon slides that have been displayed
class=activeon incrementally displayed elements (
Slides can either have a fixed aspect ratio or adapt to the
screen or projector. If the
<body> element has
a fixed width and height (in em, px, or any other unit), b6+ will
linearly scale it up or down to fit the projector.
Advantage is that the layout is independent of the projector: if the content of a slide fits during testing, it fits in the projection as well. Another advantage is that absolute positioning things on a slide is easier, because you know the exact size of the slide in the chosen units.
Disadvantage is that the chosen aspect ratio may not match the projector and there will be some unused space either on the sides or above and below the slide.
E.g., if you set the
<body> to 40em by 30em
(a 4:3 aspect ratio), but the projector is widescreen (16:9),
there will be black bands on the left and right.
Note that it is the size of the body that counts. Setting a width and height on elements with a class of ‘slide’ does not trigger the scaling.
Any element with a
class=progress will get a style attribute
‘width’ with a value between 0 and 100% corresponding to the
advancement of the slide show: When there are m slides
and slide n is displayed, the value is n/m *
There may be any number of such elements.
That is all the script does. It is up to the style sheet to set other properties (height, location, color…) The b6+.css style sheet makes the progress element into a thin red line along the top of the slide.
If there are elements with
content will be set to the number of the slide that is currently
displayed, as a decimal number.
There may be any number of such elements. All of them will have the same content.
It is up to the style sheet to style and position such elements. The b6+.css style does nothing with them. (It uses CSS counters to number slides instead.)
Any elements with
class=numslides will have their
content replaced by the total number of slides, as a decimal
E.g., this slide show has ▶??◀ slides.
There may any number of such elements.
It is up to the style sheet to style and postion such elements. The b6+.css style does nothing with such elements.
If an element has
class=overlay, its children will be displayed one
at a time. The keys (space, arrow keys), clicks or gestures that
normally advance to the next slide instead cause the next child to
be displayed, until all of them are visible, after which the
navigation continues to the next slide. Example:
Incremental display can also be done by
class=next on all elements that should be
unveiled one by one. In this case they don't have to be children
of the same parent. Example
class=next, is always visible.
Unlike children of
class=next remain visible, even if you visit the
same slide again.