slickR Basics

Jonathan Sidi

2019-10-01

library(htmlwidgets)
library(slickR)

Grouped Images

There are players on each team, so lets group the starting five together and have each dot correspond with a team:


opts <- list(initialSlide = 0, 
     slidesToShow = 5, 
     slidesToScroll = 5,
     focusOnSelect = TRUE, 
     dots = TRUE)

slickR(nba_player_logo$uri,
       slideId = 'ex4',
       slickOpts = opts,
       height = 100, 
       width = "95%")

Replacing the dots

Sometimes the dots won’t be informative enough so we can switch them with an HTML object, such as text or other images. We can pass to the customPaging argument javascript code using the htmlwidgets::JS function.

Replace dots with text

Replace dots with Images

Synching Carousels

There are instances when you have many outputs at once and do not want to go through all, so you can combine two carousels one for viewing and one for searching.

opts <- list(
  # 'up' options
    list(slidesToShow = 1, slidesToScroll = 1),
  # 'down' options
    list(dots = FALSE, 
         slidesToScroll = 1, 
         slidesToShow = 5,
         centerMode = TRUE, 
         focusOnSelect = TRUE)
)

synch_map <- expand.grid(list('up','down'),stringsAsFactors = FALSE)

slickR(rep(nba_player_logo$uri,2),
       slideIdx = replicate(2,seq_along(nba_player_logo$uri),simplify = FALSE),
       slideId =  c('up','down'),
       objLinks = list(up = nba_player_logo$player_home,down = NULL),
       synchSlides = synch_map,
       slideType = rep('img',2),
       slickOpts = opts,
       height = 100, 
       width = "90%")
#> Warning: The `synchSlides` argument of `slickR()` is deprecated as of slickR 0.5.0.
#> This warning is displayed once per session.
#> Call `lifecycle::last_warnings()` to see where this warning was generated.







Adding a Caption to Image

You can add a caption to an image by synching two carousels, where the upper is the content (e.g. image) and the bottom is the caption (p)


slickR(
  obj         = c(nba_player_logo$uri[1:2],
                  glue::glue('<p>{nba_player_logo$name[1:2]}</p>')),
  slideType   = c('img','p'),
  slideId     = c('img','cap'),
  slideIdx    = list(c(1,2),c(3,4)),
  synchSlides = expand.grid(list('img','cap'),stringsAsFactors = FALSE),
  height      = 100,
  slickOpts   = list(list(dots=FALSE),list(dots=TRUE,arrows=FALSE))
)