About ARS Data Roller
A dynamic component that displays an array of data items one by one with smooth 3D rotation animations. Perfect for showing changing information like status updates, statistics, or rotating content.
Basic Usage
Simple String Array
Object Data Examples
Title-Value Pairs
Key-Value Objects
Customization Examples
Fast Animation (1 second interval)
Slow Animation (5 second interval)
Interactive Control Panel
Dynamic Data Roller
Create and control your own data roller with custom settings.
Real-world Examples
Trading Statistics
System Monitor
Social Media Feed
Usage Instructions
HTML Usage:
<ars-data-roller data='["item1", "item2"]' interval="3000" animation-duration="500"></ars-data-roller>
Attributes:
data: JSON array of items to display (required)
interval: Milliseconds between transitions (optional, default: 3000)
animation-duration: Milliseconds for animation (optional, default: 500)
Data Formats:
Strings: Simple text display
Title-Value Objects: {"title": "Label", "value": "Data"}
Key-Value Objects: {"key1": "value1", "key2": "value2"}
JavaScript API:
startRolling(): Start the automatic rotation
stopRolling(): Stop the automatic rotation
nextItem(): Manually advance to next item
setData(array): Update the data array
setInterval(ms): Change the interval
Styling the Data Roller
Customizing with CSS Variables
You can style ars-data-roller using CSS variables for background, text color, border radius, font size, and label color. Example:
Just add a class to your roller and style it in your CSS!