A Pokémon sprite carousel with {slickR}


February 5, 2020


You can make fun little scrolling ‘carousel’ type widgets in R with the {slickR} package. I’ve made an example that shows Pokémon sprites (above). Click the small sprites at the bottom to scroll the carousel to that Pokémon’s evolution chain; click the full-size sprites to go to that character’s Bulbapedia page.


I was browsing GitHub and the {slickR} package by Jonathan Sidi was suggested as a repo to explore.

{slickR} is an htmlwidget that generates carousels using the Slick JavaScript library by Ken Wheeler.

You’ve seen carousels before. They’re pretty ubiquitous for scrolling horizontally through images on websites. {slickR} provides a neat way of embedding these in R Markdown documents and Shiny apps. Plus, the elements in the carousel can be basically anything (iframes, plots, etc), not just images.


I followed the excellent guidance on the {slickR} site to set up a basic carousel featuring Pokémon sprites1 from the Pokémon Black and White games, which I collected via veekun.com.

I’ve embedded the demo at the top of this page, but you can visit it on a dedicated page or see its source. These are probably best viewed on a desktop machine.

In fact, it’s three carousels that are stacked and synchronised: one with the front sprite, one with the back sprite and one that shows the number and name of the Pokémon. Click a sprite to go to the relevant page on Bulbapedia, the Pokémon wiki.

I’ve also set each page to display three ’mon at a time and that each page will advance by three. This is so that I can display one Pokémon evolutionary chain per page, since the max chain length is three (e.g. Bulbasaur > Ivysaur > Venusaur). I added a blank spacer pad where a chain was shorter than three (e.g. Rattata > Raticate > BLANK, or Farfetch’d > BLANK > BLANK).

The pages auto-advance in the demo above, but can be advanced manually in the standalone version by clicking the directional arrows, or by using your arrow keys if the widget has been selected.

It’s also possible to jump to a specific evolutionary chain by using the page ‘dots’ underneath the carousel. Here, you can click one of the tiny sprites to jump to the page that contains the evolutionary chain that starts with that Pokémon.

Stop, let me off

I have a lot of ideas for how to use this package, but for more on {slickR} in the meantime, check out:


Session info
Last rendered: 2023-07-25 19:28:19 BST
R version 4.3.1 (2023-06-16)
Platform: aarch64-apple-darwin20 (64-bit)
Running under: macOS Ventura 13.2.1

Matrix products: default
BLAS:   /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/lib/libRblas.0.dylib 
LAPACK: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/lib/libRlapack.dylib;  LAPACK version 3.11.0

[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: Europe/London
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] htmlwidgets_1.6.2   compiler_4.3.1      fastmap_1.1.1      
 [4] cli_3.6.1           tools_4.3.1         htmltools_0.5.5    
 [7] xaringanExtra_0.7.0 rstudioapi_0.15.0   yaml_2.3.7         
[10] rmarkdown_2.23      knitr_1.43.1        jsonlite_1.8.7     
[13] xfun_0.39           digest_0.6.33       rlang_1.1.1        
[16] evaluate_0.21      


  1. Pokémon and Pokémon character names are trademarks of Nintendo. Copyright is 1995–2020 Nintendo/Creatures Inc/GAME FREAK inc↩︎