Keen Slider

Summary

• No workarounds required — works with custom controls
• Hook-based React API with useKeenSlider
• Has 1 long-standing open issue (multi-slide view)

Accessibility Analysis

Score: 66.7% — 2/3 accessibility issues resolved

Open Issue (1)

• “Slider controls break if using more than 1 slide per view” — 1,190+ days old

Implementation Notes

Keen Slider has no built-in pagination. Use slideChanged event to sync custom pagination state.

Vanilla JS Setup

const slider = new KeenSlider('#slider', {
  loop: true,
  slideChanged: (s) => {
    const index = s.track.details.rel
    updateDots(index)
  }
})

// Navigate to specific slide
slider.moveToIdx(index)

React Setup

const [currentSlide, setCurrentSlide] = useState(0)
const [sliderRef, instanceRef] = useKeenSlider({
  loop: true,
  slideChanged: (s) => setCurrentSlide(s.track.details.rel),
})

// Navigate
instanceRef.current?.moveToIdx(index)

Custom Dots

{slides.map((_, i) => (
  <button
    key={i}
    onClick={() => instanceRef.current?.moveToIdx(i)}
    aria-label={`Go to slide ${i + 1}`}
    aria-current={i === currentSlide ? 'true' : undefined}
  />
))}