When replacing slickR dots with text labels, how to highlight the current label?

Question

I’ve been exploring the capabilities of the R package slickR with an eye to presenting a large number of related graphs in a way that makes it easy to flip through them to see patterns. I’ve been able to figure out how to do most of the things I want to do with it, but there is one thing that I’d love to do but have not been able to figure out:

In the documentation for slickR, there are handy instructions for replacing the dots with text: https://cran.r-project.org/web/packages/slickR/vignettes/basics.html (“Replace dots with text”). However, unlike the dots, the text does not change format to show you which item you’re on – so you can use the text labels as hyperlinks to jump to an image that’s somewhere in the middle of the series, but once you’re in, they don’t give you information about where you are in the series. That greatly limits their usefulness, so I would like to figure out how to make the text label for the image you are currently looking at look different from the others.

Unfortunately, I do not have prior experience with JavaScript, htmlwidgets, or htmltools.

Based on the examples in the slickR documentation, I was able to figure out how to get parameters and vectors that I had defined in R into the widget and how to modify the customPaging function.

What I’m missing is an understanding of how slickR “knows” which dot (or text label) it is currently on so that I can adjust the function to do something different with the current text label as opposed to the others. I see that it has some built-in parameters, “index” and “slick”, that are called by the JS function in the examples.

Is there a parameter that identifies the dot or label that you are currently on?

If there were such a parameter (let’s suppose it is named “current_dot” and takes values of “TRUE” and “FALSE”), here is the code I’m imagining would achieve my goal:

color_setting <- c('"color:green"', '"color:black"')  # Alternative styles for the 
# current label (green) vs the other labels (black)

cP1 <- htmlwidgets::JS("function(slick,index,current_dot) {       
                            if (current_dot == TRUE){
                                  color = color_setting[0]; 
                            }else{
                                  color = color_setting[1];
                            }
                            return '<a style=' + color + '>' + (index) + '</a>';   
                       }")   # Function setting up the text labels to be equal to the 
# index number, with the color determined based on whether it is the current label or 
# not.  Here I am assuming that there is a variable called "current_dot" that
# identifies the current label and that this function isn't static - i.e., that it 
# will be re-run if you advance to the next image. 

s2 <- htmltools::tags$script(
  sprintf("var color_setting = %s", jsonlite::toJSON(color_setting))
)  # Get my variable color_setting ready to go into the html widget

images <- slickR(
  obj = nba_player_logo$uri
) + 
  settings(
    dots = TRUE,
    customPaging = cP1
    ) # Set up the slide deck

htmltools::browsable(htmltools::tagList(s2, images)) # Combine the slide deck with my 
# color_setting variable

Is there a variable that identifies the current dot or label? If so, will this approach work? If not, what other approach would you suggest? I will be most grateful for any leads!