# slickR Basics

#### Jonathan Sidi

#### 2022-12-21

    library(htmlwidgets)
    library(slickR)

## Simple carousel

Let’s start easy: show the team logos one at a time

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

Let’s add dots with the `settings` function

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

There are many more settings you can define, such as `autoplay`. For all the settings go to slick.js homepage

    slickR(obj = nba_player_logo$uri,height = 100, width = "95%") +
      settings(dots = TRUE, autoplay = TRUE)

## 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

## Adding Links

You can add links to each element in the slide using the `objLinks` parameter. The links are by default set to `target = '_blank'`, so they will open a new window/tab on click.

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

    slick_link + 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) )