Web Component: j-Carousel2

  • Info
  • HTML
  • JS
  • CSS
  • Meta


Is a simple carousel component optimized for desktop computers and mobile devices. Each elemet must be wrapped into the <figure> element (look to example).


  • selector {String} a selector for cell element (default: figure)
  • count {Number} count of visible items (default: 1)
  • margin {Number} left margin between items (default: 10)
  • animate {Number} animation timeout, 0 disables animation (default: 5000)
  • delay {Number} A delay between animation (default: 2000)
  • parent {String} optional, a selector for obtaining of height
  • marginheight {Number} optional, a margin for height (default: 0)
  • NEW: scrolldivider {Number} optional, if the count isn't declared then the element width will be divided according to this value, and the value will be used for scrollLeft (default: 3)
  • NEW: offsetwidth {Number} optional, increases the content width (default: 0)
  • NEW: duration {Number} optional, animation duration between scrolling items (default: 300)
  • NEW: durationsnap {Number} optional, duration for snap animation (default: 200)


  • component.move('next|right/prev|left') scrolls the content right or left
  • component.focus('data-id value') scrolls to the specific figure with data-id attribute

Good to know:

If the component's path is changed then the component summarizes all cells again.