I found a solution that works. My only concern is that it dabbles in Kentico code, meaning, if ever there's an update or migration or what-have-you, this custom snippet in the JavaScript might get overwrrtein.
In this file:
\KenticoCMS7\CMSWebParts\Viewers\Effects\ContentSlider_files\ContentSlider.js
I added the emphasized lines:
show:function(page){
slidernodes[this.id].each(function(item, index){
item.setOpacity(0);
item.setStyle('z-index','-10');
});
slidernodes[this.id][page].setOpacity(1);
slidernodes[this.id][page].setStyle('z-index','10');
// custom code part1of2 - DaveC 2014/02
// This, and code below, is for the homepage hero slider's navigation dots.
//
// Applies CSS class 'active-slide' to <a>'s parent element 'PagerPage'.
// <a> has a unique id whereas parent does not.
var linkId = "p_lt_ctl02_pageplaceholder_p_lt_ctl00_sliderHero_page_0";
var parentNode = $$("a#" + linkId)[0].parentNode;
parentNode.setAttribute('class', parentNode.getAttribute('class') + ' active-slide';);
// custom code part1of2 - ends
},
//turn page (fadeIn-fadeOut effect)
turnPage:function(page,isAuto){
// custom code part2of2 - DaveC 2014/02
// Removes CSS class 'active-slide' from ALL 'PagerPage' elements.
// Then adds class back to <a>'s parent 'PagerPage', based on 'page' param.
// See global.css for styling of .PagerPage.active-slide
var linkNodes = $$(".PagerPage");
for (var i=0;i<linkNodes.length; i++){
linkNodes]i[.setAttribute('class', 'PagerPage');// >:-( fix these square brackets!!
}
var linkId = "p_lt_ctl02_pageplaceholder_p_lt_ctl00_sliderHero_page_" + page;
var parentNode = $$("a#" + linkId)[0].parentNode;
parentNode.setAttribute('class', parentNode.getAttribute('class') ? parentNode.getAttribute('class') + ' active-slide' : 'active-slide';);
// custom code part2of2 - ends
if (isAuto)
etc...Then in my home.css I style .active-slide:
.main .Slider {
position: relative;
}
.main .Slider .Pager{
position: absolute;
bottom: 0;
right: 0;
z-index: 20;
text-align: right;
padding-right: 6px;
opacity: .7;
filter: alpha(opacity=70);
}
.main .Slider .Pager .PagerPage{
display: inline;
border: 1px solid white;
background-color: white;
font-size: 0pt;
display: inline-block;
margin: 8px 2px;
padding: 0;
color: white;
height: 4px;
width: 4px !important;
}
.main .Slider .Pager .PagerPage a{
display: block;
}
.main .Slider .Pager .PagerPage.active-slide{
background-color: #888;
border: 1px solid #888;
-webkit-transition: background .1s;
-moz-transition: background .1s;
-o-transition: background .1s;
-transition: background .1s;
-webkit-transition: border .1s;
-moz-transition: border .1s;
-o-transition: border .1s;
-transition: border .1s;
}
.main .Slider .Pager .Control{
display: none !important;
}(This block of CSS also incidentally contains my code for turning the pager results into navigation dots that float in the lower right corner of the slides. It also turns off the 'Start' control:
