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

Interactive Demo Playground

<sliding-banner> Playground
⚙️ Configure Properties
❌ Invalid JSON Formatting
Array of slides. { id, title, subtitle, ctaText, media, mapLinks }
Whether to auto-play the slides.
5000
Delay in milliseconds between slides.
Transition effect: "slide", "fade", "cube", "flip", "zoom", etc.
Canvas background effect: "none", "particles", or "waves".
Show next/previous arrows.
Show navigation dots.
Loop back to first slide when reaching the end.
Hide arrows if there is only one slide.
Applies shimmer loading skeleton.

Usage Code Generator 

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: 'waves',
  }}
/>
<script lang="ts">
  import SlidingBanner from '@chronos-ui/core/svelte/SlidingBanner.svelte';

  const items = [
    { id: '1', title: 'Summer Sale',   subtitle: 'Up to 50% off', media: { type: 'image', url: '/s1.jpg' } },
    { id: '2', title: 'New Arrivals', subtitle: 'Latest collection', media: { type: 'image', url: '/s2.jpg' } },
  ];
</script>

<SlidingBanner
  {items}
  config={{ autoStart: true, showDots: true, animationEffect: 'zoom', backgroundEffect: 'waves' }}
/>
<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","backgroundEffect":"waves"}'
></sliding-banner>

Props API Reference

PropTypeDefaultDescription
items required WidgetItem[] — Array of slide items
config.autoStart boolean undefined Whether to auto-play the slides (default: true)
config.rotateAgain boolean undefined Whether to loop back to the first slide (default: true)
config.delayMs number undefined Delay in milliseconds between slides (default: 5000)
config.showNextPrev boolean undefined Show next/previous arrows (default: true)
config.showArrows boolean undefined Show next/previous arrows (default: true)
config.showDots boolean undefined Show navigation dots (default: true)
config.animationEffect 'slide' | 'fade' | 'cube' | 'flip' | 'zoom' | ... undefined Transition effect between slides (default: 'slide')
config.backgroundEffect 'none' | 'particles' | 'waves' undefined Canvas background animation (default: 'none')
config.hideArrowsIfNoScroll boolean undefined Hide arrows if there is only one slide (default: true)
className string undefined Additional CSS class names on the root element
isLoading boolean undefined Applies shimmer to all slide backgrounds
lazyLoad boolean undefined Defer autoplay/canvas effects 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')