A Pokémon sprite carousel with {slickR}


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:

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