react-slick

react-slick is a React carousel component that reimplements the widely-used jQuery Slick Carousel as a native React component, preserving Slick’s exact settings API (dots, infinite, speed, slidesToShow, slidesToScroll, responsive breakpoints) so teams migrating from jQuery Slick can drop it in with almost no relearning.

Under the hood, a public Slider component delegates the actual slide-index, autoplay, and touch/drag logic to an internal InnerSlider engine, while a separate Track component handles pure per-slide CSS transform rendering. Responsive breakpoints are implemented with real CSS media-query listeners rather than resize-based width polling, keeping the library SSR-safe and performant across a wide peer-dependency range spanning React 0.14 through React 19.

What You Get

• A drop-in Slider component with the same settings object shape (dots, arrows, infinite, autoplay, speed, slidesToShow, slidesToScroll) as jQuery Slick
• Responsive breakpoints defined as a responsive array of { breakpoint, settings } objects, applied via real CSS media queries instead of JS resize polling
• Imperative slide control methods (slickNext, slickPrev, slickGoTo, slickPause, slickPlay) exposed through a component ref
• Touch/swipe gesture support, infinite-loop slide cloning, centerMode, and lazy-loading of off-screen slides
• A minimal runtime dependency footprint (classnames, json2mq, lodash.debounce, resize-observer-polyfill) with peer support for React 0.14 through React 19

Common Use Cases

• Image galleries and product photo carousels on e-commerce product pages
• Testimonial and logo carousels on marketing/landing pages
• Featured-content or hero sliders on homepages
• Migrating an existing jQuery Slick Carousel implementation to a React codebase without rewriting the settings configuration

Under The Hood

Architecture The public Slider component (src/slider.js) is a thin class-component wrapper that owns only responsive-breakpoint state, delegating the real slide-index, autoplay-timer, and touch/drag logic to an internal InnerSlider engine (src/inner-slider.js, the largest file in the codebase at roughly 23KB). Track (src/track.js) is a pure rendering layer that computes per-slide CSS transforms and active/cloned classes from a shared “spec” object (a merged props+state snapshot) rather than owning any state itself, and Dots/Arrows are simple presentational components fed from the same spec. Shared calculations — clone counts for infinite-loop illusion, lazy-load visible ranges, slide-width math — live in a single utils/innerSliderUtils.js module imported by both Track and InnerSlider, avoiding duplicated math between the rendering and interaction layers. Responsive breakpoints are handled entirely at the outer Slider layer via json2mq-generated media queries and window.matchMedia listeners (guarded by a canUseDOM() check for SSR safety), which then swap the settings object passed down into InnerSlider — keeping breakpoint switching decoupled from the core slide engine. This is a class-component, imperative-setState architecture typical of pre-hooks React libraries: state changes flow through numerous named methods (slickNext, slickPrev, changeSlide, autoPlay) rather than derived/memoized state, so a change to the clone-count or slide-index math in innerSliderUtils.js would ripple through both the track-rendering and touch-handling code paths that depend on the same spec fields.

Tech Stack Plain JavaScript (roughly 95% of the codebase) compiled with Babel (@babel/preset-env, @babel/preset-react), bundled for distribution with a combination of gulp and Webpack 4, and shipped as CommonJS output under lib/. Runtime dependencies are deliberately minimal — classnames for class composition, json2mq for building media-query strings, lodash.debounce for resize-handler throttling, and resize-observer-polyfill — with peer dependencies on react/react-dom spanning an unusually wide range (^0.14 through ^19), maintained because the library’s API surface is entirely class-component based and doesn’t lean on newer React internals. Testing spans two frameworks: Jest 28 with jsdom and @testing-library/react for unit tests, plus Playwright with @playwright/experimental-ct-react for real-browser component tests — a more thorough combination than most UI libraries of comparable size.

Code Quality The tests directory contains focused unit tests (SimpleSlider, lazyLoad, beforeChange, afterChange) alongside a dedicated regression/ subdirectory and shared TestComponents/testUtils helpers, and a separate playwright-tests/ directory runs the same component in a real browser via Playwright’s experimental component-testing runner. ESLint (with eslint-plugin-react and eslint-plugin-import) and Prettier are wired through lint-staged and Husky pre-commit hooks, keeping style consistent across contributions. There is no TypeScript source — the small reported TypeScript percentage comes from type-declaration-adjacent files rather than implementation code — so consumers get no compile-time type safety beyond community @types packages, and runtime prop validation is largely absent, consistent with a presentational component library rather than one wrapping external I/O. Naming is consistent throughout (slick-prefixed imperative methods, a shared “spec” object convention across rendering helpers).

API Design react-slick’s core value isn’t a novel carousel technique — it’s being a deliberately faithful React port of jQuery Slick Carousel, preserving Slick’s exact settings/prop shape so teams migrating off jQuery can reuse their existing configuration almost verbatim rather than relearning a new carousel API. Getting started requires only a single Slider import and a settings object, with sensible defaults (src/default-props.js) covering most cases out of the box, and imperative ref methods (slickNext/slickPrev/slickGoTo) give a low-boilerplate escape hatch for programmatic control. Its choice to implement responsive breakpoints with genuine CSS media-query listeners (json2mq + matchMedia, guarded by canUseDOM()) rather than JS resize-width polling is a considered performance and SSR-safety decision. Documentation lives on a dedicated docs site (react-slick.neostack.com) with a full props/methods reference, though the README itself is comparatively thin. Overall its differentiator is migration compatibility and long-standing ecosystem maturity rather than a new technical approach — its feature set (infinite-loop cloning, lazy-loaded slides, centerMode) matches patterns already established by its jQuery predecessor and newer competing React carousel libraries (Swiper, Embla).