@egjs/flicking

Summary

• No workarounds required — works well with custom controls
• Reactive API makes pagination state sync easy
• Only 2 accessibility issues ever reported (both resolved)

Accessibility Analysis

Score: 100% — All 2/2 accessibility issues resolved Median resolution time: 300 days

Strengths

• Native support for: Vanilla JS, React, Vue, Angular, Svelte
• All reported issues resolved

Concerns

• Only 2 issues ever reported — limited real-world a11y testing
• Past issues included keyboard tab navigation problems

Implementation Notes

Pagination

The @egjs/flicking-plugins Pagination plugin was unreliable. Use connectFlickingReactiveAPI() for custom pagination:

import Flicking, { connectFlickingReactiveAPI } from '@egjs/flicking'

const flicking = new Flicking('.viewport', { circular: true })
const reactive = connectFlickingReactiveAPI(flicking)

// Subscribe to index changes
reactive.subscribe('currentPanelIndex', (index) => {
  updateDots(index)
})

Swipe/Drag Configuration

Requires explicit configuration for swipe to work:

{
  inputType: ['touch', 'mouse'],
  moveType: 'snap',
  preventDefaultOnDrag: true
}

Must include .flicking-camera wrapper in HTML structure.

Animation Errors

Clicking prev/next rapidly throws “Animation is already playing” errors. Fix:

flicking.prev().catch(() => {})
flicking.next().catch(() => {})