Chronos UI/ Sliding Banner
View Source
▶ Component

Sliding Banner

Full-featured slider with 13 transition effects, canvas backgrounds (particles/waves), autoplay, arrows & dots.

npm install @chronos-ui/core

Available Effects

slidefadezoomflippush-uppush-downpush-leftpush-rightwipe-leftwipe-rightcubedoorfall

Live Preview

SlidingBanner — fade effect · autoplay

Summer Sale

Up to 50% off everything

New Arrivals

Shop the latest collection

Free Shipping

On all orders over $75

Usage 

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

const items = [
  { id: '1', title: 'Summer Sale',   subtitle: 'Up to 50% off', ctaText: 'Shop Now', media: { type: 'image', url: '/s1.jpg' }, mapLinks: [{ url: '/sale' }] },
  { id: '2', title: 'New Arrivals', subtitle: 'Latest collection', ctaText: 'Explore', media: { type: 'image', url: '/s2.jpg' }, mapLinks: [{ url: '/new' }] },
];

<SlidingBanner
  items={items}
  config={{
    autoStart: true,
    rotateAgain: true,
    delayMs: 5000,
    showNextPrev: true,
    showDots: true,
    animationEffect: 'fade',
    backgroundEffect: 'particles',
  }}
/>
<script lang="ts">
  import SlidingBanner from '@chronos-ui/core/svelte/SlidingBanner.svelte';
</script>

<SlidingBanner
  {items}
  config={{ autoStart: true, showDots: true, animationEffect: 'zoom' }}
/>
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/SlidingBanner.js"></script>

<sliding-banner
  items='[{"id":"1","title":"Sale"}]'
  config='{"autoStart":true,"showDots":true,"animationEffect":"fade"}'
></sliding-banner>

Props

PropTypeDefaultDescription
items required WidgetItem[] — Array of slide items
config SliderConfig undefined Slider behaviour configuration — see SliderConfig table
className string undefined Additional CSS class names on the root element
isLoading boolean undefined Applies shimmer to all slide backgrounds