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!