HomePluginsToolsWorkflowAboutContact
GetSet

Premium UI/UX layout engines, customizable micro-interaction plugins, and high-performance components for modern web developers.

Plugins

  • Carousel
  • Select
  • Zoom
  • FlexoGrid
  • Sortable
  • Modal
  • Drawer
  • Tooltip
  • Popover
  • Toast
  • ContextMenu
  • Tabs
  • Accordion
  • Reveal
  • Autocomplete
  • Tags
  • Range
  • DatePicker
  • Upload
  • Cropper
  • Table
  • Tree
  • Editor

Company

  • Home
  • Plugins
  • Developer Tools
  • Showcase
  • Our Process
  • About Us
  • Contact

Policies

  • Terms and Conditions
  • Privacy Policy
  • Accessibility Policy
  • Cookie Policy

© 2026 GetSet. All rights reserved.

Crafted for frontend excellence.

Your Bundle

Your bundle is empty

Add plugins from the catalog to build one combined CDN link — like picking font families.

Browse plugins
Media Plugin

GS Carousel

High-performance infinite scrolling carousel engine with touch gestures, hardware acceleration, and dynamic slides support.

Latest: v1.0.216
Downloads last month: 4,053
Visit Demo Website

Install Package

npm i @get-set/gs-carousel
or via CDN
<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>
Interactive Playground

Live Sandbox

Carousel.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
  );
}
Live Preview
Slide One

Drag or swipe to slide

Slide Two

Hardware accelerated swipe

Slide Three

Infinite loop support

Options

Configuration Values

Carousel Type?25 transition engines. Single-slide types lock slidesToShow/Scroll to 1.
Slides to Show?Number of slides visible at once.
Slides to Scroll?Slides advanced per navigation step. Can never exceed slidesToShow.
Initial Slide Index?0-based index of the slide the carousel starts on.
Active Slot Index?1-based slot of the visible window holding the active item. Overrides Center Mode when changed.
Chrome Theme?Theme for arrows / indicators / counter.
Accent Color?Any CSS color for indicators/progress/controls (sets --gs-accent).
Arrow Style?Built-in arrow button style.
Autoplay Interval (ms)?Delay between auto-advances.
Autoplay Initial Delay (ms)?One-time delay before the first auto-advance.
Transition Speed (ms)?Slide transition duration.
Slide Gap?Gap between slides (e.g. "12px").
Edge Peek (%)?Peek amount of adjacent out-of-window slides.
Ignore Selector?Children matching this selector are not slides.
Reference Key?Registry key (needed for syncWith).
Sync With (reference)?Reference key of another carousel to mirror.

Feature Flags

API Specifications

OptionTypeDefaultDescription
referencestringrandom GUIDUnique 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.
slidesToShownumber1Slides visible at once.
slidesToScrollnumber1Slides advanced per step.
initialSlidenumber00-based slide the carousel starts on.
loopbooleantrueInfinite looping (adds clones).
activeIndexnumber11-based slot (within the visible window) that holds the active item; track repositions so active item lands there.
centerModebooleanfalseShortcut for "active item centered" (activeIndex = middle slot). Ignored if activeIndex is set.
edgeBlankSpacebooleanfalseNon-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.
stackPeeknumber2stack only: how many cards peek behind the top card.
stackOffsetnumber14stack only: px offset between stacked cards.
stackScaleStepnumber0.06stack only: scale reduction per depth.
accordionCollapsedSizestring | 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.
marqueeSpeednumber60marquee only: continuous scroll speed (px/sec).
marqueeDirection'left' | 'right''left'marquee only: scroll direction.
marqueeBouncebooleanfalsemarquee only: ping-pong between edges instead of infinite loop.
autoplaybooleantrueAuto-advance.
autoplaySpeednumber3000Delay between auto-advances (ms).
autoplayStartnumber0One-time delay (ms) before the first auto-advance.
animationSpeednumber1000Transition duration (ms).
arrowsbooleantrueShow prev/next arrows.
prevArrow / nextArrowstring | HTMLElementbuilt-in buttonsMarkup string, CSS selector, or element.
draggablebooleantrueMouse/touch dragging.
indicatorsboolean | object{}Dots config (type, direction, overlay, positions, indicatorsContainer, ...).
indicatorsContainerstring | HTMLElement–Render indicators into this element (top-level shortcut for indicators.indicatorsContainer).
counterboolean | objectfalseSlide counter (template, positions, overlay).
adaptiveHeightbooleanfalseMatch container height to the visible slide(s).
verticalbooleanfalseVertical orientation.
variableSizebooleanfalseSlides keep their natural size.
gapstring | number''Gap between slides.
previewPercentnumber0Peek amount of adjacent slides.
focusOnSelectbooleantrueClick a slide to navigate to it.
ignoreItemsstring'.gs-ignore'Selector for elements in the track to exclude from the carousel (hidden, not counted/cloned).
focusedZoomedIndexnumber–Deprecated — use activeIndex/centerMode. 0 maps to centerMode:true; any other value maps to activeIndex.
reversebooleanfalseAuto ping-pong direction.
rightToLeftbooleanfalseRTL autoplay direction (also accepts rigthToLeft).
pauseOnHover / pauseOnFocusbooleantruePause autoplay on interaction.
accessibilitybooleantrueArrow-key navigation + focus handling.
syncWithstring''reference of another carousel to keep in sync.
responsiveArray<{ windowSize, params }>[]Per-breakpoint overrides.
disabledbooleanfalseSkip initialisation.
gsxobject–React only — scoped inline styles for the instance.

Technical Features

Hardware Acceleration

Leverages CSS 3D transforms for lag-free sliding.

Swipe Gestures

Touch screen swipe velocity tracking for natural response.

Infinite Looping

Seamless slot recycling loops slides infinitely.

Fluid REM Compliance

Perfect sizing calculations on ultra-wide design systems.