Advent of JavaScript, Day 9

Advent of JS Homepage

Challenge #9 an image carousel:

Screenshot of app

With the project files downloaded and codesandbox’d into a live CodeSandbox, I’m ready to get going!

User Requirements

Again, let’s start with the User Requirements and speculate how I can solve these:

  • toggle left and right through the image thumbnails

Alrighty, this seems simple:

  • currentIndex is the index of the current image to replace .feature
  • Event handlers on .left and .right to decrement and increment, respectively, currentIndex
  • click an image to select it manually

This will set the currentIndex to the index of the clicked image.

Wiring it Up

With Vue, this should all be a cinch!

I’d like to use transitions, since a quick Google shows that the out-in may work to make this seamless:

However, probably not if I’m replacing elements vs. hiding/showing different ones. I’m going to skip transitions for now…

  1. Adding Vue, as usual:

    <script src=""></script>

    I find wiring up the markup first helps clarify the most semantic API before I start writing imperative (i.e. JavaScript) code.

  2. Making .feature reactive:

    <div class="feature">
      <img :src="'images/' + currentImage.image" alt="Featured" />
      <div class="caption">{{ currentImage.caption }}</div>
  3. Making .thumbnails reactive:

    I wanted to make sure the thumbnails continued to scroll into view as .left and .right were clicked. Vue has a ref attribute that allows you to reference an element from the template, just like React:

    <div class="thumbnails">
          v-for="(item, index) in content"
          :class="{ selected: index === currentIndex }"
          <a @click.prevent="currentIndex = index" href="#">
              :src="'images/' + item.image"
              :alt="'Thumbnail of ' + item.caption"
  4. Making .left and .right reactive:

    I modeled this after the window.history.go(delta) API:

    <a @click.prevent="go(-1)" href="#" class="left">
      <img src="./images/chevron.svg" alt="" />
    <a @click.prevent="go(+1)" href="#" class="right">
      <img src="./images/chevron.svg" alt="" />


I think I need to try something different from Vue for the next one(s). Vue is making things too easy…