Product Carousel

  • Built as a native modern reusable Web Component (no external libs/frameworks)
  • Works on modern browsers, but best viewed on Chrome with DevTools turned off
  • Swipeable scrolling with snap-points and responsive layout
  • Indicators are responsive to tap/click
  • Star-rating accurately displays the decimal number rating instead of rounding to halfs
  • Works with any background-color
  • The indicators attribute can be set to false to preserve space
  • The accent-color attribute is any valid hex or color name
  • The focus-outline attribute can be set to true if you want to uglify the carousel for keyboard users/accessibility
  • Don't be scared of the JS panel - this custom element is portable and styles stay scoped. The CSS panel was not part of core code.
  • But are we sure this carousel is really necessary? 😉

(this repo imported from my codepen account)