Let’s start easy: show the team logos one at a time
slickR(obj = nba_team_logo$uri, height = 100, width = "95%", slideId = 'ex1')
#> Warning: The `slickOpts` 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.
Let’s remove the dots with the slickOpts argument
slickR(obj = nba_team_logo$uri,
slideId = 'ex2',
slickOpts = list(dots = FALSE),
height = 100,
width = "95%")
There are many more settings you can define, such as autoplay
. For all the settings go to slick.js homepage
There are players on each team, so lets group the starting five together and have each dot correspond with a team:
You can add links to each element in the slide using the objLinks
parameter.
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.
cP1 <- htmlwidgets::JS("function(slick,index) {
return '<a>'+(index+1)+'</a>';
}")
opts <- list(
initialSlide = 0,
slidesToShow = 5,
slidesToScroll = 5,
focusOnSelect = TRUE,
dots = TRUE,
customPaging = cP1
)
slickR(
obj = nba_player_logo$uri,
dotObj = nba_team_logo$uri,
slideId = 'ex6',
slickOpts = opts,
height = 100,
width = "95%"
)
cP2 <- JS("function(slick,index) {
return '<a><img src= ' + dotObj[index] + ' width=100% height=100%></a>';
}")
opts <-
list(
initialSlide = 0,
slidesToShow = 5,
slidesToScroll = 5,
focusOnSelect = TRUE,
dots = TRUE,
customPaging = cP2
)
slick <- slickR(
obj = nba_player_logo$uri,
dotObj = nba_team_logo$uri,
slideId = 'ex7',
slickOpts = opts,
height = 100,
width = "95%"
)
# Putting it all together in one slickR call
s2 <- htmltools::tags$script(
sprintf("var dotObj = %s", jsonlite::toJSON(nba_team_logo$uri))
)
htmltools::browsable(htmltools::tagList(s2, slick))
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.
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))
)