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.
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.
Counting occurences will count up across all slides.
Plugin config:
counters: [
{
name: 'figcaption',
selector : 'figcaption'
}
]CSS:
figcaption:after {
content: " " attr(data-count-figcaption);
color: #42affa;
font-weight: bold;
}In and across lists and slides, these keep counting up.
A list
An other list
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;
}Resets must be parents of selectors.
A list
An other list
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;
}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.
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) ". " ;
}
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.