There's no way to set the spacing between dots

[olyerickson]

Our application is similar to the "Replace dots with text" example except our text is longer --- years or year spans (e.g. "2000-2002", "2003-2005", etc).

We figured out how to set the text of the dots based on the index (from the example) but can't figure out how to space the "dots" such that they don't overlap.

Do we need to hack the css???

Imaging trying to use nba_player_logo$name as the dot text source; how would you do that?

[yonicd]

That level of control would be beyond the scope of the package. I think that is more a question that would be best answered in the issues for slick.js

[yonicd]

You may be able to use the padding argument in slickR to manually set the width between the slides creating enough width for the dot text.

[yonicd]

closing. you can reopen/post again if you have any new questions on this subject.

[yonicd]

here is a more elegant solution to the problem

library(slickR)

my_text <- nba_player_logo$name[1:5]

my_custom_dots <- htmlwidgets::JS(
  sprintf("function(slick,index) {return '<div %s><p %s>' + dotObj[index] + '</p></div>';}",
          'style = "transform: rotate(20deg);"',
          'style = "font-size: 50%;"')
)

opts_dot_text <- settings(dots = TRUE,customPaging = my_custom_dots)

# Putting it all together in one slickR call
dot_script <- htmltools::tags$script(
  sprintf("var dotObj = %s", jsonlite::toJSON(my_text))
)

slick_dots_logo <- slickR(
  obj = nba_player_logo$uri[1:5],
  height = 100,
  width = "95%"
) + opts_dot_text

htmltools::browsable(htmltools::tagList(dot_script, slick_dots_logo))