High-performance infinite scrolling carousel engine with touch gestures, hardware acceleration, and dynamic slides support.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-carousel/latest/gs-carousel.min.css"> <script src="https://cdn.get-set.it/gs-carousel/latest/gs-carousel.min.js"></script>
import Carousel from '@get-set/gs-carousel'; export default function App() { return ( <Carousel type="classic" autoplay={true} > <div className="slide-one">Slide One</div> <div className="slide-two">Slide Two</div> <div className="slide-three">Slide Three</div> </Carousel> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | random GUID | Unique key (used by syncWith and the registry). |
| type | 'classic' | 'withScale' | 'coverflow3d' | 'fan' | 'cylinder3d' | 'fade' | 'flip' | 'cube' | 'kenBurns' | 'zoom' | 'wipe' | 'pageTurn' | 'accordion' | 'stack' | 'marquee' | 'classic' | Carousel mode. fade/flip/cube/cylinder3d/kenBurns/zoom/wipe/pageTurn/accordion are 1-slide-at-a-time; marquee is continuous. |
| slidesToShow | number | 1 | Slides visible at once. |
| slidesToScroll | number | 1 | Slides advanced per step. |
| initialSlide | number | 0 | 0-based slide the carousel starts on. |
| loop | boolean | true | Infinite looping (adds clones). |
| activeIndex | number | 1 | 1-based slot (within the visible window) that holds the active item; track repositions so active item lands there. |
| centerMode | boolean | false | Shortcut for "active item centered" (activeIndex = middle slot). Ignored if activeIndex is set. |
| edgeBlankSpace | boolean | false | Non-loop only: true lets the first/last item reach the active slot leaving blank space; false clamps. |
| scale | { focused?, min?, minOpacity? } | { focused: 1, min: 0.6, minOpacity: 0.4 } | withScale / coverflow3d: focused = scale of zoomed item, min = scale of farthest side item, minOpacity = side opacity. |
| coverflow | { perspective?, rotate?, depth? } | { perspective: 1000, rotate: 50, depth: 100 } | coverflow3d only: perspective (px), max rotate (deg) and depth (translateZ px) of farthest side card. |
| cube | { perspective? } | { perspective: 1000 } | cube only: perspective (px) of the cube viewport. |
| stackPeek | number | 2 | stack only: how many cards peek behind the top card. |
| stackOffset | number | 14 | stack only: px offset between stacked cards. |
| stackScaleStep | number | 0.06 | stack only: scale reduction per depth. |
| accordionCollapsedSize | string | number | '60px' | accordion only: size of a collapsed panel (CSS length). |
| fan | { rotate?, arc?, originY? } | { rotate: 22, arc: 24, originY: '160%' } | fan only: max splay rotate (deg) and arc (px) of side cards, and the pivot originY. |
| cylinder | { perspective?, faces? } | { perspective: 1200, faces: derived } | cylinder3d only: viewport perspective (px) and number of faces around the ring (min 3). |
| kenBurns | { zoom?, direction? } | { zoom: 1.12, direction: 'center' } | kenBurns only: peak zoom and pan direction (center / top / bottom / left / right / corners). |
| wipe | { direction? } | { direction: 'left' } | wipe only: reveal edge — left / right / up / down. |
| marqueeSpeed | number | 60 | marquee only: continuous scroll speed (px/sec). |
| marqueeDirection | 'left' | 'right' | 'left' | marquee only: scroll direction. |
| marqueeBounce | boolean | false | marquee only: ping-pong between edges instead of infinite loop. |
| autoplay | boolean | true | Auto-advance. |
| autoplaySpeed | number | 3000 | Delay between auto-advances (ms). |
| autoplayStart | number | 0 | One-time delay (ms) before the first auto-advance. |
| animationSpeed | number | 1000 | Transition duration (ms). |
| arrows | boolean | true | Show prev/next arrows. |
| prevArrow / nextArrow | string | HTMLElement | built-in buttons | Markup string, CSS selector, or element. |
| draggable | boolean | true | Mouse/touch dragging. |
| indicators | boolean | object | {} | Dots config (type, direction, overlay, positions, indicatorsContainer, ...). |
| indicatorsContainer | string | HTMLElement | – | Render indicators into this element (top-level shortcut for indicators.indicatorsContainer). |
| counter | boolean | object | false | Slide counter (template, positions, overlay). |
| adaptiveHeight | boolean | false | Match container height to the visible slide(s). |
| vertical | boolean | false | Vertical orientation. |
| variableSize | boolean | false | Slides keep their natural size. |
| gap | string | number | '' | Gap between slides. |
| previewPercent | number | 0 | Peek amount of adjacent slides. |
| focusOnSelect | boolean | true | Click a slide to navigate to it. |
| ignoreItems | string | '.gs-ignore' | Selector for elements in the track to exclude from the carousel (hidden, not counted/cloned). |
| focusedZoomedIndex | number | – | Deprecated — use activeIndex/centerMode. 0 maps to centerMode:true; any other value maps to activeIndex. |
| reverse | boolean | false | Auto ping-pong direction. |
| rightToLeft | boolean | false | RTL autoplay direction (also accepts rigthToLeft). |
| pauseOnHover / pauseOnFocus | boolean | true | Pause autoplay on interaction. |
| accessibility | boolean | true | Arrow-key navigation + focus handling. |
| syncWith | string | '' | reference of another carousel to keep in sync. |
| responsive | Array<{ windowSize, params }> | [] | Per-breakpoint overrides. |
| disabled | boolean | false | Skip initialisation. |
| gsx | object | – | React only — scoped inline styles for the instance. |
Leverages CSS 3D transforms for lag-free sliding.
Touch screen swipe velocity tracking for natural response.
Seamless slot recycling loops slides infinitely.
Perfect sizing calculations on ultra-wide design systems.