⏰ 30 mins

  1. In this exercise, we’ll practice template refs but also a lot of other concepts you’ve learned throughout the first 2 days
  2. Your goal for this exercise is to create an auto rotating image carousel
  3. In exercise-13-begin.vue there is some boilerplate that displays 10 user images, 1 at a time
  4. All the styles are already in place, it is your job to make the slider actually work.
  5. It should rotate between images every 3 seconds
  6. It should have a nice transition when moving between different images

<aside> 💡 HINT: You can use a dynamic inline style on the image slides that like so: transform: translateX(-[whatever slide is active * the clientWidth of an individual slide]px) - A transition rule is already applied so that the browser will move smoothly between the different positions

</aside>

  1. It should be responsive and work at multiple screen sizes
  2. It should be responsible and clean up any event listeners and/or intervals it creates on unMounted

exercise-13.mp4

💪 Bonus

If you finish early, try making the carousel stop moving when you hover over it with your mouse and then resume once the mouse leaves again.

Helpful Resources

  1. Vue.js Docs - Template Refs
  2. Vue.js Docs - Lifecycle Hooks
  3. MDN Docs - clientWidth
  4. MDN Docs - setInterval