/carousel_vanillaJS

Building a carousel in Vanilla JS

Primary LanguageJavaScript

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).