Alternating Slider

npm install @chronos-ui/core

Live Preview

Women

New season

Kids

Play more

Footwear

Step up

Men

Essentials

Usage

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

Prop	Type	Default	Description
items required	WidgetItem[]	—	Flat list; grouped into slide-sets by the `columns` config value
config	AlternatingConfig	undefined	Slider configuration — see AlternatingConfig table
className	string	undefined	Additional CSS class names on the root element
isLoading	boolean	undefined	Applies shimmer animation to all cells

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.