CounterAct

A counter for Reveal.js

Why?

Reveal.js optimises the performance of presentations by hiding slides that are more than a few steps in the future.

As per the CSS specification, CSS counters simply don’t work in slides that have display: none.

How?

CounterAct goes around this limitation by using data-attributes on the elements that you want to count.

Similar to CSS counters, CounterAct lets you define counters. This way, you can have nice numbers in your presentation again.

Example

Counting occurences

Counting occurences will count up across all slides.

This is figcaption number
This is figcaption number

Plugin config:

counters: [
	{
		name: 'figcaption',
		selector : 'figcaption'
	}
]

CSS:

figcaption:after {
	content: " " attr(data-count-figcaption);
	color: #42affa;
	font-weight: bold;
}

Counting in lists

In and across lists and slides, these keep counting up.

A list

  1. List item
  2. List item

An other list

  1. List item
  2. List item

Plugin config:

counters: [
	{
		name: 'mylist',
		selector : 'ol.list li'
	}
]

CSS:

ol.list {
	list-style: none;
}
ol.list li:before {
	content: attr(data-count-mylist) ". " ;
	color: #42affa;
}

Resetting counters

Resets must be parents of selectors.

A list

  1. List item
  2. List item

An other list

  1. List item
  2. List item

Plugin config:

counters: [
	{
		name: 'stoplist',
		selector : 'ol.stoplist li',
		reset : 'ol.stoplist'
	}
]

CSS:

ol.stoplist {
	list-style: none;
}
ol.stoplist li:before {
	content: attr(data-count-stoplist) ". " ;
	color: #42affa;
}

Incrementing with other elements

This h4 is counted

Plugin config:

counters: [
	{
		name: 'mainnumber',
		increment: '.slides > section.countme',
		selector : 'h4.countme'
	}
]

CSS:

h4[data-count-mainnumber]:before {
	content: attr(data-count-mainnumber) ". ";
	color: #42affa;
}

Specifying the data-attribute on the H4, instead of just the .countme class, makes sure that you target the H4's where the counters are added.

Increments must be parents of selectors and children of resets.

This h4 is also counted

Combine increment and reset

This h4 has two counters

Plugin config:

counters: [
	{
		name: 'mainnumber',
		increment: '.slides > section.countme',
		selector : 'h4.countme'
	},
	{
		name: 'subnumber',
		increment: '.slides > section section',
		selector : 'h4.countme',
		reset: '.slides > section'
	}
]

CSS:

h4[data-count-mainnumber]:before {
	content: attr(data-count-mainnumber) ". ";
	color: #42affa;
}
section h4[data-count-mainnumber][data-count-subnumber]:before {
	content: attr(data-count-mainnumber) "." attr(data-count-subnumber) ". " ;
}

And this one as well

By combining increments and resets, you can count things like vertical sections, and sections inside them. If sections are hidden with data-visibility, they will not increment or add to the count of selectors in them.

Happy counting!