Read about this demo at rostrum.blog2020/02/05/slickr/.

# This code prepares the dataset to be used in the carousel

# Packages ----------------------------------------------------------------

library(dplyr)

# Table of Pokemon --------------------------------------------------------

# Table of first gen Pokemon with numbers, names, link to Bulbapedia and source
# for sprite images

pkmn <- tibble(
  ndex_num = 1:151,
  ndex_char = c(
    "001", "002", "003", "004", "005", "006", "007", "008", "009", "010",
    "011", "012", "013", "014", "015", "016", "017", "018", "019", "020",
    "021", "022", "023", "024", "025", "026", "027", "028", "029", "030",
    "031", "032", "033", "034", "035", "036", "037", "038", "039", "040",
    "041", "042", "043", "044", "045", "046", "047", "048", "049", "050",
    "051", "052", "053", "054", "055", "056", "057", "058", "059", "060",
    "061", "062", "063", "064", "065", "066", "067", "068", "069", "070",
    "071", "072", "073", "074", "075", "076", "077", "078", "079", "080",
    "081", "082", "083", "084", "085", "086", "087", "088", "089", "090",
    "091", "092", "093", "094", "095", "096", "097", "098", "099", "100",
    "101", "102", "103", "104", "105", "106", "107", "108", "109", "110",
    "111", "112", "113", "114", "115", "116", "117", "118", "119", "120",
    "121", "122", "123", "124", "125", "126", "127", "128", "129", "130",
    "131", "132", "133", "134", "135", "136", "137", "138", "139", "140",
    "141", "142", "143", "144", "145", "146", "147", "148", "149", "150",
    "151"
  ),
  name = c(
    "Bulbasaur", "Ivysaur", "Venusaur", "Charmander", "Charmeleon",
    "Charizard", "Squirtle", "Wartortle", "Blastoise", "Caterpie", "Metapod",
    "Butterfree", "Weedle", "Kakuna", "Beedrill", "Pidgey", "Pidgeotto",
    "Pidgeot", "Rattata", "Raticate", "Spearow", "Fearow", "Ekans", "Arbok",
    "Pikachu", "Raichu", "Sandshrew", "Sandslash", "Nidoran♀", "Nidorina",
    "Nidoqueen", "Nidoran♂", "Nidorino", "Nidoking", "Clefairy", "Clefable",
    "Vulpix", "Ninetales", "Jigglypuff", "Wigglytuff", "Zubat", "Golbat",
    "Oddish", "Gloom", "Vileplume", "Paras", "Parasect", "Venonat",
    "Venomoth", "Diglett", "Dugtrio", "Meowth", "Persian", "Psyduck",
    "Golduck", "Mankey", "Primeape", "Growlithe", "Arcanine", "Poliwag",
    "Poliwhirl", "Poliwrath", "Abra", "Kadabra", "Alakazam", "Machop",
    "Machoke", "Machamp", "Bellsprout", "Weepinbell", "Victreebel",
    "Tentacool", "Tentacruel", "Geodude", "Graveler", "Golem", "Ponyta",
    "Rapidash", "Slowpoke", "Slowbro", "Magnemite", "Magneton", "Farfetch'd",
    "Doduo", "Dodrio", "Seel", "Dewgong", "Grimer", "Muk", "Shellder",
    "Cloyster", "Gastly", "Haunter", "Gengar", "Onix", "Drowzee", "Hypno",
    "Krabby", "Kingler", "Voltorb", "Electrode", "Exeggcute", "Exeggutor",
    "Cubone", "Marowak", "Hitmonlee", "Hitmonchan", "Lickitung", "Koffing",
    "Weezing", "Rhyhorn", "Rhydon", "Chansey", "Tangela", "Kangaskhan",
    "Horsea", "Seadra", "Goldeen", "Seaking", "Staryu", "Starmie", "Mr. Mime",
    "Scyther", "Jynx", "Electabuzz", "Magmar", "Pinsir", "Tauros", "Magikarp",
    "Gyarados", "Lapras", "Ditto", "Eevee", "Vaporeon", "Jolteon", "Flareon",
    "Porygon", "Omanyte", "Omastar", "Kabuto", "Kabutops", "Aerodactyl",
    "Snorlax", "Articuno", "Zapdos", "Moltres", "Dratini", "Dragonair",
    "Dragonite", "Mewtwo", "Mew"
  )
) %>% 
  mutate(
    url = paste0("https://bulbapedia.bulbagarden.net/wiki/", name, "_(Pok%C3%A9mon)"),
    sprite_front_src = paste0("data/sprites/front/", ndex_num, ".png"),
    sprite_back_src = paste0("data/sprites/back/", ndex_num, ".png"),
  )

# Organise evolutionary chains --------------------------------------------

# Within each 'page' I want to show each evolutionary chain. This means I'll
# be showing three Pokemon maximum, since this is the longest chain (e.g. 
# Bulbasaur, Ivysaur, Venusaur). But some chains are length one or two, so
# I'm gong to introduce a 'blank' to pad these 'pages'.

# Blank for padding evolutionary chains of length < 3
blank <- tibble(
  ndex_num = NA_integer_,
  ndex_char = "",
  name = "",
  url = NA_character_,
  sprite_src = NA_character_
)

# Create second version of the main data set where blanks are introduced to pad
# each evolutionary chain to length 3.
pkmn2 <- bind_rows(
  slice(pkmn, 1:3),  # Bulbasaur, Ivysaur, Venusaur
  slice(pkmn, 4:6),
  slice(pkmn, 7:9),
  slice(pkmn, 10:12),
  slice(pkmn, 13:15),
  slice(pkmn, 16:18),
  slice(pkmn, 19:20), blank,  # Rattata, Raticate, [blank]
  slice(pkmn, 21:22), blank,
  slice(pkmn, 23:24), blank,
  slice(pkmn, 25:26), blank,
  slice(pkmn, 27:28), blank,
  slice(pkmn, 29:31),
  slice(pkmn, 32:34),
  slice(pkmn, 35:36), blank,
  slice(pkmn, 37:38), blank,
  slice(pkmn, 39:40), blank,
  slice(pkmn, 41:42), blank,
  slice(pkmn, 43:45),
  slice(pkmn, 46:47), blank,
  slice(pkmn, 48:49), blank,
  slice(pkmn, 50:51), blank,
  slice(pkmn, 52:53), blank,
  slice(pkmn, 54:55), blank,
  slice(pkmn, 56:57), blank,
  slice(pkmn, 58:59), blank,
  slice(pkmn, 60:62),
  slice(pkmn, 63:65),
  slice(pkmn, 66:68),
  slice(pkmn, 69:71),
  slice(pkmn, 72:73), blank,
  slice(pkmn, 74:76),
  slice(pkmn, 77:78), blank,
  slice(pkmn, 79:80), blank,
  slice(pkmn, 81:82), blank,
  slice(pkmn, 83), blank, blank,  # Farfetch'd, [blank], [blank]
  slice(pkmn, 84:85), blank,
  slice(pkmn, 86:87), blank,
  slice(pkmn, 88:89), blank,
  slice(pkmn, 90:91), blank,
  slice(pkmn, 92:94),
  slice(pkmn, 95), blank, blank,
  slice(pkmn, 96:97), blank,
  slice(pkmn, 98:99), blank,
  slice(pkmn, 100:101), blank,
  slice(pkmn, 102:103), blank,
  slice(pkmn, 104:105), blank,
  slice(pkmn, 106), blank, blank,
  slice(pkmn, 107), blank, blank,
  slice(pkmn, 108), blank, blank,
  slice(pkmn, 109:110), blank,
  slice(pkmn, 111:112), blank,
  slice(pkmn, 113), blank, blank,
  slice(pkmn, 114), blank, blank,
  slice(pkmn, 115), blank, blank,
  slice(pkmn, 116:117), blank,
  slice(pkmn, 118:119), blank,
  slice(pkmn, 120:121), blank,
  slice(pkmn, 122), blank, blank,
  slice(pkmn, 123), blank, blank,
  slice(pkmn, 124), blank, blank,
  slice(pkmn, 125), blank, blank,
  slice(pkmn, 126), blank, blank,
  slice(pkmn, 127), blank, blank,
  slice(pkmn, 128), blank, blank,
  slice(pkmn, 129:130), blank,
  slice(pkmn, 131), blank, blank,
  slice(pkmn, 132), blank, blank,
  slice(pkmn, 133:134), blank, 
  slice(pkmn, c(133, 135)), blank, 
  slice(pkmn, c(133, 136)), blank, 
  slice(pkmn, 137), blank, blank,
  slice(pkmn, 138:139), blank,
  slice(pkmn, 140:141), blank,
  slice(pkmn, 142), blank, blank,
  slice(pkmn, 143), blank, blank,
  slice(pkmn, 144), blank, blank,
  slice(pkmn, 145), blank, blank,
  slice(pkmn, 146), blank, blank,
  slice(pkmn, 147:149),
  slice(pkmn, 150), blank, blank,
  slice(pkmn, 151), blank, blank
)

# Numbers for the first evolution in each chain. The front-sprite will be used
# as 'page dots' so users can jumo to the evolutionary chain starting with that
# Pokemon. 
start_evo_sprite <- pkmn[c(
  1, 4, 7, 10, 13, 16, 19, 21, 23, 25, 27, 29, 32, 35, 37, 39, 41, 43, 46, 48,
  50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 74, 77, 79, 81, 83, 84, 86, 88, 90, 92,
  95, 96, 98, 100, 102, 104, 106, 107, 108, 109, 111, 113, 114, 115, 116, 118,
  120, 122, 123, 124, 125, 126, 127, 128, 129, 131, 132, 133, 133, 133, 137, 138,
  140, 142, 143, 144, 145, 146, 147, 150, 151
), "sprite_front_src"][[1]]
# This code creates the carousel

# Packages ----------------------------------------------------------------

library(htmlwidgets)
library(slickR)

# Set up carousel indivdual carousels  ------------------------------------

# Set variables
my_height <- 200
my_width <- "75%"
my_slides_show <- 3
my_slides_scroll <- 3

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

# Set common settings
my_settings <- settings(
    autoplay = TRUE, arrows = FALSE,
    slidesToShow = my_slides_show, 
    slidesToScroll = my_slides_scroll
  )

# Carousel with front-facing sprites
front_carousel <- slickR(
  obj = pkmn2$sprite_front_src,
  objLinks = pkmn2$url,
  height = my_height, width = my_width
) + my_settings


# Carousel with back-facing sprites
back_carousel <- slickR(
  obj = pkmn2$sprite_back_src,
  objLinks = pkmn2$url,
  height = my_height, width = my_width
) + my_settings

# Carousel with National Dex numbers and names
names_carousel <- slickR(
  paste(pkmn2$ndex_char, pkmn2$name),
  slideType = 'p'
) + 
  settings(
    autoplay = TRUE, arrows = TRUE,
    slidesToShow = my_slides_show, 
    slidesToScroll = my_slides_scroll,
    dots = TRUE, customPaging = my_cp
  )

# Generate the carousel ---------------------------------------------------

# Synchronise the carousels
carousel <-
  front_carousel %synch%
  back_carousel %synch%
  names_carousel 

# Dots are sprites
my_sprite_dots <- htmltools::tags$script(
  sprintf("var dotObj = %s", jsonlite::toJSON(start_evo_sprite))
)

# Apply sprite dots
htmltools::browsable(
  htmltools::tagList(my_sprite_dots, carousel)
)

How to

Data

Development

Click for R session information

## [1] "Last updated 2020-02-08"
## ─ Session info ───────────────────────────────────────────────────────────────
##  setting  value                       
##  version  R version 3.6.1 (2019-07-05)
##  os       macOS Sierra 10.12.6        
##  system   x86_64, darwin15.6.0        
##  ui       X11                         
##  language (EN)                        
##  collate  en_GB.UTF-8                 
##  ctype    en_GB.UTF-8                 
##  tz       Europe/London               
##  date     2020-02-08                  
## 
## ─ Packages ───────────────────────────────────────────────────────────────────
##  package     * version date       lib
##  assertthat    0.2.1   2019-03-21 [1]
##  base64enc     0.1-3   2015-07-28 [1]
##  cli           2.0.1   2020-01-08 [1]
##  crayon        1.3.4   2017-09-16 [1]
##  digest        0.6.23  2019-11-23 [1]
##  dplyr       * 0.8.3   2019-07-04 [1]
##  evaluate      0.14    2019-05-28 [1]
##  fansi         0.4.1   2020-01-08 [1]
##  glue          1.3.1   2019-03-12 [1]
##  htmltools     0.4.0   2019-10-04 [1]
##  htmlwidgets * 1.5.1   2019-10-08 [1]
##  jsonlite      1.6.1   2020-02-02 [1]
##  knitr         1.26    2019-11-12 [1]
##  lifecycle     0.1.0   2019-08-01 [1]
##  magrittr      1.5     2014-11-22 [1]
##  pillar        1.4.3   2019-12-20 [1]
##  pkgconfig     2.0.3   2019-09-22 [1]
##  purrr         0.3.3   2019-10-18 [1]
##  R6            2.4.1   2019-11-12 [1]
##  Rcpp          1.0.3   2019-11-08 [1]
##  rlang         0.4.4   2020-01-28 [1]
##  rmarkdown     2.0     2019-12-12 [1]
##  sessioninfo   1.1.1   2018-11-05 [1]
##  slickR      * 0.4.9   2020-02-08 [1]
##  stringi       1.4.5   2020-01-11 [1]
##  stringr       1.4.0   2019-02-10 [1]
##  tibble        2.1.3   2019-06-06 [1]
##  tidyselect    0.2.5   2018-10-11 [1]
##  withr         2.1.2   2018-03-15 [1]
##  xfun          0.12    2020-01-13 [1]
##  xml2          1.2.2   2019-08-09 [1]
##  yaml          2.2.1   2020-02-01 [1]
##  source                                     
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.1)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  Github (metrumresearchgroup/slickR@105d48d)
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
##  CRAN (R 3.6.0)                             
## 
## [1] /Users/matt.dray/Library/R/3.6/library
## [2] /Library/Frameworks/R.framework/Versions/3.6/Resources/library