The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

slickR Basics

Jonathan Sidi

2022-12-21

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 <- settings(
  dots = TRUE,
  initialSlide = 0,
  slidesToShow = 5, 
  slidesToScroll = 5, 
  focusOnSelect = TRUE)

slickR(obj = nba_player_logo$uri,height = 100, width = "95%") + 
  opts

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


cP1 <- htmlwidgets::JS("function(slick,index) {
                            return '<a>'+(index+1)+'</a>';
                       }")

opts_dot_number <- settings(
    initialSlide = 0,
    slidesToShow = 5,
    slidesToScroll = 5,
    focusOnSelect = TRUE,
    dots = TRUE,
    customPaging = cP1
    )

slick_dots <- slickR(
  obj = nba_player_logo$uri,
  height = 100,
  width = "95%"
)

slick_dots + opts_dot_number

Replace dots with Images


cP2 <- JS("function(slick,index) {
          return '<a><img src= ' + dotObj[index] + '  width=100% height=100%></a>';
          }")

opts_dot_logo <- 
  settings(
    initialSlide = 0,
    slidesToShow = 5,
    slidesToScroll = 5,
    focusOnSelect = TRUE,
    dots = TRUE,
    customPaging = cP2
  )

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

slick_dots_logo <- slickR(
  obj = nba_player_logo$uri,
  height = 100,
  width = "95%"
) + opts_dot_logo

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

Stacking Carousels

You can stack carousels one on top of the other with the %stack% operator


slick_up_stack <- slickR(obj = nba_player_logo$uri, height = 100, width = "95%")

slick_down_stack <- slickR(obj = nba_player_logo$uri, height = 100, width = "95%")

slick_up_stack %stack% slick_down_stack

Synching Carousels

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

slick_up_synch <- slickR(obj = nba_player_logo$uri, height = 100, width = "95%")

slick_down_synch <- slickR(obj = nba_player_logo$uri, height = 100, width = "95%")

slick_up_synch %synch% slick_down_synch

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 = nba_player_logo$uri[1:2], height = 100, width = "95%") %synch%
( slickR(nba_player_logo$name[1:2], slideType = 'p') + settings(arrows = FALSE) )

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.