ContentVidya UI/ Sliding Banner
View Source
▶ Component

Sliding Banner

Full-featured slider with 14 transition effects, 11 canvas background effects, autoplay, arrows & dots.

npm install @contentvidya/ui

Available Effects

slidefadezoomflippush-horizontalpush-verticalwipecubedoorfallcrushpeel-offcurtain

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", "zoom", "flip", "push-horizontal", "push-vertical", "wipe", "cube", "door", "fall", "crush", "peel-off", or "curtain".
Visual fidelity of the transition: "detailed" adds motion-blur pulses and directional shadows for a premium feel; "light" keeps just the core transform for cheaper compositing on low-powered devices or embeds where the extra draw cost isn't worth it.
Canvas background effect: "none", "particles", "waves", "rain", "thunderstorm", "sunrise", "sunset", "fog", "autumn", "festival", "santa", or "sea".
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 '@contentvidya/ui/react/SlidingBanner';
import '@contentvidya/ui/theme.css';
// import { defaultBackgroundEffectPlugin } from '@contentvidya/ui/react/utils/backgroundEffects';
// Optionally override the canvas animation engine per-instance:
// config={{ ..., backgroundEffectPlugin: { start: myStart, stop: myStop } }}

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 '@contentvidya/ui/svelte/SlidingBanner.svelte';
  // import { defaultBackgroundEffectPlugin } from '@contentvidya/ui/svelte/utils/backgroundEffects';
  // Optionally override the canvas animation engine per-instance:
  // config={{ ..., backgroundEffectPlugin: { start: myStart, stop: myStop } }}

  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/@contentvidya/ui/webcomponents/SlidingBanner.js"></script>

<!-- backgroundEffectPlugin ({ start, stop } functions) can't be passed as an
     HTML attribute string — set it as a JS property instead:
     document.querySelector('sliding-banner').config = { ...existingConfig, backgroundEffectPlugin: { start: myStart, stop: myStop } }; -->
<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.animationQuality 'light' | 'detailed' undefined Visual fidelity of the transition effect. 'detailed' (default) layers in motion-blur pulses and directional shadows on the rotational/fast effects (flip, cube, door, fall, push, wipe, crush, peel-off, curtain) for a premium feel. 'light' keeps only the core transform/opacity/clip-path animation — cheaper to composite, useful for low-powered devices or embeds where the extra draw cost isn't worth it.
config.backgroundEffect 'none' | 'particles' | 'waves' | 'rain' | 'thunderstorm' | 'sunrise' | 'sunset' | 'fog' | 'autumn' | 'festival' | 'santa' | 'sea' undefined Canvas background animation, from the shared plugin engine (src/utils/backgroundEffects.ts) also used by Banner. Default: 'none'
config.backgroundEffectPlugin BackgroundEffectPlugin undefined Optional { start, stop } override for the canvas animation engine, letting a consumer (e.g. the CMS page editor) inject its own effect renderer per-instance instead of the built-in one. Falls back to defaultBackgroundEffectPlugin exported from src/utils/backgroundEffects.ts when omitted.
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')
Custom animation engine: Pass config.backgroundEffectPlugin={{ start, stop }} to inject your own animation implementation per-instance instead of the built-in canvas renderers — useful when a consumer (e.g. the CMS page editor) wants to control the effect engine itself. Omit it and the component falls back to defaultBackgroundEffectPlugin, exported from src/utils/backgroundEffects.ts.