Chronos UI/ Alternating Slider
View Source
⇅ Component

Alternating Slider

Multi-column slider where adjacent columns scroll in opposite vertical directions for a dramatic reveal effect.

npm install @chronos-ui/core

Interactive Demo Playground

<alternating-slider> Playground
⚙️ Configure Properties
❌ Invalid JSON Formatting
Array of items to group into sliding columns.
2
Number of adjacent sliding columns.
Whether to auto-play the slider.
5000
Delay in milliseconds between slides.
Show vertical slider navigation arrows.
Show pagination dots.
Hide navigation arrows if there is only one column group.
Applies shimmer loading skeleton.

Usage Code Generator 

import AlternatingSlider from '@chronos-ui/core/react/AlternatingSlider';
import '@chronos-ui/core/theme.css';

const items = [
  { id: 'a', title: 'Women',    subtitle: 'New season', ctaText: 'Shop', media: { type: 'image', url: '/w.jpg' } },
  { id: 'b', title: 'Men',      subtitle: 'Essentials', ctaText: 'Shop', media: { type: 'image', url: '/m.jpg' } },
  { id: 'c', title: 'Kids',     subtitle: 'Play more',  ctaText: 'Shop', media: { type: 'image', url: '/k1.jpg' } },
  { id: 'd', title: 'Footwear', subtitle: 'Step up',    ctaText: 'Shop', media: { type: 'image', url: '/k2.jpg' } },
];

<AlternatingSlider
  items={items}
  config={{ columns: 2, autoStart: true, delayMs: 4000, showArrows: true, showDots: true }}
/>
<script lang="ts">
  import AlternatingSlider from '@chronos-ui/core/svelte/AlternatingSlider.svelte';
</script>

<AlternatingSlider
  {items}
  config={{ columns: 2, autoStart: true, showDots: true }}
/>
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/AlternatingSlider.js"></script>

<alternating-slider
  config='{"columns":2,"autoStart":true,"showDots":true}'
  items='[...]'
></alternating-slider>

Props API Reference

PropTypeDefaultDescription
items required WidgetItem[] — Flat list; grouped into slide-sets by the columns config value
config.columns number undefined Number of vertical sliding columns (default: 2)
config.autoStart boolean undefined Whether to auto-play the slider (default: true)
config.delayMs number undefined Delay in milliseconds between slides (default: 5000)
config.showArrows boolean undefined Show next/previous arrows (default: true)
config.showDots boolean undefined Show navigation dots (default: true)
config.hideArrowsIfNoScroll boolean undefined Hide arrows if there is only one slide set (default: true)
className string undefined Additional CSS class names on the root element
isLoading boolean undefined Applies shimmer animation to all cells
lazyLoad boolean undefined Defer autoplay and slide media until scrolled near the viewport (default: true)
lazyThreshold number undefined IntersectionObserver threshold, 0-1 (default: 0.1)
lazyRootMargin string undefined IntersectionObserver rootMargin (default: '200px')
Column grouping: Items are grouped into slide-sets automatically. With columns: 2 and 4 items you get 2 slide-sets of 2. Keep items.length a multiple of columns for best results.