Carousel in Vanilla JS

Check it out :)

Demo

Purpose

Building a carousel in Vanilla JS for the purpose of practicing Javascript.

Goal

• Infinite carousel (single item)
• Infinite carousel (mulitple items)
• Sliding effect
• Carousel indicator (nav)
• Responsive slider
• Support at least IE9.
• Try to cover as many use cases as possible. (Prob the hardest part..)

( will update goal in future :) )

---

Development Log

---

06.21

• Initial setup
• Base markup of carousel (HTML)
• Base style for development (CSS)
• Base structure of carousel (JS)
  • carousel is infinite

06.22

• Add sliding effects (only when previous button is clicked)

06.23

• After adding next slide to be active...
  • Oops! Carousel is acting weird LoL #%^#&

06.24

• Add animation keyframes for the slide effects
• Fixed carousel!! And now it's an infinite single sliding carousel

06.25

• Disable previous and next buttons when slider animation is running

08.16

• Fix IE issue: carousel not working due to helper functions not accessible in IE browser (Currently only supporting till IE 10).